Getting the uploading file name before upload with jQuery File Upload plugin

Question

I'm using the jQuery File Upload plugin https://github.com/blueimp/jQuery-File-Upload/wiki to upload multiple files to the server. I'll be using it with a custom web service which will store the uploaded images on the server. However, besides of the POST request body I'll also need to pass to the web service the name of the file which is being uploaded. So, with each file transfer I'll also need to pass to the web service the name of the file. Could anybody tell me how can I take the file name and send it with each upload request? I'll basically need to get it from the field, without any additional input field. If a user chose 10 files, I'll need to take the name for each file in the queue and submit it with the upload request.

Thanks.

cycero · Accepted Answer · 2014-04-24 10:57:43Z

12

Ok, here's the solution which works:

// Storing the file name in the queue
var fileName = "";

// On file add assigning the name of that file to the variable to pass to the web service
$('#fileupload').bind('fileuploadadd', function (e, data) {
  $.each(data.files, function (index, file) {
    fileName = file.name;
  });
});

// On file upload submit - assigning the file name value to the form data
$('#fileupload').bind('fileuploadsubmit', function (e, data) {
  data.formData = {"file" : fileName};
});

answered Apr 24, 2014 at 10:57

cycero

4,82120 gold badges59 silver badges81 bronze badges

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

Comments

TechStone · Accepted Answer · 2014-04-24 15:41:00Z

1

I have no idea of what kind of web service your site used, resume that is ashx, if that you can use

HttpPostedFile file = context.Request.Files["Filedata"];

to fetch the filename;

or use jquery

$("#yourid").uploadify({
.....
    'onSelect': function(e, queueId, fileObj)
    {
        alert( "FileName：" + fileObj.name);
    }
});

// jquery-file-upload

$('#fileupload').fileupload({
drop: function (e, data) {
    $.each(data.files, function (index, file) {
        alert('Dropped file: ' + file.name);
    });
},
change: function (e, data) {
    $.each(data.files, function (index, file) {
        alert('Selected file: ' + file.name);
    });
}

});

edited Apr 24, 2014 at 15:41

answered Apr 24, 2014 at 10:33

TechStone

1416 bronze badges

4 Comments

cycero Over a year ago

I need to get the file name on client side and submit with the POST request of the file upload.

cycero Over a year ago

I do not use uploadify - it's Flash dependant. I'm using github.com/blueimp/jQuery-File-Upload/wiki

TechStone Over a year ago

github.com/blueimp/jQuery-File-Upload/wiki/API#callbacks there is the answer like uploadify

Dharmesh patel Over a year ago

you have solved my issue by onSelect function... because I want to do something before upload start...and no other functions helped me even onStartUpload or onUplad... thanks again

manish nautiyal · Accepted Answer · 2014-08-14 11:16:57Z

1

var filename = $('input[type=file]').val().split('\\').pop();

answered Aug 14, 2014 at 11:16

manish nautiyal

2,6143 gold badges28 silver badges35 bronze badges

Collectives™ on Stack Overflow

Getting the uploading file name before upload with jQuery File Upload plugin

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related