Search code examples
javascriptjqueryjquery-file-uploadblueimp

Cloning an existing blueimp file upload table


I am using blueimp jquery file upload in my current project.

I want to make a clone of my existing file upload table. On the new clone I should be able to make changes and these changes would not affect the first table.

The form may contain some files uploaded to the browser but not sent to server.

As demonstated in this question How to I preload existing files and display them in the blueimp upload table? I can create a new form and add photos that are uploaded to the server as follows:

$(this).fileupload('option', 'done').call(this, null, {result: result});

But in my case the photos are not sent to the server but held in an existing form/table.

Note: I will use the clone in my edit view. The edit view has a cancel button. I want to be able to return to the original state if the user press cancel.


Solution

  • Using the "Programmatic File Upload" feature of the plugin I was able to show previous table's files and fileInputs in the new table as follows:

    $('#fileupload').fileupload('add', {
        files: filesList,
        fileInput: $(this)
    });
    

    https://github.com/blueimp/jQuery-File-Upload/wiki/API#programmatic-file-upload https://github.com/blueimp/jQuery-File-Upload/wiki/API#programmatic-file-uploads-for-browsers-without-support-for-xhr-file-uploads

    Note I was able to collect the files and fileInputs from the previos table by using the "fileuploadadded" event of the plugin

    $('#fileupload').bind('fileuploadadded', function (e, data) {/* ... */});
    

    https://github.com/blueimp/jQuery-File-Upload/wiki/Options#additional-callback-options-for-the-ui-version