The issue arises from the different types of data being pasted. One type comes in as a link in text format, while the other is in the form of a file. It is crucial to address each scenario accordingly by detecting the type of data and branching out logically from there.
Chances are, you will need to convert these elements into a blob format. Luckily, for images, the browser handles this conversion automatically. You can find plenty of sample code that demonstrates how to convert a base64 encoded image into a blob, so you should be covered in that aspect as well. Of course, you will need to account for cases where the pasted data is not base64 encoded image urls, but rather random, irrelevant text mistakenly copied by the user.
onPaste(e: ClipboardEvent) {
const clipboardData = e.clipboardData || (window as any).clipboardData;
const items: DataTransferItem[] = Array.from(clipboardData.items);
const textData = items.find(x => x.type === 'text/plain');
const imageData = items.find(x => /image/i.test(x.type) );
let blob$: Observable<Blob>;
if (imageData) {
blob$ = of(imageData.getAsFile());
}
else if (textData) {
// bindCallback throws error when passing textData.getAsString directly
const callbackFunc = x => textData.getAsString(x);
blob$ = bindCallback(callbackFunc)().pipe(
tap(x => console.log(x)),
map(/** convert to blob **/)
);
}
else {
blob$ = of(undefined);
}
blob$.pipe(/* do stuff with your blob. */).subscribe();
}