Limit the Size of a File Upload (Html Input Element)

Limit the size of a file upload (html input element)

This is completely possible. Use Javascript.

I use jQuery to select the input element. I have it set up with an onChange event.

$("#aFile_upload").on("change", function (e) {

    var count=1;
    var files = e.currentTarget.files; // puts all files into an array

    // call them as such; files[0].size will get you the file size of the 0th file
    for (var x in files) {
    
        var filesize = ((files[x].size/1024)/1024).toFixed(4); // MB
    
        if (files[x].name != "item" && typeof files[x].name != "undefined" && filesize <= 10) { 

            if (count > 1) {
                
                approvedHTML += ", "+files[x].name;
            }
            else {
            
                approvedHTML += files[x].name;
            }

            count++;
        }
    }
    $("#approvedFiles").val(approvedHTML);

});

The code above saves all the file names that I deem worthy of persisting to the submission page before the submission actually happens. I add the "approved" files to an input element's val using jQuery so a form submit will send the names of the files I want to save. All the files will be submitted, however, now on the server-side, we do have to filter these out. I haven't written any code for that yet but use your imagination. I assume one can accomplish this by a for loop and matching the names sent over from the input field and matching them to the $_FILES (PHP Superglobal, sorry I don't know ruby file variable) variable.

My point is you can do checks for files before submission. I do this and then output it to the user before he/she submits the form, to let them know what they are uploading to my site. Anything that doesn't meet the criteria does not get displayed back to the user and therefore they should know, that the files that are too large won't be saved. This should work on all browsers because I'm not using the FormData object.

Is there a maximum size for a file upload through HTML form?

No, there is no size upload limit in Html input type "file"...

Following are the way if you want to check file uploaded size.

if (typeof FileReader !== "undefined") {
var Filesize = document.getElementById('fileId').files[0].size;}

There are several configuration parameters that can affect the file upload. These configuration parameters have to be setup right for the file uploads to work fine.

=> The folder in which the files are saved should be writable by the script. This is obvious but might be overlooked. The folder must be writable by the script means the web server user (usually www-data ) should have write access to the folder. So setup the folder permissions right. If you have shell access, the folder permissions can be updated using the 'chmod' command easily. If you don't have shell access, or if you have a shared hosting account, updating the folder permissions can be a little tricky. See if your hosting control panel has this feature.

=> The websever configuration The web server would have a configuration setting that (1) allows/disallows file uploads (2) sets a limit on the size of the file upload. Here are the typical settings you have to check (for PHP)

memory_limit
upload_max_filesize
post_max_size

Limit file format when using input type=file?

Strictly speaking, the answer is no. A developer cannot prevent a user from uploading files of any type or extension.

But still, the accept attribute of <input type = "file"> can help to provide a filter in the file select dialog box of the OS. For example,

<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox 42+) --> 
<input type="file" accept=".xls,.xlsx" />

Is it possible to validate the size and type of input=file in html5

I could do this (demo):

<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</head>
<body>
    <form >
        <input type="file" id="f" data-max-size="32154" />
        <input type="submit" />
    </form>
<script>
$(function(){
    $('form').submit(function(){
        var isOk = true;
        $('input[type=file][data-max-size]').each(function(){
            if(typeof this.files[0] !== 'undefined'){
                var maxSize = parseInt($(this).attr('max-size'),10),
                size = this.files[0].size;
                isOk = maxSize > size;
                return isOk;
            }
        });
        return isOk;
    });
});
</script>
</body>
</html>

How to limit the maximum files chosen when using multiple file input

You could run some jQuery client-side validation to check:

$(function(){
    $("input[type='submit']").click(function(){
        var $fileUpload = $("input[type='file']");
        if (parseInt($fileUpload.get(0).files.length)>2){
         alert("You can only upload a maximum of 2 files");
        }
    });    
});

http://jsfiddle.net/Curt/u4NuH/

But remember to check on the server side too as client-side validation can be bypassed quite easily.

Limit the Size of a File Upload (Html Input Element)