Limit the size of an file upload (html input)

I would like to simply limit the size of a file that a user can upload.

I thought maxlength = 20000 = 20k but that doesn't seem to work at all.

I am running on Rails, not PHP, but was thinking it'd be much simpler to do it client side in the HTML/CSS, or as a last resort using jQuery. This is so basic though that there must be some HTML tag I am missing or not aware of.

Looking to support IE7+, Chrome, FF3.6+. I suppose I could get away with just supporting IE8+ if necessary.

Thanks.

edited Dec 18 '17 at 23:59

Sagar Thatte

2017

asked Apr 18 '11 at 1:09

delphi

4,11231718

1

It is possible. Please refer this question.

– sandSK
Jun 16 '14 at 5:01

add a comment |

I would like to simply limit the size of a file that a user can upload.

I thought maxlength = 20000 = 20k but that doesn't seem to work at all.

Looking to support IE7+, Chrome, FF3.6+. I suppose I could get away with just supporting IE8+ if necessary.

Thanks.

edited Dec 18 '17 at 23:59

Sagar Thatte

2017

asked Apr 18 '11 at 1:09

delphi

4,11231718

1

It is possible. Please refer this question.

– sandSK
Jun 16 '14 at 5:01

add a comment |

I would like to simply limit the size of a file that a user can upload.

I thought maxlength = 20000 = 20k but that doesn't seem to work at all.

Looking to support IE7+, Chrome, FF3.6+. I suppose I could get away with just supporting IE8+ if necessary.

Thanks.

edited Dec 18 '17 at 23:59

Sagar Thatte

2017

asked Apr 18 '11 at 1:09

delphi

4,11231718

I would like to simply limit the size of a file that a user can upload.

I thought maxlength = 20000 = 20k but that doesn't seem to work at all.

Looking to support IE7+, Chrome, FF3.6+. I suppose I could get away with just supporting IE8+ if necessary.

Thanks.

html

edited Dec 18 '17 at 23:59

Sagar Thatte

2017

asked Apr 18 '11 at 1:09

delphi

4,11231718

edited Dec 18 '17 at 23:59

Sagar Thatte

2017

asked Apr 18 '11 at 1:09

delphi

4,11231718

edited Dec 18 '17 at 23:59

Sagar Thatte

2017

edited Dec 18 '17 at 23:59

Sagar Thatte

2017

edited Dec 18 '17 at 23:59

Sagar Thatte

2017

asked Apr 18 '11 at 1:09

delphi

4,11231718

asked Apr 18 '11 at 1:09

delphi

4,11231718

asked Apr 18 '11 at 1:09

delphi

4,11231718

1

It is possible. Please refer this question.

– sandSK
Jun 16 '14 at 5:01

add a comment |

1

It is possible. Please refer this question.

– sandSK
Jun 16 '14 at 5:01

It is possible. Please refer this question.

– sandSK
Jun 16 '14 at 5:01

add a comment |

3 Answers
3

active

oldest

votes

You can't do it client-side. You'll have to do it on the server.

Edit: This answer is outdated!

As the time of this edit, HTML file API is mostly supported on all major browsers.

I'd provide an update with solution, but @mark.inman.winning already did it.

Keep in mind that even if it's now possible to validate on the client, you should still validate it on the server, though. All client side validations can be bypassed.

edited May 23 '17 at 12:03

Community♦

answered Apr 18 '11 at 1:10

Ortiga

6,03652658

3

You are saying it's impossible to do it client-side? There has to be an elegant solution client-side...I don't like the word "impossible" :)

– delphi
Apr 18 '11 at 1:13

2

Yes, it's impossible right now. There are some drafts of a new file api in HTML5, but no browser fully support it at the moment.

– Ortiga
Apr 18 '11 at 1:15

2

See: cs.tut.fi/~jkorpela/forms/file.html, "Setting restrictions on the file size", on why trying to do it client-side is pointless.

– magma
Apr 18 '11 at 1:17

You don't have access to the local file system on a visitors computer, the best you can hope for is to have apache limit the file size and stop the upload if it is too large.

– Brent Friar
Apr 18 '11 at 1:18

2

Interesting...this seems to work: plupload.com. The only problem is that IE8 without flash, silverlight, gears, etc plugins will default to HTML4 it seems.

– delphi
Apr 19 '11 at 1:06

|
show 2 more comments

This is completely possible. Use Javascript.

I use jQuery to select the input element. I have it set up with an on change 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 submit 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 match them to the $_FILES(PHP Superglobal, sorry I dont 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 wont be saved. This should work on all browsers because I'm not using FormData object.

edited Feb 13 '18 at 14:58

Patrick Moore

11k42656

answered Jun 18 '13 at 15:46

mark.inman

1,51911211

Interesting. What are the problems with this solution?

– delphi
Oct 7 '13 at 21:38

13

You can't do it client side and expect it to always work. If it is important check on the server side too, else people will use modified copies of the form (or other client side means) to upload oversize files. Server side checks are like a lock, client side checks are like a post-it note that says "keep out". Lock the door first, then put up the "keep out" sign.

– user340140
Oct 9 '13 at 2:49

1

@user340140 As long as the client supports javascript you can. If the client doesn't just simply state that the site requires javascript to be enabled. Javascript has a file reader that essentially cant be tricked, it reads bit by bit so there is no worry about receiving a small file that is secretly another size. Server side is the preferred "secure" method, but i don't see how javascript isn't just as secure when talking about file size.

– mark.inman
Oct 21 '13 at 17:38

5

Because like user340140 said Javascript can be easily modified whatever you do. You can do this on top of the server side check for usability, but you can't secure it with client side Javascript.

– Sinan Samet
Mar 28 '14 at 11:04

Client-side is always good because you can do a pre-check of the size, before actually sending the file. Lets "forget" the hacker... for a normal user app its ok. Now of course, its just a pre-check, you should always check again on server. But response might take a bit more.

– Miguel
Apr 4 '17 at 16:58

|
show 1 more comment

var uploadField = document.getElementById("file");



uploadField.onchange = function() {

    if(this.files[0].size > 2097152){

       alert("File is too big!");

       this.value = "";

    };

};

This example should work fine. I set it up for roughly 2MB, 1MB in Bytes is 1,048,576 so you can multiply it by the limit you need.

Here is the jsfiddle example for more clearence:
https://jsfiddle.net/7bjfr/808/

edited Mar 26 '18 at 11:25

answered Mar 26 '18 at 11:08

Haseeb Rehman

26635

5

Simple answer. Thanks!

– Roshana Pitigala
Apr 5 '18 at 15:53

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f5697605%2flimit-the-size-of-an-file-upload-html-input%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

You can't do it client-side. You'll have to do it on the server.

Edit: This answer is outdated!

As the time of this edit, HTML file API is mostly supported on all major browsers.

I'd provide an update with solution, but @mark.inman.winning already did it.

Keep in mind that even if it's now possible to validate on the client, you should still validate it on the server, though. All client side validations can be bypassed.

edited May 23 '17 at 12:03

Community♦

answered Apr 18 '11 at 1:10

Ortiga

6,03652658

3

You are saying it's impossible to do it client-side? There has to be an elegant solution client-side...I don't like the word "impossible" :)

– delphi
Apr 18 '11 at 1:13

2

Yes, it's impossible right now. There are some drafts of a new file api in HTML5, but no browser fully support it at the moment.

– Ortiga
Apr 18 '11 at 1:15

2

See: cs.tut.fi/~jkorpela/forms/file.html, "Setting restrictions on the file size", on why trying to do it client-side is pointless.

– magma
Apr 18 '11 at 1:17

You don't have access to the local file system on a visitors computer, the best you can hope for is to have apache limit the file size and stop the upload if it is too large.

– Brent Friar
Apr 18 '11 at 1:18

2

Interesting...this seems to work: plupload.com. The only problem is that IE8 without flash, silverlight, gears, etc plugins will default to HTML4 it seems.

– delphi
Apr 19 '11 at 1:06

|
show 2 more comments

You can't do it client-side. You'll have to do it on the server.

Edit: This answer is outdated!

As the time of this edit, HTML file API is mostly supported on all major browsers.

I'd provide an update with solution, but @mark.inman.winning already did it.

Keep in mind that even if it's now possible to validate on the client, you should still validate it on the server, though. All client side validations can be bypassed.

edited May 23 '17 at 12:03

Community♦

answered Apr 18 '11 at 1:10

Ortiga

6,03652658

3

You are saying it's impossible to do it client-side? There has to be an elegant solution client-side...I don't like the word "impossible" :)

– delphi
Apr 18 '11 at 1:13

2

Yes, it's impossible right now. There are some drafts of a new file api in HTML5, but no browser fully support it at the moment.

– Ortiga
Apr 18 '11 at 1:15

2

See: cs.tut.fi/~jkorpela/forms/file.html, "Setting restrictions on the file size", on why trying to do it client-side is pointless.

– magma
Apr 18 '11 at 1:17

You don't have access to the local file system on a visitors computer, the best you can hope for is to have apache limit the file size and stop the upload if it is too large.

– Brent Friar
Apr 18 '11 at 1:18

2

Interesting...this seems to work: plupload.com. The only problem is that IE8 without flash, silverlight, gears, etc plugins will default to HTML4 it seems.

– delphi
Apr 19 '11 at 1:06

|
show 2 more comments

You can't do it client-side. You'll have to do it on the server.

Edit: This answer is outdated!

As the time of this edit, HTML file API is mostly supported on all major browsers.

I'd provide an update with solution, but @mark.inman.winning already did it.

Keep in mind that even if it's now possible to validate on the client, you should still validate it on the server, though. All client side validations can be bypassed.

edited May 23 '17 at 12:03

Community♦

answered Apr 18 '11 at 1:10

Ortiga

6,03652658

You can't do it client-side. You'll have to do it on the server.

Edit: This answer is outdated!

As the time of this edit, HTML file API is mostly supported on all major browsers.

I'd provide an update with solution, but @mark.inman.winning already did it.

Keep in mind that even if it's now possible to validate on the client, you should still validate it on the server, though. All client side validations can be bypassed.

edited May 23 '17 at 12:03

Community♦

answered Apr 18 '11 at 1:10

Ortiga

6,03652658

edited May 23 '17 at 12:03

Community♦

edited May 23 '17 at 12:03

Community♦

edited May 23 '17 at 12:03

Community♦

answered Apr 18 '11 at 1:10

Ortiga

6,03652658

answered Apr 18 '11 at 1:10

Ortiga

6,03652658

answered Apr 18 '11 at 1:10

Ortiga

6,03652658

3

You are saying it's impossible to do it client-side? There has to be an elegant solution client-side...I don't like the word "impossible" :)

– delphi
Apr 18 '11 at 1:13

2

Yes, it's impossible right now. There are some drafts of a new file api in HTML5, but no browser fully support it at the moment.

– Ortiga
Apr 18 '11 at 1:15

2

See: cs.tut.fi/~jkorpela/forms/file.html, "Setting restrictions on the file size", on why trying to do it client-side is pointless.

– magma
Apr 18 '11 at 1:17

You don't have access to the local file system on a visitors computer, the best you can hope for is to have apache limit the file size and stop the upload if it is too large.

– Brent Friar
Apr 18 '11 at 1:18

2

Interesting...this seems to work: plupload.com. The only problem is that IE8 without flash, silverlight, gears, etc plugins will default to HTML4 it seems.

– delphi
Apr 19 '11 at 1:06

|
show 2 more comments

3

You are saying it's impossible to do it client-side? There has to be an elegant solution client-side...I don't like the word "impossible" :)

– delphi
Apr 18 '11 at 1:13

2

Yes, it's impossible right now. There are some drafts of a new file api in HTML5, but no browser fully support it at the moment.

– Ortiga
Apr 18 '11 at 1:15

2

See: cs.tut.fi/~jkorpela/forms/file.html, "Setting restrictions on the file size", on why trying to do it client-side is pointless.

– magma
Apr 18 '11 at 1:17

You don't have access to the local file system on a visitors computer, the best you can hope for is to have apache limit the file size and stop the upload if it is too large.

– Brent Friar
Apr 18 '11 at 1:18

2

Interesting...this seems to work: plupload.com. The only problem is that IE8 without flash, silverlight, gears, etc plugins will default to HTML4 it seems.

– delphi
Apr 19 '11 at 1:06

You are saying it's impossible to do it client-side? There has to be an elegant solution client-side...I don't like the word "impossible" :)

– delphi
Apr 18 '11 at 1:13

Yes, it's impossible right now. There are some drafts of a new file api in HTML5, but no browser fully support it at the moment.

– Ortiga
Apr 18 '11 at 1:15

See: cs.tut.fi/~jkorpela/forms/file.html, "Setting restrictions on the file size", on why trying to do it client-side is pointless.

– magma
Apr 18 '11 at 1:17

You don't have access to the local file system on a visitors computer, the best you can hope for is to have apache limit the file size and stop the upload if it is too large.

– Brent Friar
Apr 18 '11 at 1:18

Interesting...this seems to work: plupload.com. The only problem is that IE8 without flash, silverlight, gears, etc plugins will default to HTML4 it seems.

– delphi
Apr 19 '11 at 1:06

|
show 2 more comments

This is completely possible. Use Javascript.

I use jQuery to select the input element. I have it set up with an on change 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);



});

edited Feb 13 '18 at 14:58

Patrick Moore

11k42656

answered Jun 18 '13 at 15:46

mark.inman

1,51911211

Interesting. What are the problems with this solution?

– delphi
Oct 7 '13 at 21:38

13

You can't do it client side and expect it to always work. If it is important check on the server side too, else people will use modified copies of the form (or other client side means) to upload oversize files. Server side checks are like a lock, client side checks are like a post-it note that says "keep out". Lock the door first, then put up the "keep out" sign.

– user340140
Oct 9 '13 at 2:49

1

@user340140 As long as the client supports javascript you can. If the client doesn't just simply state that the site requires javascript to be enabled. Javascript has a file reader that essentially cant be tricked, it reads bit by bit so there is no worry about receiving a small file that is secretly another size. Server side is the preferred "secure" method, but i don't see how javascript isn't just as secure when talking about file size.

– mark.inman
Oct 21 '13 at 17:38

5

Because like user340140 said Javascript can be easily modified whatever you do. You can do this on top of the server side check for usability, but you can't secure it with client side Javascript.

– Sinan Samet
Mar 28 '14 at 11:04

Client-side is always good because you can do a pre-check of the size, before actually sending the file. Lets "forget" the hacker... for a normal user app its ok. Now of course, its just a pre-check, you should always check again on server. But response might take a bit more.

– Miguel
Apr 4 '17 at 16:58

|
show 1 more comment

This is completely possible. Use Javascript.

I use jQuery to select the input element. I have it set up with an on change 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);



});

edited Feb 13 '18 at 14:58

Patrick Moore

11k42656

answered Jun 18 '13 at 15:46

mark.inman

1,51911211

Interesting. What are the problems with this solution?

– delphi
Oct 7 '13 at 21:38

13

You can't do it client side and expect it to always work. If it is important check on the server side too, else people will use modified copies of the form (or other client side means) to upload oversize files. Server side checks are like a lock, client side checks are like a post-it note that says "keep out". Lock the door first, then put up the "keep out" sign.

– user340140
Oct 9 '13 at 2:49

1

@user340140 As long as the client supports javascript you can. If the client doesn't just simply state that the site requires javascript to be enabled. Javascript has a file reader that essentially cant be tricked, it reads bit by bit so there is no worry about receiving a small file that is secretly another size. Server side is the preferred "secure" method, but i don't see how javascript isn't just as secure when talking about file size.

– mark.inman
Oct 21 '13 at 17:38

5

Because like user340140 said Javascript can be easily modified whatever you do. You can do this on top of the server side check for usability, but you can't secure it with client side Javascript.

– Sinan Samet
Mar 28 '14 at 11:04

Client-side is always good because you can do a pre-check of the size, before actually sending the file. Lets "forget" the hacker... for a normal user app its ok. Now of course, its just a pre-check, you should always check again on server. But response might take a bit more.

– Miguel
Apr 4 '17 at 16:58

|
show 1 more comment

This is completely possible. Use Javascript.

I use jQuery to select the input element. I have it set up with an on change 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);



});

edited Feb 13 '18 at 14:58

Patrick Moore

11k42656

answered Jun 18 '13 at 15:46

mark.inman

1,51911211

This is completely possible. Use Javascript.

I use jQuery to select the input element. I have it set up with an on change 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);



});

edited Feb 13 '18 at 14:58

Patrick Moore

11k42656

answered Jun 18 '13 at 15:46

mark.inman

1,51911211

edited Feb 13 '18 at 14:58

Patrick Moore

11k42656

edited Feb 13 '18 at 14:58

Patrick Moore

11k42656

edited Feb 13 '18 at 14:58

Patrick Moore

11k42656

answered Jun 18 '13 at 15:46

mark.inman

1,51911211

answered Jun 18 '13 at 15:46

mark.inman

1,51911211

answered Jun 18 '13 at 15:46

mark.inman

1,51911211

Interesting. What are the problems with this solution?

– delphi
Oct 7 '13 at 21:38

13

You can't do it client side and expect it to always work. If it is important check on the server side too, else people will use modified copies of the form (or other client side means) to upload oversize files. Server side checks are like a lock, client side checks are like a post-it note that says "keep out". Lock the door first, then put up the "keep out" sign.

– user340140
Oct 9 '13 at 2:49

1

@user340140 As long as the client supports javascript you can. If the client doesn't just simply state that the site requires javascript to be enabled. Javascript has a file reader that essentially cant be tricked, it reads bit by bit so there is no worry about receiving a small file that is secretly another size. Server side is the preferred "secure" method, but i don't see how javascript isn't just as secure when talking about file size.

– mark.inman
Oct 21 '13 at 17:38

5

Because like user340140 said Javascript can be easily modified whatever you do. You can do this on top of the server side check for usability, but you can't secure it with client side Javascript.

– Sinan Samet
Mar 28 '14 at 11:04

Client-side is always good because you can do a pre-check of the size, before actually sending the file. Lets "forget" the hacker... for a normal user app its ok. Now of course, its just a pre-check, you should always check again on server. But response might take a bit more.

– Miguel
Apr 4 '17 at 16:58

|
show 1 more comment

Interesting. What are the problems with this solution?

– delphi
Oct 7 '13 at 21:38

13

You can't do it client side and expect it to always work. If it is important check on the server side too, else people will use modified copies of the form (or other client side means) to upload oversize files. Server side checks are like a lock, client side checks are like a post-it note that says "keep out". Lock the door first, then put up the "keep out" sign.

– user340140
Oct 9 '13 at 2:49

1

@user340140 As long as the client supports javascript you can. If the client doesn't just simply state that the site requires javascript to be enabled. Javascript has a file reader that essentially cant be tricked, it reads bit by bit so there is no worry about receiving a small file that is secretly another size. Server side is the preferred "secure" method, but i don't see how javascript isn't just as secure when talking about file size.

– mark.inman
Oct 21 '13 at 17:38

5

Because like user340140 said Javascript can be easily modified whatever you do. You can do this on top of the server side check for usability, but you can't secure it with client side Javascript.

– Sinan Samet
Mar 28 '14 at 11:04

Client-side is always good because you can do a pre-check of the size, before actually sending the file. Lets "forget" the hacker... for a normal user app its ok. Now of course, its just a pre-check, you should always check again on server. But response might take a bit more.

– Miguel
Apr 4 '17 at 16:58

Interesting. What are the problems with this solution?

– delphi
Oct 7 '13 at 21:38

You can't do it client side and expect it to always work. If it is important check on the server side too, else people will use modified copies of the form (or other client side means) to upload oversize files. Server side checks are like a lock, client side checks are like a post-it note that says "keep out". Lock the door first, then put up the "keep out" sign.

– user340140
Oct 9 '13 at 2:49

@user340140 As long as the client supports javascript you can. If the client doesn't just simply state that the site requires javascript to be enabled. Javascript has a file reader that essentially cant be tricked, it reads bit by bit so there is no worry about receiving a small file that is secretly another size. Server side is the preferred "secure" method, but i don't see how javascript isn't just as secure when talking about file size.

– mark.inman
Oct 21 '13 at 17:38

Because like user340140 said Javascript can be easily modified whatever you do. You can do this on top of the server side check for usability, but you can't secure it with client side Javascript.

– Sinan Samet
Mar 28 '14 at 11:04

Client-side is always good because you can do a pre-check of the size, before actually sending the file. Lets "forget" the hacker... for a normal user app its ok. Now of course, its just a pre-check, you should always check again on server. But response might take a bit more.

– Miguel
Apr 4 '17 at 16:58

|
show 1 more comment

var uploadField = document.getElementById("file");



uploadField.onchange = function() {

    if(this.files[0].size > 2097152){

       alert("File is too big!");

       this.value = "";

    };

};

This example should work fine. I set it up for roughly 2MB, 1MB in Bytes is 1,048,576 so you can multiply it by the limit you need.

Here is the jsfiddle example for more clearence:
https://jsfiddle.net/7bjfr/808/

edited Mar 26 '18 at 11:25

answered Mar 26 '18 at 11:08

Haseeb Rehman

26635

5

Simple answer. Thanks!

– Roshana Pitigala
Apr 5 '18 at 15:53

add a comment |

var uploadField = document.getElementById("file");



uploadField.onchange = function() {

    if(this.files[0].size > 2097152){

       alert("File is too big!");

       this.value = "";

    };

};

This example should work fine. I set it up for roughly 2MB, 1MB in Bytes is 1,048,576 so you can multiply it by the limit you need.

Here is the jsfiddle example for more clearence:
https://jsfiddle.net/7bjfr/808/

edited Mar 26 '18 at 11:25

answered Mar 26 '18 at 11:08

Haseeb Rehman

26635

5

Simple answer. Thanks!

– Roshana Pitigala
Apr 5 '18 at 15:53

add a comment |

var uploadField = document.getElementById("file");



uploadField.onchange = function() {

    if(this.files[0].size > 2097152){

       alert("File is too big!");

       this.value = "";

    };

};

This example should work fine. I set it up for roughly 2MB, 1MB in Bytes is 1,048,576 so you can multiply it by the limit you need.

Here is the jsfiddle example for more clearence:
https://jsfiddle.net/7bjfr/808/

edited Mar 26 '18 at 11:25

answered Mar 26 '18 at 11:08

Haseeb Rehman

26635

var uploadField = document.getElementById("file");



uploadField.onchange = function() {

    if(this.files[0].size > 2097152){

       alert("File is too big!");

       this.value = "";

    };

};

This example should work fine. I set it up for roughly 2MB, 1MB in Bytes is 1,048,576 so you can multiply it by the limit you need.

Here is the jsfiddle example for more clearence:
https://jsfiddle.net/7bjfr/808/

edited Mar 26 '18 at 11:25

answered Mar 26 '18 at 11:08

Haseeb Rehman

26635

edited Mar 26 '18 at 11:25

answered Mar 26 '18 at 11:08

Haseeb Rehman

26635

answered Mar 26 '18 at 11:08

Haseeb Rehman

26635

answered Mar 26 '18 at 11:08

Haseeb Rehman

26635

5

Simple answer. Thanks!

– Roshana Pitigala
Apr 5 '18 at 15:53

add a comment |

5

Simple answer. Thanks!

– Roshana Pitigala
Apr 5 '18 at 15:53

Simple answer. Thanks!

– Roshana Pitigala
Apr 5 '18 at 15:53

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu