JQuery - File attributes

Question

Trying to access file attributes from an input field after a file is selected. Tried this but get the error 'file not defined'

var file = $("#uploadedfile").prop("files")[0];
var fileName = file.fileName;
var fileSize = file.fileSize;
alert("Uploading: "+fileName+" @ "+fileSize+"bytes");

have you done any debugging? The error suggests that there is something wrong with `$("#uploadedfile").prop("files")[0];`. — maxedison, Dec 08 '11 at 19:14
1) Tried using attr, same results 2) Only error message I get is 'file is not defined' 3) I am using Mac Firefox 8.0.1, so how would I be able to check if it supports access? — JimmyJammed, Dec 08 '11 at 19:31

adeneo · Accepted Answer · 2019-11-15T15:24:14.563

49

If #uploadedfile is an input with type "file" :

var file = $("#uploadedfile")[0].files[0];
var fileName = file.name;
var fileSize = file.size;
alert("Uploading: "+fileName+" @ "+fileSize+"bytes");

Normally this would fire on the change event, like so:

$("#uploadedfile").on("change", function(){
   var file = this.files[0],
       fileName = file.name,
       fileSize = file.size;
   alert("Uploading: "+fileName+" @ "+fileSize+"bytes");
   CustomFileHandlingFunction(file);
});

FIDDLE

edited Nov 15 '19 at 15:24

answered Dec 08 '11 at 19:26

adeneo

312,895
29
395
388

Get this error still: $(this).files is undefined [Break On This Error] (85 out of range 4) – JimmyJammed Dec 08 '11 at 19:35
Are you doing this on the change event, after a file has been added, so there actually is a file to get the filename from, and have you tried David's example fiddle in his answer to see if the file you select is logged in the console of your browser. – adeneo Dec 08 '11 at 19:38
2

jQuery doesn't have a files property. try `$("#uploadedfile")[0].files[0]` and `$(this)[0].files[0]` or `this.files[0]`, however, it will have the exact same effect as the code in the question. I think this is simply a question of browser support. – Kevin B Dec 08 '11 at 19:43
This should work in Firefox as well, this [site](http://base64img.com/#encode) uses the exact same code, and it works just fine in Firefox, gets the filename and size without a hitch. – adeneo Dec 08 '11 at 19:55
Yeah its a browser issue. Doesnt work in firefox for me but works in safari. – JimmyJammed Dec 08 '11 at 20:11
1

@KevinB - I've added a fiddle that should work in all browsers. – adeneo Dec 08 '11 at 20:41
2

I modified your fiddle to one that doesn't throw an error in IE, since we all know IE is slow to implement cool stuff like this, >.<. http://jsfiddle.net/Tentonaxe/eq3Qv/1/ – Kevin B Dec 08 '11 at 20:44
Good catch Kevin, did'nt really think of that. Seems the problem was just a little typo from @JamesHickman, that for some reason works in webkit but not in Firefox. Problem solved :-) – adeneo Dec 08 '11 at 20:51
@baybora.oren - IE9 does'nt support the HTML5 File API at all, so no, this does not work in IE9 ? – adeneo Jan 28 '13 at 17:16
I may get `$(...)[0].files[0] is undefined` here when the element is not in form. Maybe add some pre-check around it to avoid that error in Firefox. – Roland Nov 15 '19 at 15:19
@Roland - Then you'd wrap the entire function in something like `if ($("#el").length) ...` – adeneo Nov 15 '19 at 15:24

Srinivasan.S · Answer 2 · 2014-01-10T10:22:57.587

<form id = "uploadForm" name = "uploadForm" enctype="multipart/form-data">
    <label for="uploadFile">Upload Your File</label>
     <input type="file" name="uploadFile" id="uploadFile">                  
</form>
<script>
    $('#uploadFile').change(function(){
        var fileName = this.files[0].name;
        var fileSize = this.files[0].size;
        var fileType = this.files[0].type;
        alert('FileName : ' + fileName + '\nFileSize : ' + fileSize + ' bytes');
    });
</script>

Note: To get the uploading file name means then use jquery val() method.

For Ex:

var fileName = $('#uploadFile').val();

I checked this above code before post, it works perfectly.!

score 2 · Answer 3 · answered Dec 08 '11 at 19:25

2

To get the filenames, use:

var files = document.getElementById('inputElementID').files;

Using jQuery (since you already are) you can adapt this to the following:

$('input[type="file"][multiple]').change(
    function(e){
        var files = this.files;
        for (i=0;i<files.length;i++){
            console.log(files[i].fileName + ' (' + files[i].fileSize + ').');
        }
        return false;
    });

JS Fiddle demo.

answered Dec 08 '11 at 19:25

David Thomas

249,100
51
377
410

This works great in chrome, however in firefox i get undefined (undefined), this is going to simply be a question of browser support. – Kevin B Dec 08 '11 at 19:46

score 1 · Answer 4 · answered Jul 19 '13 at 09:24

1

Just try

var file = $("#uploadedfile").prop("files")[0];
var fileName = file.name;
var fileSize = file.size;
alert("Uploading: "+fileName+" @ "+fileSize+"bytes");

It worked for me

answered Jul 19 '13 at 09:24

Suraj Poddar

336
2
3

score 0 · Answer 5 · answered Jun 27 '13 at 10:29

The input.files attribute is an HTML5 feature. That's why some browsers din't return anything. Simply add a fallback to the plain old input.value (string) if files doesn't exist.

reference: http://www.w3.org/TR/2012/WD-html5-20121025/common-input-element-apis.html#dom-input-files

JQuery - File attributes

5 Answers5

Linked