javascriptamazon-s3filepicker.io

Is it possible to store a file without using the pick method?


According to the filestack documentation you are supposed to call the pick method prior to store

Save files directly to your S3 bucket (or other storage). This works for both Blobs from a filepicker.pick call or for DOM File objects from an <input type="file"/>

Though the document states this, you can call store() without pick()


It looks like the pick function shows the interface to the user, which I do not want. I just want to upload a canvas image they've edited as a variable in my .blob, is this 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));
        }
      );
  }

Calling postFile only appears to work if I define a url instead of a blob. With a blob it throws:

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

Solution

  • So, it looks like you are trying to pass the filepicker.store() method a canvas data url. This is not something the API can process.

    It will take a raw base64 string (that you would also need to pass the base64decode parameter with), a standard file input, a DOM File , or the response from a previous Filestack transaction (fpFile object).

    The canvas data url is probably something like this: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="

    What the Filestack API expects would be: "R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="

    Here is an example that uses store to save a base64 string. 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>