Cloning an existing blueimp file upload table

Question

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.

Answer 1

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

Answer 2

We may need more info or more code to really help, but my impression is that you are simply attempting to create a second html table that has added functionality for the user. The user can make changes and if a 'confirm' button is pressed then the edits get applied to original table. If this is the case, then the blueimp framework, or even the fact that the files may or may not eventually be uploaded to a server, should not be considered factors to this UI scenario.

Jquery has a method clone, which would allow you to duplicate a table and append that to the DOM where you wish. However the fact that this new table will have new functionality leads me to think that a simple clone is not what you would want. It might be better to have another 'edit table' pre-made with all its functionality and hidden by default. Then when the user wants to edit a particular item, you would update the 'edit table' with the necessary data and show it. If the user hits 'cancel' simply hide the edit table, if the user hits 'confirm' hide the edit table and save the edits to the js object for that item, then update the original table to match the edits.

My answer is lacking any code examples on purpose as the actual code for this final product could vary drastically project by project. If you would like to put together a simplified version of your project on jsFiddle, it might help others.