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_prese         


        

Answer 1

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 2

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 3

 // 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 4

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 5

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 6

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