jQuery fileupload - get list of uploaded files

Pierre de LESPINAY picture Pierre de LESPINAY · Mar 16, 2013 · Viewed 49.3k times · Source

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

soyuka picture soyuka · Mar 16, 2013

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