TypeError: target.onload is not a function

[hirenalken]

Type of issue

Bug report

Uploader type

S3

Fine Uploader version 5.14.2

Exact steps required to reproduce the issue

For example:

1. Using s3.fine-uploader.core.js
2. Creating own UI from scratch and using img element as container for image preview

Error

core.es5.js:1085 ERROR TypeError: target.onload is not a function
    at s3.fine-uploader.core.js:4151
    at qq.Promise.then (s3.fine-uploader.core.js:709)
    at s3.fine-uploader.core.js:4148
    at MegaPixImage.render (s3.fine-uploader.core.js:4153)
    at Array.<anonymous> (s3.fine-uploader.core.js:4119)
    at s3.fine-uploader.core.js:4104
    at ZoneDelegate.invokeTask (zone.js:424)
    at Object.onInvokeTask (core.es5.js:4136)
    at ZoneDelegate.invokeTask (zone.js:423)
    at Zone.runTask (zone.js:191)

[rnicholus]

Please show your code

[hirenalken]

I am using this with angular 2. insalled fineuploader via npm.

To import
import qq from 'fine-uploader/lib/core/s3';

ngOnInit() {
    this.setAlbumModal();
    let browsedImages: BrowsedImage[] = [];
    let instance = this;

 this.uploader = new qq.s3.FineUploaderBasic({
      button: document.getElementById('upload_image'),
      debug: false,
      autoUpload: false,
      multiple: true,
      validation: {
        allowedExtensions: ['jpeg', 'jpg', 'png', 'gif'],
        sizeLimit: 5120000 // 50 kB = 50 * 1024 bytes
      },
      region: 'us-west-2',
      request: {
        endpoint: 'https://xxxxx.s3.amazonaws.com/',
        accessKey: 'XXXXXXXXXXXX'
      },
      signature: {
        endpoint: 'http://xxxxxxxxxxxxxxx/s3_signature/',
        // version: 4,
      },
      uploadSuccess: {
           endpoint: 'http://localhost:3000?success=true'
       },    
      cors: {
        expected: true,
        sendCredentials: true
      },
      callbacks: {
        onSubmit: function (id, fileName) {
          console.log("ohh wow");
          instance.browsedImages.push({
            id: id,
            fileName: fileName
          });

          console.log(instance.browsedImages);
          // passing data to child component for display. which is a modal component
          // imageUploadModal referes to child modal component
          instance.imageUploadModal.browsedImages = instance.browsedImages;
          instance.imageUploadModal.open();
           instance.imageUploadModal.drawImagePreview();          
        },      
       
        },
      
      }
    });

}

below is the method which is used for preview in modal compoent. This method is part of imageUploadModal component.

public drawImagePreview() {
         this.ref.detectChanges();
         for (let i = 0 ; i < this.browsedImages.length; i++) {
                //  let imgElement = $('#preview-img-' + this.browsedImages[0].id);

                   let imgElement = this.elRef.nativeElement.querySelector('#preview-img-' + this.browsedImages[i].id);
                 console.log('preview-img-' + this.browsedImages[i].id);
                 console.log(imgElement);
                 this.fineUploader.drawThumbnail(this.browsedImages[i].id, imgElement, null, false);
         }
     }

Above code successfully previews images on modal. But in the console it generates target.onload() error.