Validate File size before upload

Question

I need to validate the file which is to be uploaded to the server. The validation must be done before uploading it. i.e., validation completed at client side. This task should be accomplished in ASP.NET MVC3 Webpage. It should also work with all browsers. IE9,8,7/FF/Chrome. I came to know that IE doesn't have FileReader API.

My Question is, How to Validate file size before Uploading in a MVC3 Webpage.

Answer 1

.Net MVC Solution:

I am using the data type of HttpPostedFileBase

In your Views > Shared Folder, create a new folder called "EditorTemplates" and use this:

@model HttpPostedFileBase

@Html.TextBox("", null, new { type = "file" })

I then pass this HttpPostedFileBase object from the controller to a method that does the following:

 public Files Upload(HttpPostedFileBase files)
 {
    if (files.ContentLength > 0) {

    .....
 }

The ContentLength property on the HttpPostedFileBase class contains the number of bytes in the posted file

This will make it so you have a file uploading box available.

On the ASP.NET WebForms Solution:

<asp:FileUpload ID="fuPictures" runat="server" />

Make a button with a OnClick or OnCommand event that does something like this:

if (fuPictures.HasFile == true)
{
    int fileSize = fuPictures.FileBytes;
}

That will give you the file size. Hope this helps.

Answer 2

When it comes for a browser that supports HTML 5, it can be easily achieved with simple javascript:

Html Syntax

<input type="file" id="myFile" />

Javascript syntax

//gets the element by its id
var myFile = document.getElementById('myFile');

//binds to onchange event of the input field
myFile.addEventListener('change', function() {
  //this.files[0].size gets the size of your file.
  alert(this.files[0].size);

});

BUT, when it comes to an older browser (and we are all looking to you, Internet Explorer), the only way to do that on the client side is by using ActiveX:

var myFile = document.getElementById('myFile');

var myFSO = new ActiveXObject("Scripting.FileSystemObject");
var filepath = myfile.file.value;
var thefile = myFSO.getFile(filepath);
var size = thefile.size;
    alert(size + " bytes");

Answer 3

You can achieve by using jquery:

#

<span>
<b>Attachment</b> (8 MB only)<label id="attached" style="color:red; margin-left:5px"></label>
</span>
<input type="file" id="Attachment" name="Attachment" class="admin_textfeildmedium" value="" style="width:551px" accept="image/*">

#

jQuery(document).ready(function () {


jQuery('#Attachment').bind('change', function () {
                            //fileUpload = 0;
                            var iSize = (this.files[0].size / 1024);
                            if (iSize / 1024 > 1) {
                                if (((iSize / 1024) / 1024) > 1) {
                                    fileUpload = 0;
                                } else {
                                    iSize = (Math.round((iSize / 1024) * 100) / 100);
                                    if (iSize <= 8) {
                                        fileUpload = 1;
                                    } else {
                                        fileUpload = 0;
                                    }
                                }
                            } else {
                                fileUpload = 1;
                            }
                            if (fileUpload == 0) {
                               // alert("Your attachment exceeded 8MB.");
                                jQuery('#attached').html('Your attachment exceeded 8MB.');
                                jQuery('#Attachment').val('');
                            }

                        });

                    });