Upload archive to ASP.NET web application

Scenario

This article demonstrates how to use Aspose libraries for archive decompression and image processing in an ASP.NET web application. In this example, a site visitor uploads a ZIP archive containing images to the web application, which rotates all the images by a specified angle. The rotated images are then displayed on the same web page in response.

Prepare ASP.NET Web Application

Use Visual Studio to create a simple ASP.NET Core Web Application with Razor Pages. Add references to two NuGet packages:

• Aspose.Zip for archive decompression
• Aspose.Imaging for image processing

Locate the Index.cshtml page in Solution Explorer. Add a form with the enctype="multipart/form-data" attribute to allow file uploads to the server. Next, add two input fields: one with type file for the uploaded archive, and another with type number to specify the rotation angle. Below is the complete HTML markup for the form:

<form method="post" enctype="multipart/form-data">
    <span>Images archive: </span><input type="file" name="uploadedFile" required="required" />
    <br />
    <span>Rotation angle: </span><input type="number" value="30" min="0" max="360" name="rotateDegree" required="required" />
    <br />
    <input type="submit" value="Upload" />
</form>

Validation attributes have been added to ensure correct input.

Handling user request

When the user uploads a ZIP archive and submits the form, you need to handle the request on the server side. In ASP.NET, implement the appropriate OnPost method in the Index.cshtml.cs file. In this method, extract the ZIP archive using the relevant constructor, then rotate each image. Here is a draft of the method:

public void OnPost(IFormFile uploadedFile, int rotateDegree) {
    using (Archive archive = new Archive(uploadedFile.OpenReadStream())) {
        foreach (ArchiveEntry entry in archive.Entries) {
		   // Extract image and rotate it.
		}
    }
}

Rotate images

Use the Aspose.Imaging library to rotate images by a specific angle, following this instruction. Here is a code snippet for image rotation:

    using (MemoryStream rotated = new MemoryStream())
    {
        using (RasterImage image = (RasterImage)Image.Load(extracted))
        {
            // Before rotation, the image should be cached for better performance
            if (!image.IsCached)
                image.CacheData();
                    
            image.Rotate(rotateDegree, true, Color.CornflowerBlue);
            image.Save(rotated);
        }                          
    }

Page Model and Image Rendering

Store the bytes of processed images in the page model to render them later. Add the following property public List<byte[]> ImageBytes { get; private set; } to the IndexModel class. Fill this list with the processed image bytes. To display the images on the web page, use the data URI by converting image bytes to base64 strings. Here is the Razor markup to render images in Index.cshtml

@{
if (Model.ImageBytes != null && Model.ImageBytes.Count > 0) {
        <h4>Rotated images:</h4>
        foreach (byte[] image in Model.ImageBytes) {
            <img src="data:image;base64,@Convert.ToBase64String(image)" width="150"/>
        }
    }
}

Finishing response

Putting it all together: each entry in the archive is decompressed, the image is created from the extracted bytes, and it is then rotated. This sample does not include file validation. In a real-world application, you should verify the uploaded archive and its contents for security and correctness.

Below is the complete OnPost method:

    public void OnPost(IFormFile uploadedFile, int rotateDegree)
    {
        ImageBytes = new List<byte[]>();

        using (Archive archive = new Archive(uploadedFile.OpenReadStream()))
        {
            foreach (ArchiveEntry entry in archive.Entries)
            {
                if (entry.IsDirectory)
                    continue;

                using (MemoryStream extracted = new MemoryStream())
                {
                    entry.Open().CopyTo(extracted);
                    extracted.Seek(0, SeekOrigin.Begin);
                    using (MemoryStream rotated = new MemoryStream())
                    {
                        using (RasterImage image = (RasterImage)Image.Load(extracted))
                        {
                            if (!image.IsCached)  // Before rotation, the image should be cached for better performance
                                image.CacheData();

                            image.Rotate(rotateDegree, true, Color.CornflowerBlue);
                            image.Save(rotated);
                        }
                        
                        this.ImageBytes.Add(rotated.ToArray());
                    }
                }
            }
        }
    }