Comment télécharger base64 ressource d'image avec dropzone?

Je suis en train de télécharger généré côté client des documents (images pour le moment) avec Dropzone.js.

//.../init.js

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

Une fois pour le client d'avoir fini son travail, il suffit de cliquer sur un bouton "enregistrer" qui appel la fonction de sauvegarde :

//.../save.js

function save(myDocument) {

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

    console.log(myDocument);

    myDropzone.addFile(file);
}

La console.journal (le) est-il bien me rendre le contenu de mon document

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

À ce point, on peut voir la barre de progression de téléchargement du document dans la zone de dépôt, mais le téléchargement a échoué.

Voici mon (standart dropzone) formulaire HTML :

<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>

J'ai eu une Symfony2 contrôleur qui reçoivent la requête post.

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

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

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

Téléchargement à partir du dropzone (par glisser-déposer ou de la souris) est de travail et la prise en charge sont réussie mais à l'aide de la myDropzone.addFile() de retour de la fonction de moi un objet vide dans mon controller :

var_dump($files);

retour

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

Je pense que je n'ai pas configuré correctement mon fichier var dans la fonction enregistrer.
Je tryied pour créer JS image (var img = new Image() ...) mais sans succès.

Merci pour votre aide !

Jetez un oeil à ce bundle: github.com/1up-lab/OneupUploaderBundle. Il résout le problème que vous rencontrez et beaucoup d'autres, vous aurez probablement à l'avenir.
Désolé mais aucune ne l'est pas. Mon dropzone est non fonctionnalité que mon contrôleur et l'action. C'est l'utilisation de la addFile fonction qui n'est pas de travail, car je travaille avec une entrée contenant la source de l'image (créer dynamiquement en js) et je ne sais pas comment le transformer pour être accepté par le addFile fonction.

OriginalL'auteur ArGh | 2014-04-01

  1. 16

    J'ai enfin trouvé une solution qui fonctionne sans la création de la toile : 

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

    Et la fonction de sauvegarde :

    function save(dataURI) {

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

}

    Le fichier s'affiche correctement dans dropzone et a été téléchargé avec succès.
    Je dois encore travailler sur le nom de fichier (mon document nommé "blob").

    La dataURItoBlob de fonction ont été trouvés ici : Convertir des Données URI du Fichier puis ajouter à FormData

    [MODIFIER] : j'ai enfin écrit la fonction dans dropzone pour faire ce travail. Vous pouvez le vérifier ici : https://github.com/CasperArGh/dropzone
    Et vous pouvez l'utiliser comme ceci :

    var dataURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAmAAAAKwCAYAAA...';
myDropzone.addBlob(dataURI, 'test.png');
    simplement en ajoutant blob.name='quirks'; avant addFile(blob); a fonctionné pour moi d'ajouter un nom de fichier. thx
    Vous devriez proposer une PR sur le dépôt officiel pour vous addBlob méthode.
    Vous pouvez également utiliser filer.js pour datauri blob: github.com/ebidel/filer.js/blob/master/src/filer.js#L137

    OriginalL'auteur ArGh

  2. 3

    Je ne peux pas commenter actuellement et je voulais l'envoyer à vous.

    Je sais que vous avez trouvé votre réponse, mais j'ai eu quelques difficultés à l'aide de votre code Git et remodelé un peu pour mes besoins, mais je suis sur à 100% positif, cela fonctionne pour TOUS les besoins possibles pour ajouter un fichier ou un blob ou quoi que ce soit et être capable d'appliquer un nom.

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

    Si c'est ajouté dropzone.js (je l'ai fait juste en dessous de la ligne avec Dropzone.prototype.addFile = function(file) { potentiellement ligne 1110.

    Fonctionne comme un charme et a utilisé la même que dans tout autre. myDropzone.addFileName(file,name)!

    J'espère que quelqu'un le trouve utile et n'a pas besoin de recréer!

    avant que quiconque demande, j'ai collé des gouttes de captures d'écran (actuellement uniquement sur IE), mais n'ont pas tenté de l'utiliser pour télécharger d'autres types de fichiers.

    OriginalL'auteur Cayce K

  3. 0

    1) Vous dites que: "une Fois que le client a terminé son travail, il suffit de cliquer sur un bouton "enregistrer" qui appel la fonction de sauvegarde:"

    Cela implique que vous définissez autoProcessQueue: false et intercepter le clic sur le bouton, pour exécuter la saveFile() fonction.

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

    2) formulaire de vérification d'action

    Vérifier que votre formulaire action="/upload" est acheminé correctement sur votre contrôleur SF & action.

    3) Exemple De Code

    Vous pouvez trouver un exemple complet sur les Wiki

    4) Ok, merci pour vos commentaires, j'ai compris la question mieux:

    "Comment puis-je enregistrer mon image en base64 des ressources avec dropzone?"

    Vous avez besoin de reprendre ce contenu de l'image en tant que valeur

    //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();
    Merci pour votre réponse. 1) 2)
    1) autoProcessQueue est actuellement en "vrai". J'ai un unique dropzone qui permettent à l'utilisateur de faire glisser et de déposer / cliquez sur télécharger mais également un éditeur pour créer de nouvelles images. J'ai besoin de autoProcessQueue pour être "vrai" : la création d'une nouvelle image devrait pousser le fichier créé dans la file d'attente qui est immédiatement transféré que si il n'y a plus de travail.
    2) Comme je l'ai dit : en les Téléchargeant à partir de la dropzone (par glisser-déposer ou de la souris) est de travail et les reprises de succès, donc ma route / controller / action sont correctement configurés . Uniquement à l'aide de la fonction javascript myDropzone.addFile() renvoie moi un objet vide dans mon contrôleur.
    3) Cet exemple ne m'aide pas :). Mon principal problème est de quel type d'objet dois-je passer à la addFile() fonction que j'ai une chaîne de caractères en tant que source de l'image
    addFile() accepte les noms de fichiers github.com/enyo/dropzone/blob/master/lib/dropzone.js#L805 Ce que vous avez est une ressource d'image de la chaîne.

    OriginalL'auteur Jens A. Koch