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

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 2

you can also try this

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

Answer 3

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 4

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+'"/>');
}
});