2

I'm trying to upload an image that the user gives me via copy and paste and I am wondering how to upload such data to Filepicker/Filestack.

My code so far:

var pasteHandler = function (event) {
     // turned out to be needed because of jquery 
     if (event.originalEvent !== undefined) {
         event = event.originalEvent;
     }

     var clipboardData = event.clipboardData;
     var items = clipboardData ? clipboardData.items : [];
     _.each(items, function (clipboardItem) {
         if (clipboardItem.kind == 'file' && clipboardItem.type.indexOf('image/') !== -1) {
             var blob = clipboardItem.getAsFile();
             var reader = new FileReader();
             reader.onload = function (event) {
                    var fileUrl = event.target.result;
                    /* I get a fileUrl here that I can assign to an img element and see the result */
                    filepicker.store(
                        /*what should I send here?*/,
                        function(Blob){
                            console.log(JSON.stringify(Blob));
                        }
                    );
             };
             reader.readAsDataURL(blob)
        }
   });
};

Can somebody tell me what to send to filepicker/filestack there? Everything I tried so far resulted in this error: "Uncaught FilepickerException: Cannot store given input: [object DataTransferItem]. Not a string, file input, DOM File, or FPFile object."

Apparently I can't use an input field with the type "file" as there is no way to set the value of the input field to be the pasted file.

What is a DOM File here? I tried using new File(['testData'], 'test.txt') without success. I get the following error: "FPError 122: The Remote URL could not be reached. For help, see https://developers.filepicker.io/answers/jsErrors/122"

Which makes me think maybe filepicker.store() is not the right choice for this task as it seems to be expecting an url which I don't have yet (I mean that's what I'm trying to do, right? Getting an url for the uploaded file FROM filepicker).

In the Filepicker API itself I only find examples that use another filepicker method before and therefore already have a valid url for the file.

Thanks in advance, Jesse :)

Jesse
  • 422
  • 3
  • 19

0 Answers0