fineuploader image uploads include caption with uploaded files

I have a legacy app that has five separate file uploads for a single DB record. Beside each file upload there is a field to enter a caption for the uploaded file.

I am considering replacing the whole lot with a fineUploader gallery and allow up to ten files to be uploaded.

However, it was useful on the old system to have a caption with each image for the ALT tag of the image when it comes to web display.

I could address this with multiple single file uploads using fineuploader and a caption field for each but I want to get away from having so many on the page.

I see there is an option to change the file name during upload so that might be an option but that could lead to very long/messy file names and may cause issues with accents and other characters.

Can anyone suggest a good approach?

I would suggest considering you use the built-in edit filename feature, as this seems most appropriate to me and will certainly be the simplest approach.

Another approach involves the following:

1. Add a file input field to your Fine Uploader template. This will hold the user-entered caption value. You will likely need some CSS as well to make this look appropriate for your project.
2. Initialize Fine Uploader with the autoUpload option set to false. This will allow your users to enter in captions and then upload the files by clicking a button (to be added later).
3. Register an onUpload callback handler. Here, you will read the value of the associated file's caption stored in the text input and tie it to the file with the setParams API method.

The file list portion of your template may look something like this:

<ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals">
   <li>
      ...
      <input class="caption">
   </li>
</ul>

And your Fine Uploader code will contain this logic (important but unrelated options such as request.endpoint and element left out to maintain focus on your question):

var uploader = new qq.FineUploader({
   autoUpload: false,
   callbacks: {
      onUpload: function(id) {
         var fileContainer = this.getItemByFileId(id)
         var captionInput = fileContainer.querySelector('.caption')
         var captionText = captionInput.value

         this.setParams({caption: captionText}, id)
      }
   }
})

Your server will receive a "caption" parameter with the associated value as part of each file's upload request.