Re-use fine uploader code for multi instance

问题

I am have multiple instances of fine uploader in a page. I do not want to repeat/duplicate fine uploader script and template for every uploader instance as it is lot of code in my case (6-8 uploader).

I have following:

$('#fine-uploader-manual-trigger-section1').fineUploaderS3({
    template: 'qq-template-manual-trigger-section1',
    autoUpload: false,
    debug: true,
    request: {
        endpoint: $("#s3_url").val(),
        accessKey: $("#access_key").val(),     
    },
});
$('#fine-uploader-manual-trigger-section2').fineUploaderS3({
    template: 'qq-template-manual-trigger-section2',
    autoUpload: false,
    debug: true,
    request: {
        endpoint: $("#s3_url").val(),
        accessKey: $("#access_key").val(),     
    },
});
.......
up to 6-8; as you can template code also repeat.

My goals is re-use script and possibly template using below approach. I need some advice or direction what might be solution. Certainly,I am trying avoid code duplication.

$('#fine-uploader-manual-trigger-section1').createUploader('section1');
$('#fine-uploader-manual-trigger-section2').createUploader('section2');

function createUploader(section) {
   return new fineUploaderS3({
    template: 'qq-template-manual-trigger'+section,
    autoUpload: false,
    debug: true,
    request: {
        endpoint: $("#s3_url").val(),
        accessKey: $("#access_key").val(),     
    },
  });
}

My question, how to instantiate .fineUploaderS3 and attach that to $('#fine-uploader-manual-trigger-section1') ? Is above approach possible with the JQuery version?

回答1:

Here is a function that you can call to create a set of Fine Uploader S3 instances attached to unique elements w/ varying endpoints and templates:

function createUploader(uploaderInfo) {
   return new qq.s3.FineUploader({
      element: document.querySelector(uploaderInfo.elementSelector),
      template: document.querySelector(uploaderInfo.templateSelector),
      request: {
         endpoint: uploaderInfo.endpoint
      }
   })
}

...and you can call this function like this:

[
   {
      elementSelector: '#element1', 
      templateSelector: '#template1', 
      endpoint: 'endpoint/1'
   },
   {
      elementSelector: '#element2', 
      templateSelector: '#template2', 
      endpoint: 'endpoint/2'
   }
   ...
].forEach(function(uploaderInfo) {
   createUploader(uploaderInfo)
})

That's the general idea. You may, of course, modify the code to more closely suit your needs. If you need to track uploader instances, you can do that inside of the forEach loop too.

来源：https://stackoverflow.com/questions/37943525/re-use-fine-uploader-code-for-multi-instance

标签

javascript

amazon-s3

fine-uploader