All about file upload control in web application

We upload any type of files from client to server using html element

1 <input id='myFile' type="file" />
Code language: HTML, XML (xml)

And using ASP.NET control

1
 <asp:FileUpload ID='myFile' runat="server" />
Code language: HTML, XML (xml)

We can restrict to upload only some types of file using specifying the accept attribute value to file content type like bellow

1 <input id='myFile' type="file" accept="image/gif, image/jpeg, image/png" /> 
2 <asp:FileUpload ID='myFile' runat="server" accept="image/gif, image/jpeg, image/png" />Code language: HTML, XML (xml)

File Type Validation for file uploading

Client side validation

1 <script type="text/javascript">
2  var allowFileTypes = ['image/gif', 'image/jpeg', 'image/png'];
3  function validateFileTypes() {
4     var files = document.getElementById("myFile").files;
5     if (files && files[0]) {
6        //alert(files[0].type);
7 if (allowFileTypes.indexOf(files[0].type) != -1)
8          return true;
9       else {
10          alert('file type isn’t allowed');
11         return false;
12     }
13  }
14 }
15 </script>Code language: HTML, XML (xml)

And in server side validation (C#)

1 if (myFile.HasFile)
2    {
3      if (myFile.PostedFile.ContentType.ToLower().Contains("image") == false
4          {
5             //message to user
6              return;
7           }
8 }Code language: JavaScript (javascript)

File Size Validation for file uploading

Client side validation

1 <script type="text/javascript">
2  var allowFileSize = 50*1024; //50KB
3  function validateFileSize() {
4     var files = document.getElementById("myFile").files;
5     if (files && files[0]) {
6        //alert(files[0].size);
7 if (files[0].size <= allowFileSize)
8          return true;
9       else {
10          alert('file size exceeds the max size 50KB');
11          return false;
12    }
13  }
14 }
15 </script>Code language: HTML, XML (xml)

And in server side validation (C#)

1 if (myFile.HasFile)
2    {
3      if (myFile.PostedFile.ContentLength > 50*1024)
4          {
5            //message to user
6             return;
7           }
8 }Code language: JavaScript (javascript)

Showing the selected image file as preview

We need to add an attribute on change to the element like bellow

1 <input id='myFile' type="file" accept="image/gif, image/jpeg, image/png" onchange="return showPreview(this);"  />
2 <asp:FileUpload ID='myFile' runat="server" accept="image/gif, image/jpeg, image/png" onchange="return showPreview(this);"  />
Code language: HTML, XML (xml)

And the function is bellow

1 function showPreview(input) {
2            if (input.files && input.files[0]) {
3                var reader = new FileReader();
4                reader.onload = function (e) {
5               document.getElementById("img#preview").src = e.target.result;
6                };
7                reader.readAsDataURL(input.files[0]);
8            }
9            return true;
10 }Code language: JavaScript (javascript)

For more about styling the file uploader, see the link
http://www.quirksmode.org/dom/inputfile.html

Ref: http://hrn2k1.blogspot.com/2015/11/all-about-file-upload-control-in-web.html

Feel free to leave any comments for clarification, changes, or improvements. Also, you can contact with iXora Solution expert teams for any consultation or coordination from here.