Adds a progress_bar_target option to the S3Uploader jQuery plugin

README.md

@@ -122,6 +122,7 @@ Use the javascript in `s3_direct_upload` as a guide.
 * `remove_completed_progress_bar:` By default, the progress bar will be removed once the file has been successfully uploaded. You can set this to `false` if you want to keep the progress bar.
 * `remove_failed_progress_bar:` By default, the progress bar will not be removed when uploads fail. You can set this to `true` if you want to remove the progress bar.
 * `before_add:` Callback function that executes before a file is added to the queue. It is passed file object and expects `true` or `false` to be returned. This could be useful if you would like to validate the filenames of files to be uploaded for example. If true is returned file will be uploaded as normal, false will cancel the upload.
+* `progress_bar_target:` The jQuery selector for the element where you want the progress bars to be appended to. Default is the form element.
 
 ### Example with all options.
 ```coffeescript
@@ -131,6 +132,7 @@ jQuery ->
     additional_data: {key: 'value'}
     remove_completed_progress_bar: false
     before_add: myCallBackFunction() # must return true or false if set
+    progress_bar_target: $('.js-progress-bars')
 ```
 
 ### Public methods

app/assets/javascripts/s3_direct_upload.js.coffee

@@ -20,6 +20,7 @@ $.fn.S3Uploader = (options) ->
     before_add: null
     remove_completed_progress_bar: true
     remove_failed_progress_bar: false
+    progress_bar_target: null
 
   $.extend settings, options
 
@@ -35,7 +36,7 @@ $.fn.S3Uploader = (options) ->
 
         unless settings.before_add and not settings.before_add(file)
           data.context = $(tmpl("template-upload", file)) if $('#template-upload').length > 0
-          $uploadForm.append(data.context)
+          $(data.context).appendTo(settings.progress_bar_target || $uploadForm)
           data.submit()
 
       start: (e) ->