Limit file size upload in JavaScript

Question

I am trying to limit the size on file when user is uploading. I am new to JavaScript so any help is welcome.This is what i am trying :

<input type="file" id="input_file" name="input_file" required maxlength="40" onchange="checkFileSize(this)" data-max_size="1048576" title="bla bla"

function checkFileSize(elem) {
var fsize = elem.files[0].size;
var fname = elem.files[0].name.length;
if (fsize > elem.getAttribute("data-max_size") || fname > elem.getAttribute("maxlength")) {
    elem.setCustomValidity(elem.getAttribute("title"));
} else {

    elem.setCustomValidity("");
}

}

When user uploads a file bigger than 1mb or there are more thn 40 characters in file name it doesnt fire title(bla bla), nothing happens. What i am doing wrong ?

They are taking proper values, problem is not there, when i debug with bigger files it enters the if (fsize > elem.getAttribute("data-max_size") .. — Andrej
– Andrej, Commented Feb 25, 2016 at 13:29

Sotiris Kiritsis · Accepted Answer · 2016-02-25 13:44:55Z

2

You can use the File API.

Here is a working jsfiddle example. Code sample for validation:

function showFileSize() {
    var input, file;

    // (Can't use `typeof FileReader === "function"` because apparently
    // it comes back as "object" on some browsers. So just see if it's there
    // at all.)
    if (!window.FileReader) {
        bodyAppend("p", "The file API isn't supported on this browser yet.");
        return;
    }

    input = document.getElementById('fileinput');
    if (!input) {
        bodyAppend("p", "Um, couldn't find the fileinput element.");
    }
    else if (!input.files) {
        bodyAppend("p", "This browser doesn't seem to support the `files` property of file inputs.");
    }
    else if (!input.files[0]) {
        bodyAppend("p", "Please select a file before clicking 'Load'");
    }
    else {
        file = input.files[0];
        // YOUR VALIDATION HERE USING file.size
        bodyAppend("p", "File " + file.name + " is " + file.size + " bytes in size");
    }
}

Keep in mind though, that client-side validation exists just to inform/guide the user and you should never rely on it for storing files in your server.

edited Feb 25, 2016 at 13:44

answered Feb 25, 2016 at 13:11

Sotiris Kiritsis

3,3563 gold badges25 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andrej Over a year ago

Thank you ,i will try the code, so i will need to do a server side validation also ?

Sotiris Kiritsis Over a year ago

@Andrei Yes, you definitely should.

dsdsdsdsd Over a year ago

you ABSOLUTELY should ... not doing server side file validation is as big of a vulnerability as you can have

Conor Cussell · Accepted Answer · 2016-02-25 13:15:43Z

1

I have put your code into JSBin - https://jsbin.com/rufigug/edit?html,js,console,output - it appears to be firing the correct IF block for me, perhaps you could console.log fname + fsize and check if your file does actually satisfy the conditions?

There is some good documentation for this on MDN https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Limiting_the_size_of_a_file_before_its_upload

answered Feb 25, 2016 at 13:15

Conor Cussell

1611 silver badge5 bronze badges

2 Comments

Andrej Over a year ago

Thanks, yes they are taking proper values and enters the correct if , but afterwards nothing happens.

Conor Cussell Over a year ago

Oh, in which case setCustomValidity() just sets the message to be shown when you attempt to submit the form. I've updated the jsbin to show - if you try and submit the form - it will show the message jsbin.com/rufigug/edit?html,js,console,output

Nadir · Accepted Answer · 2016-02-25 13:06:08Z

0

You are using the event onchange . According to http://www.w3schools.com/jsref/event_onchange.asp, it is only for <select>.

Change onselect for oninput

answered Feb 25, 2016 at 13:06

Nadir

1,81913 silver badges20 bronze badges

1 Comment

Rob Scott Over a year ago

This is incorrect by the way. "Supported HTML tags:

<input type="checkbox">, <input type="color">, <input type="date">, <input type="datetime">, <input type="email">, <input type="file">, <input type="month">, <input type="number">, <input type="password">, <input type="radio">, <input type="range">, <input type="search">, <input type="tel">, <input type="text">, <input type="time">, <input type="url">, <input type="week">, <keygen>, <select> and <textarea>

Collectives™ on Stack Overflow

Limit file size upload in JavaScript

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related