0
219
VistasSoltar o pegar archivo en el Textarea
Quiero hacer una entrada de mensaje como esta. 
Pero tengo una pregunta sobre cómo obtener los datos del archivo, que arrastro y suelto o Ctrl+V en el área de texto para cargar. Estoy usando Riot.js y Symfony para esto.
Aquí está mi código incompleto:
<form method="post" enctype="multipart/form-data" onsubmit="{ handleFileSubmit }"> <textarea class="form-control" id="message" onpaste="{ handleFilePaste }" required> </textarea> </form> handleFilePaste(e) { e.preventDefault(); console.log(e.clipboardData.items); console.log(window.navigator.clipboard); }Pero el anterior console.log() no obtuvo ningún dato de archivo cuando copié un archivo en mi disco local y lo pegué en el área de texto. Si alguien sabe cómo hacerlo o tiene un buen enlace de muestra, por favor comparta conmigo.
Si puede, comparta la muestra de arrastrar y soltar (importante: el campo de entrada debe ser un área de texto).
espero buenas respuestas. Gracias.
1 Respuestas
Responde la pregunta0
Cuando tuve que hacer algo similar en el pasado, no adjunté el detector de eventos al formulario en sí, sino al document como se muestra en el ejemplo a continuación (que puede ejecutar y pegar algo, funciona), técnicamente no estoy seguro si funciona igual en un área de texto pero funciona en un documento, no es tan importante dónde escucha el evento de pegado, ya que luego decide qué hacer cuando detecta que se está pegando un archivo.
function handleFilePaste(e) { const items = (e.clipboardData || e.originalEvent.clipboardData).items; console.log(items); for (let index in items) { const item = items[index]; if ( item.kind === 'file' ) { return item.getAsFile(); } } } document.addEventListener('DOMContentLoaded', () => { document.onpaste = function(e){ const file = handleFilePaste(e); console.log(file); if ( !file ) { return; } } }); <form method="post" enctype="multipart/form-data" onsubmit="{ handleFileSubmit }"> <textarea class="form-control" id="message" placeholder="Paste something" required></textarea> </form>