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