Возможно ли создать экземпляр upload s3 одновременно с обычным экземпляром прекрасного экземпляра?

Question

Я использую прекрасный загрузчик двумя способами, но все в одном процессе. У меня есть файлы PDF, которые я разделяю и объединяю, и делаю это локально с помощью простого тонкого экземпляра uploader. Когда я закончил, я хочу загрузить каждый объединенный файл в наш ведро amazon s3. У меня есть два экземпляра прекрасного загрузчика в том же файле javascript. Тем не менее, экземпляр s3 дает ошибку, поскольку она определена в оболочке jquery.

Процесс этой страницы включает в себя следующее:

1. Пользователь выбирает кнопку загрузки на первом пользователя, чтобы загрузить PDF-файл

2. модальное всплывает, чтобы позволить пользователю выбрать, следует ли Загрузите файл как есть или разделите PDF-файл на отдельные страницы , если пользователь выберет для загрузки как есть ... s3 bucket fine uploader is invoked (не работает сейчас); если пользователь выбирает разделение файлов pdf , после того, как файлы будут разбиты, появится еще одна модальная мода и отобразит отдельные страницы для реорганизации пользователя по типу документа.

3. после реорганизации страниц pdf в отдельные типы документов, они объединяются в новые pdf-файлы.

4. по завершении каждого объединенного файла, я хочу загрузить этот файл в ведро s3 для этого пользователя. Здесь нужно вызвать второй экземпляр загрузчика, чтобы добавить файлы, а затем загрузить файлы.

Вот сообщения об ошибках, я получаю в консоли JavaScript (с помощью Chrome), когда пользователь выбирает кнопку первой загрузки:

VM33414:16 
Uncaught TypeError: Cannot read property 'uuid' of undefined** 
qq.basePublicApi.getUuid @ VM33414:16 
qq.basePrivateApi._onSubmitDelete @ VM33414:17 
qq.uiPrivateApi._onSubmitDelete @ VM33414:18 
qq.basePublicApi.deleteFile @ VM33414:16 
(anonymous function) @ VM33416:224 
b.event.dispatch @ jquery-1.9.1.min.js:3 
v.handle @ jquery-1.9.1.min.js:3 
VM33416:157 

merged file: /var/www/html/ajax/common/files/044da577-e054-407a-95a5-aaa17899897b/1_TestDoc5_W9.pdf 
VM33416:165 Uncaught TypeError: $(...).fineUploaderS3 is not a function 
jQuery.ajax.success @ VM33416:165 
c @ jquery-1.9.1.min.js:3 
p.fireWith @ jquery-1.9.1.min.js:3 
k @ jquery-1.9.1.min.js:5 
r @ jquery-1.9.1.min.js:5 
VM33416:157 

merged file: /var/www/html/ajax/common/files/044da577-e054-407a-95a5-aaa17899897b/1_TestDoc5_License.pdf 
VM33416:165 Uncaught TypeError: $(...).fineUploaderS3 is not a function 
jQuery.ajax.success @ VM33416:165 
c @ jquery-1.9.1.min.js:3 
p.fireWith @ jquery-1.9.1.min.js:3 
k @ jquery-1.9.1.min.js:5 
r @ jquery-1.9.1.min.js:5 
VM33416:157 

merged file: /var/www/html/ajax/common/files/044da577-e054-407a-95a5-aaa17899897b/1_TestDoc5_Other.pdf 
VM33416:165 Uncaught TypeError: $(...).fineUploaderS3 is not a function 

Вот мой файл сценария:

var thisArray=[]; 
var pdfoptions=[]; 
var mydate = new Date(); 
var month = mydate.getMonth() + 1 ; 
var today = month + '/' + mydate.getDate() + '/' + mydate.getFullYear(); 

//s3 instance 
$('#s3-uploader').fineUploaderS3({ 
    debug: true, 
    autoUpload: false, 
    uploaderType: 'basic', 
    request: { 
     endpoint: 'rog-zone.s3.amazonaws.com', 
     accessKey:'################' 
    }, 
    objectProperties: { 
     // Since we want all items to be publicly accessible w/out a server to return a signed URL 
     acl: "public-read" 
    }, 
    signature: { 
     endpoint: "/assets/plugins/fine-uploader/signature/endpoint.php" 
    }, 
    validation: { 
     itemLimit: 5, 
     sizeLimit: 15000000 
    } 
    }).on('submit', function (event,id, name) { 
     console.log("[on submit] id:"+id+ " and name:"+name); 
     return new Promise(function(resolve, reject) { 
      resolve(); 
     }); 
    }).on('complete', function(event,id,fileName,responseJSON,xhr){ 
      console.log("[on complete]:"+id+ " and filename:"+fileName); 
      var $fileEl = $(this).fineUploaderS3("getItemByFileId", id);    

    }).on('upload', function(event, id, name, isError,responseJSON) { 
      var obj = JSON.stringify(responseJSON); 
      console.log("[on Upload] id:"+id+ " and response = "+obj); 
    } 
); 


//manual file uploader for local processing. WHen done, upload merged file to s3 bucket 
var manualUploader = new qq.FineUploader({ 
     element: document.getElementById("fine-uploader"), 
     template: 'qq-template-manual', 
     debug: true, 
     request: { 
      endpoint: "/ajax/common/endpoint.php" 
     }, 
     deleteFile: { 
      enabled: true, 
      endpoint: "/ajax/common/endpoint.php" 
     }, 
     chunking: { 
      enabled: true 
     }, 
     resume: { 
      enabled: true 
     }, 
     retry: { 
      enableAuto: true, 
      showButton: true 
     }, 
     callbacks: { 
      onUpload: function (id, name) { 
       console.log("onUpload"); 
      }, 
      onComplete: function(id, fileName, responseJSON){ 
       console.log("onComplete >> id:"+id+ "; filename:"+fileName+"; folder:"+responseJSON.uuid); 
       var uuid = responseJSON.uuid; 
       $("#splitter_uuid").val(uuid); 
       var filetosplit = uuid+"/"+fileName; 
       var imgsrc = 'ajax/common/files/'+uuid+'/'; 
       var fileinfo = fileName.split("."); 
       var fileprefix = fileinfo[0]; 
       $("#splitter_filename").val(fileName); 

       jQuery('#pdfHandler').modal(); 
       jQuery('#btnUploadPDF').click(function() { 
        return true; 
       }); 
       jQuery('#btnSplitPDF').click(function (e) { 
        jQuery.ajax({url: "http://52.11.64.64/ajax/common/pdfsplitter.php?pdf="+filetosplit, 
         success: function(result){ 
          //console.log("result from ajax:"+result); 
          jQuery("#pagecounttext").text("There are "+result+" pages to split. Please indicate how you would like to organize these files below."); 
          for (i=1;i<=result;i++){ 
           var imgfile = fileprefix+'_'+i+'.jpg'; 
           var pdfpage = '<a href="#" class="btn pdf-page text-inverse p-0" data-page-id="'+i+'"><img class="imgsplit" src="'+imgsrc+imgfile+'" height=90 border="1"><a/>'; 
           //<i class="btl bt-file bt-3x"></i> 
           jQuery("#pdfpages").append(pdfpage); 
          } 
          //show modal where user selects how to organize pages with document type 
          $("#pdfSplitter").modal("show"); 
          //add pages selected to document type 
          jQuery('a.pdf-page').on('click',function(e){ 
           e.preventDefault(); 
           var thisPageID=jQuery(this).data("page-id"); 
           thisArray.push(thisPageID); 
           thisArray.sort(); 
           jQuery(this).attr("disabled",true); 
           jQuery('#pdfSplitterTable tr.active td input').val(thisArray);        
           //save selections in local array since this element does not seem to persist to when it is needed 
           var thisoption = jQuery("#pdfSplitterTable tr.active td select").val(); 


          });  

          jQuery('#btnAddDocumentRow').on('click',function(e){ 
           e.preventDefault(); 
           var originalSelID=jQuery('#pdfSplitterTable tr.original td select').attr('id'); 
           var pdfSplitterTableLen=jQuery('#pdfSplitterTable tr').length; 
           jQuery('#pdfSplitterTable tr').removeClass('active'); 
           jQuery('#pdfSplitterTable tr:last').clone().insertAfter('#pdfSplitterTable tr:last'); 
           jQuery('#pdfSplitterTable tr:last').removeClass(); 
           jQuery('#pdfSplitterTable tr:last').addClass('active'); 
           jQuery('#pdfSplitterTable tr:last td input').val(''); 
           jQuery('#pdfSplitterTable tr:last td select').attr('id',originalSelID+pdfSplitterTableLen); 
           jQuery('#pdfSplitterTable tr:last td select').attr('name',originalSelID+pdfSplitterTableLen); 
           jQuery("select[name='"+originalSelID+pdfSplitterTableLen+"']").val(0); 
           jQuery("select[name='"+originalSelID+pdfSplitterTableLen+"']").change();  
           thisArray=[]; 
          });            
        }}); 
        return true;       
       }); 

      }, 
      onSubmit: function(id,name){ 
       var fileExtension = name.substring(name.lastIndexOf('.') + 1).toUpperCase(); 
       if(fileExtension==='PDF'){      
        //jQuery('#pdfHandler').modal(); 
        return true; 
       } else { 
        alert("Please select a PDF file"); 
        return false; 
       } 
      }, 
      onSubmitted: function (id, name) { 
       //console.log("onSubmitted");     
      } 
     } 
    }); 

$(document).ready(function() { 

    jQuery('#btnUploadPDF,#btnSplitPDF').on('click',function(e){ 
     jQuery('#clickfrom').val('nav-tabs'); 
    }); 

    jQuery('#btnSplitPDF').on ('click',function(e){ 
     e.preventDefault(); 
    }); 

    jQuery("#btnUploadFiles").on('click',function(e){ 
     var uuid = jQuery("#splitter_uuid").val(); 
     var filename = jQuery("#splitter_filename").val(); 
     var userid = jQuery("#splitter_userid").val(); 

     jQuery("#pdfSplitterTable td select").each(function() { 
      var option = jQuery(this).val(); 
      var pageids = jQuery(this).closest('td').next().find('input').val(); 
      console.log("pageids: "+pageids+" and option="+option);//test this 
      //add new item to table of documents for user 
      var lastclass = jQuery("#document-checklist tr").last().attr("class"); 
      var newclass = 'even'; 
      if (lastclass=='even'){newclass = 'odd';} 
      jQuery("#document-checklist tbody") 
       .append('<tr class="'+newclass+'"><td>'+option 
       +'</td><td>Pending Review</td><td></td><td>'+today 
       +'</td><td></td><td></td><td><a href="#"></a><i class="fa fa-file-pdf-o"></i></a></td></tr>');  
      //console.log("merge files: "+JSON.stringify(pdfoptions));     

      jQuery.ajax({url: "http://52.11.64.64/ajax/common/pdfmerge.php?pdf="+filename+"&uuid="+uuid+"&pageids="+pageids+"&option="+option+"&userid="+userid, 
       success: function(mergedfile){ 
        //result is new merged filename to upload 
        console.log("merged file: "+mergedfile); 

        //HERE IS WHERE I WANT TO UPLOAD TO S3 
        jQuery("#s3-uploader").fineUploaderS3('addFiles',mergedfile); 
        jQuery("#s3-uploader").fineUploaderS3('uploadStoredFiles');    
       } 
      });  
     }); 

     manualUploader.deleteFile();  
    }); 

});//doc ready 

Thank you, Cindy

Answer 1

Множество обработчиков конечных точек конечного загрузчика могут быть определены и использованы в течение одного HTML-документ. Однако, чтобы сделать это, плагин jQuery не может использоваться из-за конфликтов пространства имен. На самом деле плагин jQuery (обертка) был включен в дорожную карту для full removal for quite some time.

Скорее всего, вы захотите использовать multiple server type "Windows Azure + Amazon S3 + Traditional" download, чтобы интегрировать как традиционные, так и Amazon S3 конечные точки на странице. Это потребует от вас определить обработчик конечных точек Amazon S3 с традиционным синтаксисом JavaScript (что на самом деле немного проще):

var uploader = new qq.s3.FineUploaderBasic({ 
    debug: true, 
    autoUpload: false, 
    request: { 
     endpoint: 'rog-zone.s3.amazonaws.com', 
     accessKey:'################' 
    }, 
    objectProperties: { 
     // Since we want all items to be publicly accessible w/out a server to return a signed URL 
     acl: "public-read" 
    }, 
    signature: { 
     endpoint: "/assets/plugins/fine-uploader/signature/endpoint.php" 
    }, 
    validation: { 
     itemLimit: 5, 
     sizeLimit: 15000000 
    }, 
    callbacks: { 
     onSubmit: function(id, name) { 
      console.log("[on submit] id:" + id + " and name:" + name); 
      return new Promise(function(resolve, reject) { 
       resolve(); 
      }); 
     }, 
     onComplete: function(id, fileName, responseJSON, xhr){ 
      console.log("[on complete]:" + id + " and filename:" + fileName); 
      var fileEl = this.getItemByFileId(id);    
     }, 
     onUpload: function(id, name, isError, responseJSON) { 
      var obj = JSON.stringify(responseJSON); 
      console.log("[on Upload] id:" + id + " and response = " + obj); 
     } 
    } 
});