Search code examples
javascriptjqueryfile-uploadjquery-file-upload

jQuery fileupload - get list of uploaded files


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


Solution

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