jQuery fileupload - get list of uploaded files

Question

I'm using the very good jquery plugin blueimp / jQuery-File-Upload

$('#fileupload').fileupload({
  autoUpload: true
, filesContainer: '#attachments_presentation tbody'
, stop: function (e) {
    console.log(data);
  }
});

And I'm not able to do something very simple: get the list of uploaded files
(with their name on the server)

Firstly I naively though it would be stored on the file input so I could get the list with

$('#fileupload').val();

But it's not, so I though about something like

$('#fileupload').fileupload('getfiles');

I can't find the way from the docs

Can somebody tell me how I can get the list of uploaded file names in the server ?

---

Update

I'd like to get the uploaded files name on the server in order to be able to manage them afterwards.

For example:

• I upload a file named trutruc.pdf
• I upload test.png
• I re-upload a file named trutruc.pdf
• I delete the first file

The current list of files in the server should then be test.png, trutruc (2).pdf

---

Update 2

I'm using the default php script shipped with fileUpload

Answer 1

When you instantiate the default plugin, there is a code portion which is retrieving all the previous uploaded files (assuming you haven't changed the server code) :

See on the main.js file line 70 :

    // Load existing files:
    $.ajax({
    // Uncomment the following to send cross-domain cookies:
    //xhrFields: {withCredentials: true},
    url: $('#fileupload').fileupload('option', 'url'),
        dataType: 'json',
        context: $('#fileupload')[0]
    }).done(function (result) {
        $(this).fileupload('option', 'done')
            .call(this, null, {result: result});
    });

Than if you look further in your code, there is a table which will be filled out with the template :

<table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>

You could easily parse each from that table after loading the files :

$('tbody.files tr').each(function(i, e) {
    //according to @Brandon's comment it's now p.name
    var name = $(e).find('td.name').text(); 
    var size = $(e).find('td.size').text();
    //etc.
});

Answer 2

I use UI version. Here is script that grabs server links from table of files and populates array:

    var files = new Array();
    $("#fileupload td p.name a").each(function() {
        var name = $(this).attr("href");
        files.push(name);
    });
    alert(files.join('\n'));

Answer 3

you can also try this

 $('#fileupload').bind('fileuploadcompleted', function (e, data) {
     var filess= data.result.files[0];
        var filenam = filess.name;
       alert(filenam);
});

Answer 4

I had the same problem and after a few hours and tens of file uploads, I think I have the answer you need:

done: function (e, data) {
    response = data.response();
    parsedresponse = $.parseJSON(response.result);
    console.log(parsedresponse.files);
}

As you can see, you will find the uploaded files name at parsedresponse.files[i].url (i is the 0-based index of the uploaded files).

Ok... its the uploaded file's URL, but you'll be able to extract the final file name ...

Hope it helps. (this is nowhere in the documentation, I managed to get to this solution by checking the Firebug console outputs)

Answer 5

To get the list of uploaded file names from the server, requires server-side code:

UploadHandler.php is used to upload files to a directory/s on your server.

If you've downloaded the plug-in archive and extracted it to your server, the files will be stored in php/files by default. (Ensure that the php/files directory has server write permissions.) see: https://github.com/blueimp/jQuery-File-Upload/wiki/Setup

UploadHandler.php is just that, an upload handler. It does not provide access to server files without a connection to the server.

JavaScript cannot access files on the server, so you'll need a php script to do so. (Although JavaScript could possibly keep track of everything uploaded, renamed, and deleted.)

You can modify UploadHandler.php to connect to your database, and write the file paths (and any other data) to a files table during upload. Then you can access your files via standard SQL queries:

Modify UploadHandler.php:

1. Add your database connection parameters
2. Write an SQL query function
3. Write a second function to perform your query
4. Call the second function

see: https://github.com/blueimp/jQuery-File-Upload/wiki/Working-with-databases

Answer 6

Well this is quite an old post, but this is something which worked very well for me so I thought to post it.

1. Bind the event to FileUploader (I did it in main.js):

       $('#fileupload').bind('fileuploaddone', function (e, data) {
           FileUploadDone(e, data);
       });
   

2. In your html file, use the following code to get the file name:

   function FileUploadDone(e, data) {
   for (x in data._response.result.files){
       if (data._response.result.files[x].error == "")
           alert(data._response.result.files[x].name);
       else
           alert(data._response.result.files[x].error);
   }}
   

You should watch the data object in firebug. This object encapsulates most of the information.

Answer 7

If, you'r using the basic-plugin asmentioned in the documentations you need to pass the data to the function in the done attribute. change this:

stop: function (e) {

to this:

done: function (e, data) {

I don't know about the stop if you get it from one of the documentations pages then I think the same applied here you can't work with data if its not available.
Hope this help

Answer 8

try use done method and put names in hidden input then select them:

$('#fileupload').fileupload({
  autoUpload: true
, filesContainer: '#attachments_presentation tbody'
, stop: function (e) {
    console.log(data);
  }
, done: function(e,data){
            var filess= data.files[0];
            var filenam = filess.name;
            data.context.text(filenam+' uploaded successfully.');
            $('#formId').append('<input type="hidden" name="fileName" value="'+filenam+'"/>');
}
});

Answer 9

to get file list on upload finished:

$('#fileupload').bind('fileuploadfinished', function (e, data) {
   console.log(data.originalFiles);
});

Answer 10

 // Initialize the jQuery File Upload widget:
                $('#edit-product').fileupload({
                    // Uncomment the following to send cross-domain cookies:
                    //xhrFields: {withCredentials: true},
                    disableImageResize: false,
                    autoUpload:false,
                    url: 'YOURURL'
                }).bind('fileuploaddone', function (e, data) {
                    console.log(data.result.files[0]);   
                });