Estoy tratando de obtener una imagen del evento de pegado de un div editable. Funciona bien en Chrome pero no funciona en Firefox. Estoy usando el siguiente código:
$(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] contiene datos de tipo text/plain en firefox mientras que es image/png en chrome. (Para cargar una imagen png) `
Acabo de tocar esto. Quizás en un momento al pegar una imagen, el primer elemento fue consistentemente el elemento de la imagen. Ese no es el caso ahora.
Ahora obtengo text/plain primero que tiene la URL de la imagen si se copia de la web. Luego text/html , y finalmente image/png por ejemplo. Por lo tanto, primero deberá encontrar el elemento correcto y luego continuar.
Esto no se ha probado y extrae el primer tipo de coincidencia de imagen. Tal vez podría extenderlo para elegir solo uno de los tipos válidos.
const data = (e.originalEvent.clipboardData||e.clipboardData); const item = [...data.items].find((i) => i.type.includes("image")); const file = item.getAsFile();