How To Upload Base64 Image Resource With Dropzone?

I'm trying to upload generated client side documents (images for the moment) with Dropzone.js. // .../init.js var myDropzone = new Dropzone('form.dropzone', { autoProcessQueue

Solution 1:

Finally i found a working solution without creating canvas :

function dataURItoBlob(dataURI) {
    'use strict'
    var byteString, 
        mimestring 

    if(dataURI.split(',')[0].indexOf('base64') !== -1 ) {
        byteString = atob(dataURI.split(',')[1])
    } else {
        byteString = decodeURI(dataURI.split(',')[1])
    }

    mimestring = dataURI.split(',')[0].split(':')[1].split(';')[0]

    var content = new Array();
    for (var i = 0; i < byteString.length; i++) {
        content[i] = byteString.charCodeAt(i)
    }

    return new Blob([new Uint8Array(content)], {type: mimestring});
}

And the save function :

function save(dataURI) {

    var blob = dataURItoBlob(dataURI);
    myDropzone.addFile(blob);

}

The file appears correctly in dropzone and is successfully uploaded. I still have to work on the filename (my document is named "blob").

The dataURItoBlob function have been found here : Convert Data URI to File then append to FormData

[EDIT] : I finally wrote the function in dropzone to do this job. You can check it here : https://github.com/CasperArGh/dropzone And you can use it like this :

var dataURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAmAAAAKwCAYAAA...';
myDropzone.addBlob(dataURI, 'test.png');

Solution 2:

I can't comment currently and wanted to send this to you.

I know you found your answer, but I had some trouble using your Git code and reshaped it a little for my needs, but I am about 100% positive this will work for EVERY possible need to add a file or a blob or anything and be able to apply a name to it.

Dropzone.prototype.addFileName = function(file, name) {
    file.name = name;
  file.upload = {
    progress: 0,
    total: file.size,
    bytesSent: 0
  };
  this.files.push(file);
  file.status = Dropzone.ADDED;
  this.emit("addedfile", file);
  this._enqueueThumbnail(file);
  return this.accept(file, (function(_this) {
    return function(error) {
      if (error) {
        file.accepted = false;
        _this._errorProcessing([file], error);
      } else {
        file.accepted = true;
        if (_this.options.autoQueue) {
          _this.enqueueFile(file);
        }
      }
      return _this._updateMaxFilesReachedClass();
    };
  })(this));
};

If this is added to dropzone.js (I did just below the line with Dropzone.prototype.addFile = function(file) { potentially line 1110.

Works like a charm and used just the same as any other. myDropzone.addFileName(file,name)!

Hopefully someone finds this useful and doesn't need to recreate it!

Solution 3:

1) You say that: "Once the client have finished his job, he just have to click a save button which call the save function:"

This implies that you set autoProcessQueue: false and intercept the button click, to execute the saveFile() function.

$("#submitButton").click(function(e) {
    // let the event not bubble up
    e.preventDefault();
    e.stopPropagation();
    // process the uploads
    myDropzone.processQueue();
});

2) check form action

Check that your form action="/upload" is routed correctly to your SF controller & action.

3) Example Code

You may find a full example over at the official Wiki

4) Ok, thanks to your comments, i understood the question better:

"How can i save my base64 image resource with dropzone?"

You need to embedd the image content as value

// base64 data
var dataURL = canvas.toDataURL();

// insert the data into the form
document.getElementById('image').value = canvas.toDataURL('image/png');
//or jQ: $('#img').val(canvas.toDataURL("image/png"));

// trigger submit of the form
document.forms["form1"].submit();

• You might run into trouble doing this and might need to set the "origin-clean" flag to "true". see http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#security-with-canvas-elements
• how to save html5 canvas to server