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

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

Answer 3

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 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 file list on upload finished:

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

Answer 6

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