'Firefox treating pasted image from clipboard as a string instead of file
I am trying to get image from on paste event from a contenteditable div. It is working fine in chrome but isn't working in firefox. I am using the following code:
$(window).on("paste", function(e) {
const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
if(e.originalEvent.clipboardData.items.length!=0)
{
let file = e.originalEvent.clipboardData||e.clipboardData).items[0].getAsFile();
var upload_url = "{% url 'api:v2:images:upload' %}?format=json";
if (file)
{
var fileType = file['type'];
if (validImageTypes.includes(fileType)) {
var data = new FormData();
data.append('qqfile', file);
$.ajax({
type: 'POST',
processData: false, // important
contentType: false, // important
data: data,
url: upload_url,
dataType : 'json',
async: false,
success: function(jsonData){
var new_tag = "<img src=\""+jsonData.url+"\" data-verified=\"redactor\" data-save-url=\""+jsonData.filelink+"\" style=\"opacity: 0.5;\">";
setTimeout(insertTextAtCaret(new_tag),0);
}
});
}
e.preventDefault();
}
}
});
e.originalEvent.clipboardData.items[0] contains data of type text/plain in firefox whereas, it is image/png in chrome. (For a png image upload) `
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
