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.

Answer 1

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};
});

Answer 2

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);
    });
}

});

Answer 3

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