Download Files In Zip Format Using ASP.NET MVC Razor And SweetAlert Library

Notice that GetFiles() returns the full path and file name for all the files. While adding these files to the generic List, we pick only the file name. This is done using the GetFileName() method of Path class. The List is then passed to the Index View as its model.

Next, add another action - ProcessForm() - to the HomeController. The ProcessForm() action does the job of creating the zip file. The classes such as ZipArchieve and ZipFile come from System.IO.Compression namespace and hence you need to add a reference to System.IO.Compression.dll and System.IO.Compression.FileSystem.dll assemblies.

The ProcessForm() action receives a List of strings. This list is nothing but a list of values of the checkboxes displayed on the page. The ASP.NET MVC model binding framework is intelligent enough to fill in this list for us.

The code checks whether a file named Bundle.zip already exists on the Server. If so, the file is deleted. Bundle.zip is the file that gets dynamically created in the next steps. If you wish, you can generate this name dynamically also.

Then, Open() method of ZipFile class is used to create Bundle.zip file inside the ZipFiles folder. The return value of Open() method is ZipArchive object. Then, a For Each loop iterates through the selectedfiles List. For every selected file its full path is formed using the MapPath() method and is fed to the CreateEntryFromFile() method of the ZipArchive object.

Once all the files are added to Bundle.zip, the file is returned using the File() method. The File() method takes three parameters, the full path of the file to sent to the client browser, the MIME content type of the file, and the file name to be displayed in the browser's download dialog.

Then, we add two folders namely Images and ZipFiles under the project root folder. The Images folder contains the source files and the ZipFiles folder contains the zip files. Also, add a few image files to the Images folder. We're using image files purely for the sake of simplicity. You can use any file types instead of image files like pdf , word , excel etc.

The zip file is downloaded with name "Satya.zip" inside ProcessForm action result method. But the file name will be found with name bundle.zip inside zipfiles folder.

Step 3

Create a View named "Index.cshtml".

Code Ref

Code Description

The Index View simply iterates through the list of files sent from Controller and displays a table. The BeginForm() helper posts the form to the ProcessForm() action.

Notice how the checkboxes are displayed. All the checkboxes have the same name - selectedfiles - and this name must match with the parameter of ProcessForm() action. The value attribute of the checkboxes is set to the name of the file.

I have added a table inside div tag, put checkbox, and uploaded file name display and button.

I created a script file to validate if the checkbox is selected or not, and the Sweet Alert popup will be shown to the end user.

Then, I added the function "validateData()" inside button's onclick event.

OUTPUT

Desktop View

WIth no file selection for download.



With any file selection for download.



Then, download the zip file path.



Mobile View



Summary

We learned:

1. How to download the uploaded files in zip format.
2. How to validate if the checkboxes are checked or not, using MVC.
3. The message to be shown to the end user using Sweet Alert library.