Est-il possible de stocker un fichier sans utiliser la méthode pick?

Question

Selon la documentation filestack vous êtes censé appeler la méthode pick avant store

Enregistrer les fichiers directement sur votre seau S3 (ou autre stockage). Cela fonctionne pour les deux blobs d'un appel filepicker.pick ou pour les objets de fichier DOM à partir d'un <input type="file"/>

Bien que le document indique, vous pouvez appeler magasin() sans choix()

---

Il semble que la fonction pick montre l'interface à l'utilisateur, ce que je ne veux pas. Je veux juste télécharger une image de toile qu'ils ont éditée comme variable dans mon .blob, est-ce possible?

var canvasImage = canvas.toDataURL("image/png"); 
var blob = { 
    mainFile: canvasImage, 
    filename: this.file.name + '_edited', 
    isWriteable: true, 
    }; 

postFile(blob) { 
     var _this = this; 
     this.filepickerService.store(blob, 
     { 
      mimetype: "text/plain", 
      location: "S3", 
      path: "muhPath" 
      container: _this.appConfig.s3Bucket 
     }, 
     function(new_blob){ 
      console.log(JSON.stringify(new_blob)); 
     } 
    ); 
    } 

appel postFile ne semble fonctionner que si je définir une URL au lieu d'un blob. Avec un blob, il lance:

Cannot store given input: " + input + ". Not a string, file input, DOM File, or FPFile object. 

Answer 1

Alors, il semble que vous essayez de transmettre la méthode filepicker.store() une URL de données de toile. Ce n'est pas quelque chose que l'API peut traiter.

Il faudra une chaîne base64 brute (que vous devrez également passer avec le paramètre base64decode), une entrée de fichier standard, a DOM File, ou la réponse d'une transaction Filestack précédente (objet fpFile).

La toile url de données est probablement quelque chose comme ceci: "data: image/gif; base64, R0lGODlhAQABAIAAAAAAAP /// ywAAAAAAQABAAACAUwAOw =="

Qu'est-ce que l'API attend serait Vignettes Fichiers: « R0lGODlhAQABAIAAAAAAAP /// ywAAAAAAQABAAACAUwAOw == "

Voici un exemple qui utilise store pour enregistrer une chaîne base64. https://jsfiddle.net/amione/tq2zqtg1/

var data = "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"; 
 

 
Here is an example 
 

 
filepicker.setKey("AtpK5JtiRgm3nWbe1vlI1z"); 
 

 
filepicker.store(
 
    data, { 
 
    base64decode: true, 
 
    filename: 'image.png' 
 
    }, 
 
    function(Blob) { 
 
    console.log("Store successful:", JSON.stringify(Blob)); 
 
    addLink(Blob); 
 
    }, 
 
    function(FPError) { 
 
    console.log(FPError.toString()); 
 
    }, 
 
    function(progress) { 
 
    console.log("Loading: " + progress + "%"); 
 
    } 
 
); 
 

 
function addLink(data) { 
 
    $("#results") 
 
    .append(
 
     '<li><a target="_blank" href="' + 
 
     data.url + '">' + data.filename + '</a></li>' 
 
    ); 
 
}

<script src="https://api.filestackapi.com/filestack.js"></script> 
 
<ul id="results"> 
 

 
</ul>