Uploaded file size says undefined

Question

I'm trying to get the size of an uploaded image in JQuery. I created an event for the change of the form and inserted the following in it:

console.log($(this)[0].size);

The output of that is undefined. What am I doing wrong, and how can I get the uploaded image size?

JSFiddle

$(document).ready(function() {
  $('#uploadform').on('change', function(evt) {
    console.log($(this)[0].size);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
  <input id="openFile" name="img" type="file" />
</form>

score 2 · Accepted Answer · edited May 23 '17 at 12:23

2

Right now you're dealing with the form element instead of the file input, which is why you're running into complications.

Consider binding to #openFile instead:

$(document).ready(function() {
  $('#openFile').on('change', function(evt) {
    console.log(this.files[0].size);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
  <input id="openFile" name="img" type="file" />
</form>

You could use this[0].files[0].size to make it work the way you currently have it, but again it's easier to just bind to the specific element you need.

Some more Javascript file input examples are a good resource as well. And since they were mentioned, here is some related information on FormData objects: How to inspect FormData? and How do i get the content from a formData?

FormData Javascript API Examples

Reading files in JavaScript using the File APIs

Here's some proof of concept code to Drag and Drop files into FormData and upload via POST to a server. I also made a JS Bin where you can experiment and see what data is inside of a FormData object if it helps.

edited May 23 '17 at 12:23

Community

1
1

answered Nov 20 '15 at 05:37

jaggedsoft

3,858
2
33
41

Thanks for the answer! What if I have the following code: `var formData = new FormData($(this)[0]);` and I pass `formData` to another function. How can I check for the file size in that function? – Jessica Nov 20 '15 at 05:51
Hi @Jessica, Good question! If you're having trouble testing with JSFiddle or JS Bin, they have a sandbox enabled so that you can't call certain ````
```` element functions for security reasons, so just make sure that for stuff like this you're testing on your own computer or on a server, otherwise it can get confusing.
– jaggedsoft Nov 20 '15 at 06:06
To answer your question, you can do it like this: ````$(this).find('#openFile').files[0].size```` - let me know if you have any other questions! – jaggedsoft Nov 20 '15 at 06:07
I tried what you said in the last comment, and I get an error. Here's a JSFiddle: http://jsfiddle.net/ye78Lqp0/8/ – Jessica Nov 20 '15 at 06:22
@Jessica I missed the fact that you were asking about FormData. Unfortunately you can't get the properties of a FormData object once you make one. However, I threw together something you can use to experiment on JSBin: http://jsbin.com/lofogo/edit?js,output – jaggedsoft Nov 20 '15 at 06:26
The way FormData is set up unfortunately once something goes into it the only way to do processing afterwards would be on the server side after it gets submitted. However you can still deal with regular input fields at any time – jaggedsoft Nov 20 '15 at 06:27
Thanks! How about if I pass it like this: upload($('#uploadform')[0], evt); How can I get the file size in the `upload` function? – Jessica Nov 20 '15 at 06:32
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/95651/discussion-between-nextlocal-and-jessica). – jaggedsoft Nov 20 '15 at 06:36

score 0 · Answer 2 · answered Nov 20 '15 at 05:35

Based on your fiddle, I updated code to read input file by using FileReader API

$('#openFile').on('change', function (evt) {

    fr = new FileReader();
    fr.readAsDataURL($(this)[0].files[0]);
    fr.onload = function(file){
        console.log(file);
    }
});

file size is in key named "total"

http://jsfiddle.net/murnax/880djgf9/

score 0 · Answer 3 · answered Nov 20 '15 at 05:37

0

In your code replace the listening change event onto the input field instead of on the form:

$(document).ready(function() {
  $('#openFile').on('change', function(evt) {
    console.log($(this)[0].size);
  });
});

answered Nov 20 '15 at 05:37

Ketha Kavya

558
6
18

score 0 · Answer 4 · answered Nov 20 '15 at 05:38

Your event is currently bound to the form element, you want to bind it to #openfile and do the following:

$('#openfile')[0].size

Or if your intentions were to monitor the change event for the entire form you'd do the following instead:

 $(this).find('#openfile')[0].size

score -1 · Answer 5 · answered Nov 20 '15 at 05:36

It should be the file id, and not the form id. Also put files[0] to get the file size on index 0 which is your upload, try this:

<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>

<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
  <input id="openFile" name="img" type="file" />
</form>

<script>
$(document).ready(function() {
  $('#openFile').on('change', function(evt) {
    console.log(this.files[0].size);
  });
});
</script>

</body>
</html>

Uploaded file size says undefined

JSFiddle

5 Answers5