We will use a normal MVC application to work with this demo. We will use Microsoft System.IO.Compression, System.IO.Compression.FileSystem namespaces and the classes, for example, ZipArchive, in the namespace for extracting or unzipping the files we upload. Once they are uploaded we will check the same by looping through it. For the client side coding, wewill use jQuery. I guess this is enough for the introduction, now we will move on to our application. Let us create it. I hope you will like this article.
You can always download the source code here:
Background
As you are aware that most websites accept only .zip or any other zipped formats? This is for ensuring that only the least amount of data is being uploaded to the server. We can reduce almost 60 percent of the size if we zip the same. Now the problem is, how you can validate any zipped item which is uploaded to your site? How can you check for any particular file in that zipped item, for example, if you need to find out any files withthe extension of .sql, .ico or .txt? What if you want to inform the user that the uploaded items do not have any particular file that must be needed? You need to loop through the contents available in it, right? This is what we are going to discuss in this post. I had a situation of uploading my old back ups of my personal website and after uploading I wanted to check whether the uploaded .zip file has .ico file in it. The process we are going to do is listed below.
- Create a MVC application
- Install jQuery
- Create Controller and View
- Upload Action Using jQuery
- Add System.IO.Compression, System.IO.Compression.FileSystem references
- Checks for the file using ZipArchive class
Using the code
Now we will move into the coding part. I hope your MVC application is ready for action with all the needed packages.
Create a controller
Now we will create a controller, view with an action in it as follows.
- public ActionResult Index()
- {
- return View();
- }
Update the view
Now in the view, we will add a file upload and other needed elements.
- <input type="file" name="FileUpload1" id="fileUpload" placeholder="Please select the file" /><br />
- <input id="btnUploadFile" type="button" value="Upload File" />
- <div id="message"></div>
Add the JS references
Add the references as follows.
- <script src="~/scripts/jquery-1.10.2.min.js"></script>
- <script src="~/scripts/MyScript.js"></script>
Here MyScript.js is where we are going to write some scripts.
Style the elements (Optional)
You can style your view as follows. This step is absolutely optional, for me the view should not be as simple as default one. And to be frank I am not a good designer.
- <style>
- #fileUpload
- {
- border: 1px solid #ccc;
- padding: 10px;
- border-radius: 5px;
- font-size: 14px;
- font-family: cursive;
- color: blue;
- }
- #btnUploadFile
- {
- border: 1px solid #ccc;
- padding: 10px;
- border-radius: 5px;
- font-size: 14px;
- font-family: cursive;
- color: blue;
- }
- #message
- {
- border-radius: 5px;
- font-size: 14px;
- font-family: cursive;
- color: blue;
- margin-top: 15px;
- }
- h2 {
- border-radius: 5px;
- font-size: 20px;
- font-family: cursive;
- color: blue;
- margin-top: 15px;
- }
- </style>
Add the upload action in script
Now it is time to create upload action. For that, please go to the script file MyScript.js and do the coding as follows.
- $(document).ready(function()
- {
- $('#btnUploadFile').on('click', function()
- {
- var data = new FormData();
- var files = $("#fileUpload").get(0).files;
- // Add the uploaded image content to the form data collection
- if (files.length > 0)
- {
- data.append("UploadedImage", files[0]);
- }
- // Make Ajax request with the contentType = false, and procesDate = false
- var ajaxRequest = $.ajax
- ({
- type: "POST",
- url: "Home/Upload",
- contentType: false,
- processData: false,
- data: data,
- success: function(data)
- {
- $('#message').html(data);
- },
- error: function(e)
- {
- console.log('Oops, Something went wrong!.' + e.message);
- }
- });
- ajaxRequest.done(function(xhr, textStatus)
- {
- // Do other operation
- });
- });
- });





Sibeesh VenuPosted Feb 26, 2016, 6:16 AM
Shubham Kumar Thanks a lot
Sibeesh VenuPosted Feb 26, 2016, 6:15 AM
Rajeev Punhani Thanks a lot
Shubham KumarPosted Feb 26, 2016, 5:40 AM
nice one sir
Rajeev PunhaniPosted Feb 25, 2016, 8:54 PM
Nice
Sibeesh VenuPosted Feb 25, 2016, 10:50 AM
Debasis Saha Thank you
Debasis SahaPosted Feb 25, 2016, 9:25 AM
Nice one..
Sibeesh VenuPosted Feb 25, 2016, 4:48 AM
Pramod Thakur Thanks much
Pramod ThakurPosted Feb 25, 2016, 2:58 AM
nice share Sibeesh Venu...
Sibeesh VenuPosted Feb 25, 2016, 12:27 AM
Raja T Thanks a lot
Sibeesh VenuPosted Feb 25, 2016, 12:27 AM
Humayun Kabir Mamun Thanks a lot
Sibeesh VenuPosted Feb 25, 2016, 12:27 AM
Mohammed Ibrahim Thanks a lot
Raja TPosted Feb 24, 2016, 11:04 PM
Good.Thanks for sharing
Humayun Kabir MamunPosted Feb 24, 2016, 11:00 PM
Nice...
Mohammed IbrahimPosted Feb 24, 2016, 3:56 PM
nice