Fine Uploader - using both Direct S3 and Traditional in same project

Question

I have an existing FineUploader implementation for small files using the Traditional (upload-to-server) version which is working great. However, I'd like to also allow Direct S3 uploads from a different part of the application which deals with large attachments, without rewriting the existing code for small files.

Is there some way to allow both Direct S3 and Traditional uploads to work alongside each other? This is a single-page application, so I can't just load one or the other fine-uploader versions depending on which page I'm on.

I tried just including both fine-uploader JS files, but it seemed to break my existing code.

Client-side code:

$uploadContainer = this.$('.uploader')
$uploadButton = this.$('.upload-button')
$uploadContainer.fineUploader(
  request:
    endpoint: @uploadUrl
    inputName: @inputName
    params:
      authenticity_token: $('meta[name="csrf-token"]').attr('content')
  button: $uploadButton
).on 'complete', (event, id, fileName, response) =>
  @get('controller').receiveUpload(response)

Answer 1

Good find, @Melinda.

Fine Uploader lives within a custom-named namespace so that it does not conflict with other potential global variables, this is the qq namespace (historically named). What is happening is that each custom build is redeclaring this namespace along with all member objects when you include it in the <script> tags on your page.

I've opened up an issue on our bug tracker that explains the issue in more technical details, and we're looking to prioritize a fix to the customize page so that in the future no one will have this issue.