Total Pageviews

Monday 2 November 2015

All about file upload control in web application


We upload any type of files from client to server using html element
<input id='myFile' type="file" />

And using ASP.NET control 
 <asp:FileUpload ID='myFile' runat="server" />

We can restrict to upload only some types of file using specifying the accept attribute value to file content type like bellow
<input id='myFile' type="file" accept="image/gif, image/jpeg, image/png" />
<asp:FileUpload ID='myFile' runat="server" accept="image/gif, image/jpeg, image/png" />


File Type Validation
Client side validation
<script type="text/javascript">
  var allowFileTypes = ['image/gif', 'image/jpeg', 'image/png'];

  function validateFileTypes() {
     var files = document.getElementById("myFile").files;
     if (files && files[0]) {
        //alert(files[0].type);
if (allowFileTypes.indexOf(files[0].type) != -1)
          return true;
       else {
          alert('file type isn’t allowed');
          return false;
     }
  }
}
</script>

And in server side validation (C#)
if (myFile.HasFile)
    {
      if (myFile.PostedFile.ContentType.ToLower().Contains("image") == false)
          {
//message to user
              return;
           }
      else{
         //work with the file
         }
}
 File Size Validation
Client side validation
<script type="text/javascript">
  var allowFileSize = 50*1024; //50KB

  function validateFileSize() {
     var files = document.getElementById("myFile").files;
     if (files && files[0]) {
        //alert(files[0].size);
if (files[0].size <= allowFileSize)
          return true;
       else {
          alert('file size exceeds the max size 50KB');
          return false;
     }
  }
}
</script>

And in server side validation (C#)
if (myFile.HasFile)
    {
      if (myFile.PostedFile.ContentLength > 50*1024)
          {
//message to user
              return;
           }
       else{
         //work with the file
         }
}

Showing the selected image file as preview
We need to add an attribute onchange to the element like bellow
<input id='myFile' type="file" accept="image/gif, image/jpeg, image/png" onchange="return showPreview(this);"  />
<asp:FileUpload ID='myFile' runat="server" accept="image/gif, image/jpeg, image/png" onchange="return showPreview(this);"  />
And the function is bellow
function showPreview(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    document.getElementById("img#preview").src = e.target.result;
                };
                reader.readAsDataURL(input.files[0]);
            }
            return true;
 }
For more about styling the file uploader, see the link http://www.quirksmode.org/dom/inputfile.html

No comments:

Post a Comment