fine-uploader - how to use in combination with other input fields?

Question

I would like to use FineUploader within a typical form:

<form enctype="multipart/form-data" method="post"">
    <input name="fileupload" type="file" ">
    <input type="text" name="title" size="45" maxlength="100">
    <textarea name="description" cols="40" rows="8"></textarea>
    <input type="hidden" name="op" value="Add">
<input type="submit" value="Upload">

So I would actually like to mainly replace the <input name="fileupload" type="file" "> part.

Unfortunately I am not very familiar with JavaScript and jQuery jet and have no idea how to do this. I could not find any exemplary code where FineUploader is used together with other data to be send.

I would appreciate any help!

Thanks Kashuda

Answer 1

While Fine Uploader does not require jQuery (or any other library, for that matter) it does have an optional jQuery plug-in. If you are not opposed to using jQuery, I suggest you use the jQuery plug-in, as jQuery makes life much easier.

There are a couple ways to skin this cat. In either case, the formula is about the same. That is, let Fine Uploader handle files, create input elements on-the-fly for each file submitted, and then pass the values of those inputs back to Fine Uploader just before Fine Uploader sends the associated file to your server.

Option #1 - FineUploader mode (using the pre-built UI)

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 likely need to add to the above code to suit your needs, and contribute CSS where appropriate, but that is a start in the right direction. Above, you are waiting for Fine Uploader to call you back when it has added the list item to the DOM representing a selected file. When you receive that callback, you are adding an text input element at the beginning of the list item (for the user-supplied name), and another at the end of the list item (for the user-supplied description. Then, just before Fine Uploader sends the file to your server, it invokes your "upload" event handler, where you read the values of the input elements and give them to Fine Uploader, associating them with the file via the file ID. Fine Uploader will include this information along with the file in the multipart-encoded POST request it will send to your server.

The click handler will signal Fine Uploader to send the files to your server. Your user will click this after they have selected all files and filled out the input fields as appropriate. Normally, Fine Uploader sends files to the server immediately after they are selected, but this can be changed by toggling the autoUpload option. For your situation, it makes most sense to turn auto uploading off.

Using FineUploader mode means you don't have to worry too much about the UI as most of it has been done for you, and you get drag & drop functionality, along with progress bars and other UI goodies for free.

Option #2 - FineUploaderBasic mode (build your own UI)

Your second choice is to use FineUploaderBasic mode. This gives you the most control over your UI, but it requires the most work as you will need to create your own UI entirely. This means you will need to make use of most callbacks in order to construct your UI and keep it in sync with the internal state of Fine Uploader and the associated files.

For example, if you want progress bars, you'll need to render them yourself and update them based on information periodically passed to your via an onProgress callback handler invoked by Fine Uploader. All of this is fine and possibly preferred in some cases if you are quite comfortable with javascript, HTML, and CSS. If you are not, however, you may want to try and stick with FineUploader mode.

FineUploaderBasic mode does not include drag and drop support out-of-the-box, but you can easily integrate Fine Uploader's standalone File Drag & Drop module if you desire.