mirror of https://github.com/abpframework/abp.git
maliming
3 years ago
committed by
GitHub
GitHub
2010 changed files with 48797 additions and 46311 deletions
@ -1,6 +1,8 @@ |
|||
{ |
|||
"culture": "en", |
|||
"texts": { |
|||
"Buy": "Buy" |
|||
"Buy": "Buy", |
|||
"SeeBookDetails": "See Book Details", |
|||
"MasteringAbpFrameworkEBookDescription": "This book will help you gain a complete understanding of the framework and modern web application development techniques." |
|||
} |
|||
} |
|||
@ -0,0 +1,267 @@ |
|||
# ABP.IO Platform 7.3 RC Has Been Released |
|||
|
|||
Today, we are happy to release the [ABP Framework](https://abp.io/) and [ABP Commercial](https://commercial.abp.io/) version **7.3 RC** (Release Candidate). This blog post introduces the new features and important changes in this new version. |
|||
|
|||
Try this version and provide feedback for a more stable version of ABP v7.3! Thanks to all of you. |
|||
|
|||
## Get Started with the 7.3 RC |
|||
|
|||
Follow the steps below to try version 7.3.0 RC today: |
|||
|
|||
1) **Upgrade** the ABP CLI to version `7.3.0-rc.1` using a command line terminal: |
|||
|
|||
````bash |
|||
dotnet tool update Volo.Abp.Cli -g --version 7.3.0-rc.1 |
|||
```` |
|||
|
|||
**or install** it if you haven't before: |
|||
|
|||
````bash |
|||
dotnet tool install Volo.Abp.Cli -g --version 7.3.0-rc.1 |
|||
```` |
|||
|
|||
2) Create a **new application** with the `--preview` option: |
|||
|
|||
````bash |
|||
abp new BookStore --preview |
|||
```` |
|||
|
|||
See the [ABP CLI documentation](https://docs.abp.io/en/abp/latest/CLI) for all the available options. |
|||
|
|||
> You can also use the [Get Started](https://abp.io/get-started) page to generate a CLI command to create a new application. |
|||
|
|||
You can use any IDE that supports .NET 7.x, like [Visual Studio 2022](https://visualstudio.microsoft.com/downloads/). |
|||
|
|||
## Migration Guides |
|||
|
|||
There are a few breaking changes in this version that may affect your application. |
|||
Please see the following migration documents, if you are upgrading from v7.2: |
|||
|
|||
* [ABP Framework 7.2 to 7.3 Migration Guide](https://docs.abp.io/en/abp/7.3/Migration-Guides/Abp-7_3) |
|||
|
|||
> If you are using the CMS Kit or CMS Kit Pro module, please don't forget to create a new migration and apply it to your database. |
|||
|
|||
## What's New with ABP Framework 7.3? |
|||
|
|||
In this section, I will introduce some major features released in this version. Here is a brief list of the titles that will be explained in the next sections: |
|||
|
|||
* Introducing the Volo.Abp.Imaging packages |
|||
* ABP CLI: switch-to-local command |
|||
* Monitoring Distributed Events |
|||
* Ordering of the Local Event Handlers |
|||
* Nonce attribute support for Content Security Policy (CSP) |
|||
* Other News |
|||
|
|||
### Introducing the Volo.Abp.Imaging packages |
|||
|
|||
ABP Framework provides some packages to compress and resize images. Currently, there are four official packages: |
|||
|
|||
* `Volo.Abp.Imaging.Abstractions`: Provides common services for compression and resizing purposes. |
|||
* `Volo.Abp.Imaging.AspNetCore`: Provides some attributes for controller actions that can automatically compress and/or resize uploaded files. |
|||
* `Volo.Abp.Imaging.ImageSharp`: Implements the image compression & resize operations using the [ImageSharp](https://github.com/SixLabors/ImageSharp) library. |
|||
* `Volo.Abp.Imaging.MagickNet`: Implements the image compression & resize operations using the [Magick.NET](https://github.com/dlemstra/Magick.NET) library. |
|||
|
|||
You can use one of these official providers (`ImageSharp` or `Magick.NET`) or implement your own image resizer/compressor contributor and use it in your application. |
|||
|
|||
> See the [Image Manipulation](https://docs.abp.io/en/abp/7.3/Image-Manipulation) documentation to learn more and see the required configurations. |
|||
|
|||
### ABP CLI: switch-to-local command |
|||
|
|||
In this version, ABP CLI introduces a new CLI command: **"switch-to-local"**. The `switch-to-local` command changes all NuGet package references on a solution to local project references for all the `.csproj` files in the specified folder (and all its subfolders with any depth). |
|||
|
|||
**Usage:** |
|||
|
|||
```bash |
|||
abp switch-to-local --paths "C:\Github\abp" |
|||
``` |
|||
|
|||
### Monitoring Distributed Events |
|||
|
|||
ABP Framework allows you to stay informed when your application **receives** or **sends** a distributed event. This enables you to track the event flow within your application and take appropriate actions based on the received or sent distributed events. |
|||
|
|||
You just need to subscribe to one of the `DistributedEventReceived` or `DistributedEventSent` events and take additional actions according to your cases. |
|||
|
|||
**Example: Get informed when your application sends an event to the distributed event bus** |
|||
|
|||
```csharp |
|||
public class DistributedEventSentHandler : ILocalEventHandler<DistributedEventSent>, ITransientDependency |
|||
{ |
|||
public async Task HandleEventAsync(DistributedEventSent eventData) |
|||
{ |
|||
// TODO: IMPLEMENT YOUR LOGIC... |
|||
} |
|||
} |
|||
``` |
|||
|
|||
> See the documentation to learn more: [https://docs.abp.io/en/abp/7.3/Distributed-Event-Bus](https://docs.abp.io/en/abp/7.3/Distributed-Event-Bus) |
|||
|
|||
### Ordering of the Local Event Handlers |
|||
|
|||
In this version, ABP Framework introduces the `LocalEventHandlerOrder` attribute, which can be used to set the execution order for the event handlers. This can be helpful if you want to handle your local event handlers in a specific order. |
|||
|
|||
**Example:** |
|||
|
|||
```csharp |
|||
[LocalEventHandlerOrder(-1)] |
|||
public class MyHandler |
|||
: ILocalEventHandler<StockCountChangedEvent>, |
|||
ITransientDependency |
|||
{ |
|||
public async Task HandleEventAsync(StockCountChangedEvent eventData) |
|||
{ |
|||
//TODO: your implementation |
|||
} |
|||
} |
|||
``` |
|||
|
|||
By default, all event handlers have an order value of 0. Thus, if you want to take certain event handlers to be executed before other event handlers, you can set the order value as a negative value. |
|||
|
|||
> See the documentation to learn more: [https://docs.abp.io/en/abp/7.3/Local-Event-Bus](https://docs.abp.io/en/abp/7.3/Local-Event-Bus) |
|||
|
|||
### Nonce attribute support for Content Security Policy (CSP) |
|||
|
|||
ABP Framework supports adding unique value to nonce attribute for script tags which can be used by Content Security Policy to determine whether or not a given fetch will be allowed to proceed for a given element. In other words, it provides a mechanism to execute only correct script tags with the correct nonce value. |
|||
|
|||
This feature is disabled by default. You can enable it by setting the *UseContentSecurityPolicyScriptNonce* property of the `AbpSecurityHeadersOptions` class to **true**: |
|||
|
|||
```csharp |
|||
Configure<AbpSecurityHeadersOptions>(options => |
|||
{ |
|||
//adding script-src nonce |
|||
options.UseContentSecurityPolicyScriptNonce = true; //false by default |
|||
}); |
|||
``` |
|||
|
|||
> See the [Security Headers](https://docs.abp.io/en/abp/7.3/UI/AspNetCore/Security-Headers) documentation for more information. |
|||
|
|||
### Other News |
|||
|
|||
* Upgraded the [Blazorise](https://blazorise.com/) library to v1.2.3 for Blazor UI. After the upgrade, ensure that all Blazorise-related packages are using v1.2.3 in your application. |
|||
* Module Entity Extension support has been added for the CMS Kit module. See [#16572](https://github.com/abpframework/abp/issues/16572) for more information. |
|||
|
|||
If you want to see more details, you can check [the release on GitHub](https://github.com/abpframework/abp/releases/tag/5.3.0-rc.1), which contains a list of all the issues and pull requests were closed with this version. |
|||
|
|||
## What's New with ABP Commercial 7.3? |
|||
|
|||
We've also worked on [ABP Commercial](https://commercial.abp.io/) to align the features and changes made in the ABP Framework. The following sections introduce a few new features coming with ABP Commercial 7.3. |
|||
|
|||
### Account Module - Using Authenticator App for Two-Factor Authentication |
|||
|
|||
In this version, ABP Commercial provides a new **Two-Factor Authentication (2FA) provider** that allows you to log in to an application by scanning a QR Code with an Authenticator App, such as Microsoft Authenticator or Google Authenticator. |
|||
|
|||
You need to apply the following actions to configure an Authenticator and then you are free to log in by using the Authenticator App: |
|||
|
|||
**Step 1 - Enable Two Factor Authentication and Scan the QR Code:** |
|||
|
|||
 |
|||
|
|||
**Step 2 - Verify the QR Code with an authenticator app:** |
|||
|
|||
 |
|||
|
|||
**Step 3 - Save the recovery codes for later use in case of not being able to login by verifying the QR code:** |
|||
|
|||
 |
|||
|
|||
You can disable the two-factor authentication and reset the Authenticator App anytime you want, just by disabling the two-factor authentication or resetting the authenticator: |
|||
|
|||
 |
|||
|
|||
### Upgrade Blazorise to v1.2.3 |
|||
|
|||
Upgraded the [Blazorise](https://blazorise.com/) library to v1.2.3 for Blazor UI. If you are upgrading your project to v7.3.0, please ensure that all the Blazorise-related packages are using v1.2.3 in your application. Otherwise, you might get errors due to incompatible versions. |
|||
|
|||
### CMS Kit: Module Entity Extensions |
|||
|
|||
Module entity extension system is a high-level extension system that allows you to define new properties for existing entities of the dependent modules. ABP Framework and ABP Commercial use this system to allow developers to extend entities in different modules. |
|||
|
|||
In this version, Module Entity Extension support has been added for the CMS Kit Pro module. |
|||
|
|||
You can open the `YourProjectNameModuleExtensionConfigurator` class inside the `Domain.Shared` project of your solution and change the `ConfigureExtraProperties` method as shown below to add a new property to the `Poll` entity of the [CMS Kit Pro module](https://docs.abp.io/en/commercial/latest/modules/cms-kit/index): |
|||
|
|||
```csharp |
|||
public static void ConfigureExtraProperties() |
|||
{ |
|||
OneTimeRunner.Run(() => |
|||
{ |
|||
ObjectExtensionManager.Instance.Modules() |
|||
.ConfigureCmsKitPro(cmsKitPro => |
|||
{ |
|||
cmsKitPro.ConfigurePoll(poll => |
|||
{ |
|||
poll.AddOrUpdateProperty<string>( |
|||
"<property-name>", |
|||
property => |
|||
{ |
|||
//configuration for this property |
|||
} |
|||
) |
|||
}); |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
``` |
|||
|
|||
> See the [Module Entity Extensions documentation](https://docs.abp.io/en/abp/latest/Module-Entity-Extensions) to learn more. |
|||
|
|||
### LeptonX Account Layout |
|||
|
|||
In this version, Account Layout has been re-designed for LeptonX Theme. You can see the new account layout in the following figure: |
|||
|
|||
 |
|||
|
|||
> To use this new account layout, ensure that your LeptonX Theme package versions are v2.3+. |
|||
|
|||
## Community News |
|||
|
|||
### ABP Community Talks 2023.4: Angular 16 and ABP v7.3 |
|||
|
|||
 |
|||
|
|||
In this episode, the core ABP team talked about what's new with ABP v7.3 and Angular 16. You can watch the event from [here](https://www.youtube.com/watch?v=lq6u4vQURcI). |
|||
|
|||
### ABP .NET Conference 2023 |
|||
|
|||
 |
|||
|
|||
We organized ABP .NET Conference 2023 on May 2023 and we are happy to share the success of the conference, which captivated overwhelmingly interested live viewers from all over the world. 13 great line up of speakers which includes .NET experts and Microsoft MVPs delivered captivating talks that resonated with the audiences. Each of the talks attracted a great amount of interest and a lot of questions, sparking curiosity in the attendees. |
|||
|
|||
Thanks to all speakers and attendees for joining our event. |
|||
|
|||
> We shared our takeaways in a blog post, which you can read at [https://blog.abp.io/abp/ABP-.NET-Conference-2023-Wrap-Up](https://blog.abp.io/abp/ABP-.NET-Conference-2023-Wrap-Up). |
|||
|
|||
### Volosoft Attendeed & Sponsored Devnot .NET Conference 2023 |
|||
|
|||
 |
|||
|
|||
We are thrilled to announce that the Volosoft Company proudly attended as one of the Gold Sponsors at the Devnot .NET Conference 2023! We are happy to join and be a sponsor of events and contribute to the software society, empowering developers and driving innovation with the .NET community. |
|||
|
|||
 |
|||
|
|||
Co-Founder of [Volosoft](https://volosoft.com/) and Lead Developer of the ABP Framework, [Halil Ibrahim Kalkan](https://twitter.com/hibrahimkalkan) gave a word about "Dealing with Concurrency and Multi Threading in .NET" at this event. |
|||
|
|||
> You can check [this blog post](https://volosoft.com/blog/Reflecting-on-Devnot-Dotnet-Conference-2023) if you want to learn more about the Devnot .NET Conference 2023. |
|||
|
|||
### New ABP Community Posts |
|||
|
|||
There are exciting articles contributed by the ABP community as always. I will highlight some of them here: |
|||
|
|||
* [Authority Delegation in ABP Commercial](https://community.abp.io/posts/authority-delegation-in-abp-commercial-3wtljpp0) by [Liang Shiwei](https://github.com/realLiangshiwei) |
|||
* [What's new in Angular 16? New Features and Updates](https://community.abp.io/posts/whats-new-in-angular-16-new-features-and-updates-s1izi9br) by [Masum Ulu](https://twitter.com/masumulu) |
|||
* [Kubernetes Integrated Microservice Development with ABP Studio](https://community.abp.io/videos/kubernetes-integrated-microservice-development-with-abp-studio-oix9zkp8) by [Halil Ibrahim Kalkan](https://twitter.com/hibrahimkalkan) |
|||
|
|||
Thanks to the ABP Community for all the content they have published. You can also [post your ABP-related (text or video) content](https://community.abp.io/articles/submit) to the ABP Community. |
|||
|
|||
### New ABP Blog Posts |
|||
|
|||
There are also some exciting blog posts written by the ABP team. You can see the following list for some of those articles: |
|||
|
|||
* [ABP .NET Conference 2023 Wrap Up](https://blog.abp.io/abp/ABP-.NET-Conference-2023-Wrap-Up) by [Bige Beşikçi](https://twitter.com/bigedediki) |
|||
* [Meet Volosoft at the Devnot .NET Conference 2023!](https://volosoft.com/blog/Meet-Volosoft-at-the-Devnot-.NET-Conference-2023) by [Roo Xu](https://github.com/Roo1227) |
|||
|
|||
## Conclusion |
|||
|
|||
This version comes with some new features and a lot of enhancements to the existing features. You can see the [Road Map](https://docs.abp.io/en/abp/7.3/Road-Map) documentation to learn about the release schedule and planned features for the next releases. Please try ABP v7.3 RC and provide feedback to help us release a more stable version. |
|||
|
|||
Thanks for being a part of this community! |
|||
|
After Width: | Height: | Size: 742 KiB |
|
After Width: | Height: | Size: 45 KiB |
|
After Width: | Height: | Size: 234 KiB |
|
After Width: | Height: | Size: 2.8 MiB |
|
After Width: | Height: | Size: 72 KiB |
|
After Width: | Height: | Size: 691 KiB |
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 69 KiB |
|
After Width: | Height: | Size: 55 KiB |
|
After Width: | Height: | Size: 80 KiB |
@ -0,0 +1,293 @@ |
|||
# Image Compression and Resize with ABP Framework |
|||
|
|||
## Introduction |
|||
|
|||
In this article, I will show how to compress and resize images easily with the ABP Framework's new [Image Manipulation System](https://docs.abp.io/en/abp/7.3/Image-Manipulation), which is introduced in v7.3.0. |
|||
|
|||
ABP Framework provides services to compress and resize images and implements these services with popular [ImageSharp](https://sixlabors.com/products/imagesharp/) and [Magick.NET](https://github.com/dlemstra/Magick.NET) libraries. Currently, only these two providers are officially supported by the ABP Framework but thanks to the system being designed extensible, you can implement your own image resizer/compressor and use it in your application. |
|||
|
|||
> Refer to the documentation for more info: [Image Manipulation](https://docs.abp.io/en/abp/7.3/Image-Manipulation) |
|||
|
|||
### Source Code |
|||
|
|||
You can find the source code of the application at [https://github.com/abpframework/abp-samples/tree/master/ImageManipulation](https://github.com/abpframework/abp-samples/tree/master/ImageManipulation). Don't hesitate to check the source code, if you are stuck on any point. |
|||
|
|||
## Demo: Image Compression and Resize |
|||
|
|||
The best way to see what ABP's Image Manipulation System is capable of is to see it in action. Thus, we can create a simple application that basically allows us to upload, search and display images. |
|||
|
|||
### Creating a New ABP Solution |
|||
|
|||
> I have created an ABP solution and you can find the [full source code of the demo application here](https://github.com/abpframework/abp-samples/tree/master/ImageManipulation). If you want to create the same solution from scratch, you can apply the following steps: |
|||
|
|||
Install the ABP CLI, if you haven't installed it before: |
|||
|
|||
```bash |
|||
dotnet tool install -g Volo.Abp.Cli |
|||
``` |
|||
|
|||
Create a new solution with the ABP Framework's Application Startup Template with MVC UI and EF Core database (default options): |
|||
|
|||
```bash |
|||
abp new ImageManipulationDemo -t app --version 7.3.0-rc.2 |
|||
``` |
|||
|
|||
> As I have mentioned above, ABP introduced the Image Manipulation System in v7.3.0. So, ensure your application is v7.3.0 or higher. |
|||
|
|||
After creating the application, let's create the database and seed the initial data by running the `*.DbMigrator` project. Also, you can run the application to see if it's working as expected. |
|||
|
|||
### Configuring the BLOB Storing System |
|||
|
|||
Since we are creating an image upload application, we need to store our images somewhere and read these image contents when it's needed. [BLOB Storing System](https://docs.abp.io/en/abp/latest/Blob-Storing) is a great solution to achieve this. Let's install & configure the BLOB Storing System into our application. |
|||
|
|||
First, run the following command under the directory of your `*.HttpApi` project: |
|||
|
|||
```bash |
|||
abp add-package Volo.Abp.BlobStoring |
|||
``` |
|||
|
|||
Then, we need to select and configure a storage provider to tell the BLOB Storing System where to store the file contents. There are [multiple providers](https://docs.abp.io/en/abp/latest/Blob-Storing#blob-storage-providers) that we can choose. For the simplicity of the demo, let's continue with the **database provider** and run the following command under the directory of your solution (`*.sln`): |
|||
|
|||
```bash |
|||
abp add-module Volo.Abp.BlobStoring.Database |
|||
``` |
|||
|
|||
* This command adds all the NuGet packages to the corresponding layers of your solution. |
|||
* Also, it makes the necessary configurations, adds a new database migration, and updates the database. |
|||
* Since we are not configuring the connection string, the BLOB Storing system will use the default connection string in our application. |
|||
|
|||
That's it. We have installed and configured the BLOB Storing System in our application. |
|||
|
|||
### Configuring the Image Manipulation System |
|||
|
|||
After, configuring the BLOB Storing System, now we can install and configure the Image Manipulation System to be able to compress and resize images. |
|||
|
|||
ABP Framework provides two image resizer/compressor implementations out of the box: [ImageSharp](https://docs.abp.io/en/abp/7.3/Image-Manipulation#imagesharp-provider) and [Magick.NET](https://docs.abp.io/en/abp/7.3/Image-Manipulation#magick-net-provider). |
|||
|
|||
We can use the `Volo.Abp.Imaging.ImageSharp` as the provider for our application. To install the package, run the following command under the `*.HttpApi` project: |
|||
|
|||
```bash |
|||
abp add-package Volo.Abp.Imaging.ImageSharp |
|||
``` |
|||
|
|||
* This package will provide the required services to compress and resize images. |
|||
* You can [configure the `ImageSharpCompressOptions`](https://docs.abp.io/en/abp/7.3/Image-Manipulation#configuration-1) to define *DefaultQuality* and encoders. |
|||
|
|||
|
|||
After installing the provider, now we can use the services to compress and resize our images, such as `IImageCompression` and `IImageResizer`. But there is an easier way. The `Volo.Abp.Imaging.AspNetCore` NuGet package defines some attributes for controller actions that can automatically compress and/or resize the uploaded files. |
|||
|
|||
To be able to use these attributes, we need to install the `Volo.Abp.Imaging.AspNetCore` package. Type the following command under the `*.HttpApi` project: |
|||
|
|||
```bash |
|||
abp add-package Volo.Abp.Imaging.AspNetCore |
|||
``` |
|||
|
|||
This package provides two attributes: `[CompressImage]` and `[ResizeImage]`. Whenever we use these attributes, the Image Manipulation System will automatically compress and/or resize uploaded files. |
|||
|
|||
### Image Upload (with Compress & Resize) |
|||
|
|||
After all the required package installations and configurations are done, now we can start implementing the API and UI for the Image Upload. |
|||
|
|||
Let's start with creating the API. Create a controller in the `*.HttpApi` project named `ImageController` and perform the image upload and image display operations: |
|||
|
|||
```csharp |
|||
using Microsoft.AspNetCore.Http; |
|||
using Microsoft.AspNetCore.Mvc; |
|||
using System.Threading.Tasks; |
|||
using Volo.Abp.BlobStoring; |
|||
using Volo.Abp.Imaging; |
|||
|
|||
namespace ImageManipulationDemo.Controllers |
|||
{ |
|||
[Controller] |
|||
[Route("api/image")] |
|||
public class ImageController : ImageManipulationDemoController |
|||
{ |
|||
private readonly IBlobContainer<ImageManipulationContainer> _blobContainer; |
|||
|
|||
public ImageController(IBlobContainer<ImageManipulationContainer> blobContainer) |
|||
{ |
|||
_blobContainer = blobContainer; |
|||
} |
|||
|
|||
[HttpPost("upload")] |
|||
[CompressImage] |
|||
[ResizeImage(width: 200, height: 200)] |
|||
public async Task<IActionResult> UploadAsync(IFormFile file) |
|||
{ |
|||
var fileBytes = await file.GetAllBytesAsync(); |
|||
var blobName = file.FileName; |
|||
|
|||
await _blobContainer.SaveAsync(blobName, fileBytes, overrideExisting: true); |
|||
|
|||
return Ok(); |
|||
} |
|||
|
|||
[HttpGet("")] |
|||
public async Task<byte[]> GetImageAsync(string fileName) |
|||
{ |
|||
return await _blobContainer.GetAllBytesAsync(fileName); |
|||
} |
|||
} |
|||
} |
|||
``` |
|||
|
|||
* Here, we have used both `CompressImage` and `ResizeImage` attributes to automatically compress & resize the uploaded file. |
|||
* As you can see, we used the `IBlobContainer<TContainer>` service to save our file content. |
|||
* Since we are using the *database provider* as BLOB storing provider, the file contents will be added to our database and then we will be able to fetch them whenever it's needed like we have done in the `GetImageAsync` method above. |
|||
* We simply used the required attributes (and they do the rest on behalf of us and call the related image resize and compress services) to resize & compress images and save the new resized/compressed image into the database. |
|||
|
|||
Before implementing the UI side, as you may notice, we've injected the `IBlobContainer` as a typed service (`IBlobContainer<ImageManipulationContainer>`). A typed BLOB container system is a way of creating and managing multiple containers in an application. We haven't created the `ImageManipulationContainer` class yet. |
|||
|
|||
Let's create this class as below: |
|||
|
|||
```csharp |
|||
using Volo.Abp.BlobStoring; |
|||
|
|||
namespace ImageManipulationDemo |
|||
{ |
|||
[BlobContainerName("image-manipulation-demo")] |
|||
public class ImageManipulationContainer |
|||
{ |
|||
} |
|||
} |
|||
``` |
|||
|
|||
* We have used the `BlobContainerName` attribute to define the name of the container. |
|||
* If we haven't used the `BlobContainerName` attribute, ABP Framework uses the full name of the class with its namespace. |
|||
|
|||
We have implemented the endpoints and now can start implementing the UI side. You can see the following figure to see what we are going to design for the image upload page: |
|||
|
|||
 |
|||
|
|||
Let's start designing this page. Open the `Index.cshtml` file (*/Pages/Index.cshtml*) under the `*.Web` project and replace it with the following content: |
|||
|
|||
```html |
|||
@page |
|||
@using Microsoft.AspNetCore.Mvc.Localization |
|||
@using ImageManipulationDemo.Localization |
|||
@using Volo.Abp.Users |
|||
@model ImageManipulationDemo.Web.Pages.IndexModel |
|||
@inject IHtmlLocalizer<ImageManipulationDemoResource> L |
|||
@inject ICurrentUser CurrentUser |
|||
@section styles { |
|||
<abp-style src="/Pages/Index.css" /> |
|||
} |
|||
@section scripts { |
|||
<abp-script src="/Pages/Index.js" /> |
|||
} |
|||
|
|||
<div class="container"> |
|||
<div class="row"> |
|||
<div class="col"> |
|||
<div class="card"> |
|||
<div class="card-body"> |
|||
<form method="post" id="upload-image" enctype="multipart/form-data"> |
|||
<div class="mb-3"> |
|||
<label for="formFile" class="form-label">Upload an image</label> |
|||
<input class="form-control" type="file" id="formFile" required/> |
|||
</div> |
|||
|
|||
<div class="mb-3"> |
|||
<button type="submit" class="btn btn-primary d-block w-100">Submit</button> |
|||
</div> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col"> |
|||
<div class="card"> |
|||
<div class="card-title"> |
|||
</div> |
|||
<div class="card-body"> |
|||
<h5 class="card-title my-2">Search & Display Images</h5> |
|||
|
|||
<form method="get" id="search-image"> |
|||
<div class="input-group mb-3"> |
|||
<input id="img-search-input" type="text" class="form-control" placeholder="Search with image name... E.g. image.png" aria-label="Search with image name" aria-describedby="button-search" required> |
|||
<button class="btn btn-outline-secondary" type="submit" id="button-search">Search</button> |
|||
</div> |
|||
</form> |
|||
|
|||
<div class="d-none" id="image-result"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
``` |
|||
|
|||
Then, open the `index.js` file and replace it with the following content: |
|||
|
|||
```js |
|||
$(function () { |
|||
|
|||
$("#upload-image").submit(function (e) { |
|||
e.preventDefault(); |
|||
|
|||
var file = document.getElementById("formFile").files[0]; |
|||
var formData = new FormData(); |
|||
formData.append("file", file); |
|||
|
|||
$.ajax( |
|||
{ |
|||
url: "/api/image/upload", |
|||
data: formData, |
|||
processData: false, |
|||
contentType: false, |
|||
type: "POST", |
|||
success: function (data) { |
|||
abp.message.success("Image saved successfully!"); |
|||
}, |
|||
error: function (err) { |
|||
abp.message.error("An error occured while saving the image."); |
|||
} |
|||
} |
|||
); |
|||
}); |
|||
|
|||
$("#search-image").submit(function (e) { |
|||
e.preventDefault(); |
|||
|
|||
var imgResult = $("#image-result"); |
|||
imgResult.removeClass("d-none"); |
|||
|
|||
imgResult.html("<p>Loading...</p>"); |
|||
|
|||
var fileName = $("#img-search-input").val(); |
|||
|
|||
imageManipulationDemo.controllers.image.getImage(fileName) |
|||
.then(function (imageFile) { |
|||
var src = "data:image/png;base64," + imageFile; |
|||
var img = "<img src='" + src + "' />"; |
|||
|
|||
imgResult.html(img); |
|||
}) |
|||
.catch(function (err) { |
|||
imgResult.html("<p>Could not find the image...</p>"); |
|||
}); |
|||
}); |
|||
}); |
|||
``` |
|||
|
|||
Now, we can run the application and see the Image Manipulation System in action: |
|||
|
|||
 |
|||
|
|||
The results are impressive for the example above: |
|||
|
|||
* The original image was 12 KB and now the compressed & resized image has been reduced to 8 KB. |
|||
* The original image was 225x225 and now resized as 200x200. |
|||
|
|||
## Conclusion |
|||
|
|||
In this article, I have shown you how to compress and/or resize images with ABP Framework's Image Manipulation System by just defining some attributes to the top of the controller actions. |
|||
|
|||
Also, I have shown that you can use the BLOB Storing System to store file contents and compress/resize images before saving them into BLOB Storages thanks to the image resizers/compressors provided by ABP Framework. |
|||
|
|||
## See Also |
|||
|
|||
* [BLOB Storing](https://docs.abp.io/en/abp/latest/Blob-Storing) |
|||
* [Image Manipulation](https://docs.abp.io/en/abp/7.3/Image-Manipulation#iimageresizer) |
|||
|
After Width: | Height: | Size: 625 KiB |
|
After Width: | Height: | Size: 22 KiB |
@ -0,0 +1,8 @@ |
|||
# ABP Version 7.4 Migration Guide |
|||
|
|||
This document is a guide for upgrading ABP v7.3 solutions to ABP v7.4. There are a few changes in this version that may affect your applications, please read it carefully and apply the necessary changes to your application. |
|||
|
|||
## TemplateDefinition |
|||
|
|||
The `LocalizationResource(Type)` of `TemplateDefinition` class is changed to `LocalizationResourceName(string)`. |
|||
|
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue