Uncaught Error: Cannot find template script at ID

问题:

I just downloaded my new "custom build" for Fine Uploader 4.0. My page was working fine on 3.9 which I installed and setup a few weeks ago.

My Code:

Click "Select Files" and pick the files you would like to upload.  Then click "Upload Now" to start the transfer.
<hr>
<div id="fineuploader-s3"></div>
<div id="triggerUpload" class="btn btn-primary" style="margin-top: 10px;">
    <i class="icon-upload icon-white"></i> Upload now
</div>

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="http://xxxxxxx/fineuploader-4.0.3/custom.fineuploader-4.0.3.js"></script>
    <script>


      $(document).ready(function () {

          var manualuploader;

          function check_done() {
              if (allUploadsCompleted() === true) {
                  var successUrl = "http://xxxxxxxx/FineUploadComplete?ftpSessionId=xxxxxx";
                  $.get( successUrl );
                  alert('Your upload is complete.');
                  window.top.location = "xxxxxxxx";
              } 
           }

           function allUploadsCompleted() {
               // If and only if all of Fine Uploader's uploads are in a state of completion will this function fire the provided callback.
               var inProgress = manualuploader.fineUploader('getInProgress');
               if (inProgress === 0) {
                   var failedUploads = manualuploader.fineUploader('getUploads', { status: qq.status.UPLOAD_FAILED });
                   if (failedUploads.length === 0) {
                       return true;
                   }
                }        
                return false;
            }


            manualuploader = $('#fineuploader-s3').fineUploaderS3({
                debug: true,
            autoUpload: false,
                editFilename: {
                enabled: true
            },
            element: $('#fineuploader-s3')[0],
            text: {
                uploadButton: '<i class="icon-plus icon-white"></i> Select Files'
                },
                cors: {
                       expected: true,
                       sendCredentials: true
                },
                request: {
                    endpoint: "xxxxx",
                    accessKey: "xxxx"
                },
                signature: {
                    endpoint: "http://xxxxxx/S3UploadSig"
                },
        objectProperties: {
                key:  function (fileId) { return "xxxx" + '/' + $("#fineuploader-s3").fineUploader("getName",fileId); } 
            },
                retry: {
                        showButton: true
                },
                chunking: {
                        enabled: true
                },
                resume: {
                        enabled: true
                },
                deleteFile: {
                        enabled: false
                },
                callbacks: {
                    onStatusChange: function (id, oldStatus, newStatus) {
                        // This will check to see if a file that has been cancelled
                        // would equate to all uploads being 'completed'.
                        if (newStatus === qq.status.CANCELLED) {
                            check_done();
                        }     
                    },
                    onComplete: check_done
                },
                validation: {
            allowedExtensions: [xxxxxx]
                }
          });

    $('#triggerUpload').click(function() {
            manualuploader.fineUploader('uploadStoredFiles');
        });

      });
    </script>

I'm getting the following error in the java console...

Uncaught Error: Cannot find template script at ID 'qq-template'!

@ custom.fineuploader-4.0.3.js:4915

So how do I get around this error and are there other changes I need to make to work on 4.0?

Thanks, J

回答1:

Fine Uploader 4.0 brought about a big improvement in templating. This required breaking changes, thus the major version number was incremented.

In short, the template and fileTemplate options were moved out of the JavaScript file. You must now define your template in your document/markup. This has a number of advantages. The biggest being that this makes it much more intuitive to customize the Fine Uploader UI template. Default templates are provided with the build. You can read more about templating in the styling guide, along with all other breaking changes in 4.0 in the "Upgrading to 4.x" guide.

Note that the fileTemplate option was removed. The template option now, by default, points to an element that contains your template. By default, it expects this element to have an ID of "qq-template". You can override this and pass an actual element or a different ID. It's common for your template to be contained in a <script> tag w/ a type of "text/template", but this is not required.

回答2:

as stated in docs, you should use code like this in the page:

https://pastebin.com/raw/QCxYp0t3

p.s. HOWEVER, I see some regression (as opposed to the above answer ), because we have to manually put those big template codes/blocks, instead of just embedding only the .js file on-the-fly (like jQuery-UI or other notorious libraries do).

at least, the developer should have kept the feature for them, who wants that.