While Fine Uploader does not require jQuery (or any other library, for that matter), it has an optional jQuery plugin . If you don't mind using jQuery, I suggest you use the jQuery plugin, since jQuery makes life easier.
There are several ways to hide this cat. In any case, the formula is approximately the same. That is, let Fine Uploader process the files, create input elements "on the fly" for each file sent, and then transfer the values of these inputs back to Fine Uploader immediately before Fine Uploader sends the linked file to your server.
Option No. 1 - FineUploader mode (using the built-in user interface)
Using FineUploader Mode :
<div id="myFineUploaderContainer"></div> <button id="uploadSelectedFiles">Upload Selected Files</button> $('#myFineUploaderContainer').fineUploader({ request: { endpoint: '/my/upload/endpoint' }, autoUpload: false }) .on('submitted', function(event, id, name) { var fileItemContainer = $(this).fineUploader('getItemByFileId', id); $(fileItemContainer) .prepend('<input type="text" name="name">') .append('<input type="text" name="description">'); }) .on('upload', function(event, id, name) { var fileItemContainer = $(this).fineUploader('getItemByFileId', id), enteredName = $(fileItemContainer).find('INPUT[name="name"]').val(), enteredDescr = $(fileItemContainer).find('INPUT[namme="description"]').val(); $(this).fineUploader('setParams', {name: enteredName, description: enteredDescr}, id); }); $('#uploadSelectedFiles').click(function() { $('#myFineUploaderContainer').fineUploader('uploadStoredFiles'); });
You will most likely need to add to the above code according to your needs and, if necessary, add CSS to it, but this started in the right direction. You already expect Fine Uploader to call you back when it adds a list item to the DOM representing the selected file. When you receive this callback, you add a text entry element at the beginning of the list element (for the name provided by the user) and another at the end of the list element (for the description provided by the user. Then, just before the Fine Uploader sends the file to your server, it calls your "upload" event handler, where you read the values of input elements and pass them to the Fine Uploader, linking them to the file using the file identifier.The thin loader will include this information with the file in the POST request with multiple by encoding it will send to your server.
The click handler will signal Fine Uploader to send files to your server. Your user will click this after they select all the files and fill in the input fields accordingly. Typically, Fine Uploader sends files to the server immediately after selecting them, but this can be changed by switching the autoUpload parameter. For your situation, it makes sense to turn off automatic loading.
Using FineUploader mode means that you don’t have to worry too much about the user interface, since most of them were made for you, and you get drag and drop functionality, as well as progress indicators and other useful UI properties.
Option # 2 - FineUploaderBasic mode (create your own user interface)
Your second choice is to use FineUploaderBasic mode . This gives you maximum control over your user interface, but it requires a lot of work, since you will need to completely create your own interface. This means that you will need to use most callbacks to create your user interface and synchronize it with the internal state of the Fine Uploader and its associated files.
For example, if you need progress bars, you will need to make them yourself and update them based on information periodically passed to you through the onProgress callback handler called by the Fine Uploader. All of this is fine and perhaps preferable in some cases, if you are quite comfortable working with javascript, HTML and CSS. However, if you do not, you can try using FineUploader mode.
FineUploaderBasic mode does not include drag-and-drop support from the box, but you can easily integrate the Standalone File Drag and Drop backup file if you want.