1

I am converting a base64 image string to canvas and then passing it to FineUploader but it throws an error. here is my coce:

dataURItoCanvas(uploadValue.base64String,
  function(canvas) {
    console.log(canvas);
    $('#uploader').fineUploader('addFiles', canvas);
  });

function dataURItoCanvas(dataURI, onsuccess) {
  var img = new Image();

  img.onerror = onerror;
  img.onload = function onload() {
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

    if (onsuccess) {
      onsuccess(canvas);
    }
    //canvas.toBlob(onsuccess);
  };
  img.src = dataURI;
  img.style = "display:none;";
  document.body.appendChild(img);
}

And it throws this error:

[FineUploader 4.2.2] Received 0 files or inputs.
jquery.fineuploader-4.2.2.min.js:16 Uncaught TypeError: Cannot read property 'file' of undefined
    at qq.FineUploader._prepareItemsForUpload (jquery.fineuploader-4.2.2.min.js:16)
    at qq.FineUploader._prepareItemsForUpload (jquery.fineuploader-4.2.2.min.js:17)
    at qq.FineUploader.addFiles (jquery.fineuploader-4.2.2.min.js:16)
    at e.fn.init.j (jquery.fineuploader-4.2.2.min.js:19)
    at HTMLDivElement.<anonymous> (jquery.fineuploader-4.2.2.min.js:19)
    at Function.each (VM259 jquery-1.10.2.min.js:4)
    at e.fn.init.each (VM259 jquery-1.10.2.min.js:4)
    at e.fn.init.a.fn.fineUploader (jquery.fineuploader-4.2.2.min.js:19)
    at 59?mobile=true&usernameOrEmail=idrees@fi.ae&password=password&v=1491980632786289328:4526
    at HTMLImageElement.onload (59?mobile=true&usernameOrEmail=idrees@fi.ae&password=password&v=1491980632786289328:4556)
_prepareItemsForUpload @ jquery.fineuploader-4.2.2.min.js:16
_prepareItemsForUpload @ jquery.fineuploader-4.2.2.min.js:17
addFiles @ jquery.fineuploader-4.2.2.min.js:16
j @ jquery.fineuploader-4.2.2.min.js:19
(anonymous) @ jquery.fineuploader-4.2.2.min.js:19
each @ VM259 jquery-1.10.2.min.js:4
each @ VM259 jquery-1.10.2.min.js:4
a.fn.fineUploader @ jquery.fineuploader-4.2.2.min.js:19
(anonymous) @ 59?mobile=true&usernameOrEmail=idrees@fi.ae&password=password&v=1491980632786289328:4526
onload @ 59?mobile=true&usernameOrEmail=idrees@fi.ae&password=password&v=1491980632786289328:4556

With Blob i am getting same error too:

dataURItoCanvas(uploadValue.base64String, function (canvas) {
                                    console.log(canvas);
                                    canvas.toBlob(function (blob) {
                                        $('#uploader').fineUploader('addFiles', { files: [blob] });
                                    });
                                });
Idrees Khan
  • 7,702
  • 18
  • 63
  • 111
  • @Kaiido https://docs.fineuploader.com/branch/master/api/methods.html#addFiles – Idrees Khan Apr 12 '17 at 07:22
  • Can you add your call to this addFiles method in the question ? And since it does accept Blobs, I still don't see why you pass through a canvas though... http://stackoverflow.com/questions/12168909/blob-from-dataurl – Kaiido Apr 12 '17 at 07:30
  • @DotNetDreamer I tried debugging your code, I can't really test the upload but it seems to be working. However, I'm using "Fine Uploader 5.14.2" and not 4.2.2. The docs you linked are for this latest version. Have you tried it with this version? – arc Apr 12 '17 at 07:30
  • @arcs i am getting warning with version number as well `[FineUploader 4.2.2] [object Object] is not a File or INPUT element! Ignoring!` – Idrees Khan Apr 12 '17 at 07:34
  • @arcs the issue was outdated version which i had. I updated the library now its working fine `[Fine Uploader 5.14.2] Received 1 files.` – Idrees Khan Apr 12 '17 at 07:44

1 Answers1

3

As you can see in their docs addFiles from version 4.2.2 does not support the CanvasWrapper.

You should be fine when you update to the latest version (above 5.x.x)

As an alternative. addBlobs() is in 4.x.x (instead of fineUploader('addFiles', { files: [] }). So you could do something like 

canvas.toBlob(function(blob) {
   $('#uploader').addBlobs( [blob] )
})
arc
  • 4,553
  • 5
  • 34
  • 43