Question

I’m using filepicker.io to export an existing file (FPFile) to a given destination.
I’m using the existing FPFile as sort of a small temp file, so the export happens quickly. Then, after the export is complete, I’m, trying to write back to the file I just exported with some image data (base64 encoded).
The problem is, after I’ve written the data, the image isn’t viewable. The image doesn’t display in Firefox, Chrome, or IE.
I can actually open the image in Photoshop and it displays fine, so I know the data is being written. There just seems to be sort of error in the file after it has been written to. Maybe I’m just doing something stupid.
Here’s my code:

var fpfile = { url: 'https://www.filepicker.io/api/file/ermKMZgVSu2GCEouu4Lo',
  filename: this.curFile.name, mimetype: 'image/jpeg', isWriteable: true};

  filepicker.exportFile(
    fpfile,
    function(FPFile){
        var data = canvas.toDataURL('image/jpeg');
        writeData(FPFile, data);
    }
  );

  function writeData(file, data){
    filepicker.write(file, data,
      {
        base64decode: true
      },
      function(FPFile){
        console.log("Write successful:", FPFile.filename);
      },
      function(FPError) {
        console.log(FPError.toString());
      },
      function(progress) {
        console.log("Loading: "+progress+"%");
      }
    );
  }

Answer 1

When you use the toDataURL call, you include the prefix, for instance

data:image/png;base64

This needs to be stripped from the actual contents of the image before doing base64 decoding