How to load base64 image resource from dropzone?

Question

I am trying to upload documents created on the client side (images currently) using Dropzone.js .

// .../init.js

var myDropzone = new Dropzone("form.dropzone", {
    autoProcessQueue: true
}); 

Once the client has finished his work, he just needs to click the save button, which calls the save function:

// .../save.js

function save(myDocument) {

    var file = { 
        name: 'Test',
        src: myDocument,
    };

    console.log(myDocument);

    myDropzone.addFile(file);
}

The .log () console will return the contents of my document to me

 data:image/png;base64,iVBORw0KGgoAAAANS...

At this point, we see that the progress bar is loading the document into the forwarding zone, but the download failed.

Here is my (standard dropzone) HTML form:

<form action="/upload" enctype="multipart/form-data" method="post" class="dropzone">
    <div class="dz-default dz-message"><span>Drop files here to upload</span></div>
    <div class="fallback">
        <input name="file" type="file" />
    </div>
</form>

I have a Symfony2 controller that receives a mail request.

// Get request
$request = $this->get('request'); 

// Get files
$files = $request->files;

// Upload
$do = $service->upload($files);

Downloading from dropzone (by dragging or clicking) works, and loading successfully, but using the myDropzone.addFile () function returns me an empty object in my controller:

var_dump($files);

return

object(Symfony\Component\HttpFoundation\FileBag)#11 (1) {
  ["parameters":protected]=>
  array(0) {
  }
}

, var . JS- (var img = new Image()...), - .

!

Answer 1

, :

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});
}

:

function save(dataURI) {

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

}

dropzone . ( "blob" ).

dataURItoBlob : URI , FormData

[EDIT]: , , dropzone . : https://github.com/CasperArGh/dropzone :

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

Answer 2

.

, , Git , 100% , blob .

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));
};

dropzone.js( Dropzone.prototype.addFile = function(file) { line 1110.

, . myDropzone.addFileName(file,name)!

, - !

Answer 3

1) : " , " ", :"

, autoProcessQueue: false , saveFile().

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

2)

, action="/upload" SF- .

3)

Wiki

4) , , :

" base64 dropzone?"

// 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 may be able to do this and you may 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 on server