Using Fine Uploader

Thu Aug 10, 2017 6:49 pm

I am trying to implement the Fineuploader component. ( fineuploader.com)

I imported the fine-uploader.js file that contains the following initial lines:

// Fine Uploader 5.14.3 - (c) 2013-present Widen Enterprises, Inc. MIT licensed. http://fineuploader.com
(function(global) {
var qq = function(element) {...

and I am initiating the fineuploader using the following javascript code in the Page Load event:

var uploader = new qq.FineUploader({
element: document.getElementById("Upload_uploader")
})

Code: Select all

     var uploader = new qq.FineUploader({ 
         debug: true, 
         element: document.getElementById('Upload_uploader'), 
         request: { 
             endpoint: '/uploads' 
         }, 
         deleteFile: { 
             enabled: true, 
             endpoint: '/uploads' 
         }, 
         retry: { 
            enableAuto: true 
         } 
     });

But, I am getting the following error message on console:

ReferenceError: Can't find variable: qq

the line var uploader = new qq.FineUploader initiates the FileUploader, but it I think it is not seeing qq variable in the fine-uploader.js.

Any idea?

Thu Aug 10, 2017 7:17 pm

I removed all the .js files and started again....

Doing more tests...let you know the results...

Fri Aug 11, 2017 8:51 am

Hello Joni,

Please check is variable qq global? It seems available only in the anonym function in the custom JS file.

Fri Aug 11, 2017 8:50 pm

The following code (derived from fineuploader.com examples) works on a stand alone page and gives no error:

"

Code: Select all

 <!-- Fine Uploader Gallery CSS file 
 ====================================================================== -- 

 <!-- Fine Uploader JS file 
 ====================================================================== -- 

 <!-- Fine Uploader Gallery template 
 ====================================================================== -- 

             span class="qq-upload-drop-area-text-selector"/span 

             Upload a file 

         span class="qq-drop-processing-selector qq-drop-processing" 
             spanProcessing dropped files.../span 
             span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"/span 
         /span 
         ul class="qq-upload-list-selector qq-upload-list" 
             li 
                 span class="qq-upload-status-text-selector qq-upload-status-text"/span 

                 span class="qq-upload-spinner-selector qq-upload-spinner"/span 

                     img class="qq-thumbnail-selector"  

                 X 

                     span class="qq-btn qq-retry-icon"/span 
                     Retry 

                         span class="qq-upload-file-selector qq-upload-file"/span 
                         span class="qq-edit-filename-icon-selector qq-edit-filename-icon"/span 

                     span class="qq-upload-size-selector qq-upload-size"/span 

                         span class="qq-btn qq-delete-icon"/span 

                         span class="qq-btn qq-pause-icon"/span 

                         span class="qq-btn qq-continue-icon"/span 

             /li 
         /ul 

                 Close 

                 No 
                 Yes 

                 Cancel 
                 Ok 

 Fine Uploader Gallery View Demo 

 <!-- Fine Uploader DOM Element 
 ====================================================================== -- 

 <!-- Your code to create an instance of Fine Uploader and bind to the DOM/template 
 ====================================================================== --

"

Fri Aug 11, 2017 9:24 pm

I understand that appery uses the FineUploader for uploading files:

How did you implement that?

Sat Aug 12, 2017 7:09 am

Unfortunately, this is outside the scope of our support. Please search online for an appropriate solution.

Sun Aug 13, 2017 12:31 pm

Ok...I found the problem.

ol
liAppery HTML component does not decodes HTML comments correcty./li

li HTML Templates inside an HTML component with the tag does not place the HTML code inside the ./li

The following workflow should work when you have to insert any HTML code or script code into your page./ol

Solution:

ol
liIn the Project Tab: Create a New Javascript fine-uploader script. Import the fine-uploader.js to this script./li

liIn the Source Tab: import the fine-uploader.js.map into the js directory./li

liAppend into the head tag at runtime using the HTML template using this code:

code$("head").append('<script type="text/template" id="qq-template-gallery"...>
/code

/li

li
Put this code into a Run Javascript Action at the Load event of your page.

This will insert the HTML Template inside the tag. You will not see it using the View Source Code of your browser, but you can see it with browser inspector.
/li

liPut the Fine Uploader start code into a second Load event of your page:
code
var galleryUploader = new qq.FineUploader({

// The div element where fine Uploader will render
element: document.getElementById("your HTML component name here with the div option select"),

Code: Select all

         template: 'qq-template-gallery', 
         request: { 
             endpoint: 'endpoint&#46;php' &#47;&#47; the php script that uploads the file you want to your site&#46; See Fine Uploader doc for other servers options 
         } 
     });

/code

/li

ol

This will make the Fine Uploader work inside Appery.

Run Test to test your app, you should see this screen.

/ol/ol