Así que noté que cada vez que pego algún archivo, si tengo más de 1 archivo en el área de mi portapapeles, solo pega 1 archivo, los demás mi código simplemente no se procesa.
Aquí está el fragmento para reproducir, incluso si tengo más de 1 archivo en el portapapeles, solo inserta 1 elemento en la matriz. Estoy tratando de averiguar qué está pasando. (usar archivos de imagen para probar).
const inputFileToBase64 = file => new Promise((resolve, reject) => { const reader = new FileReader() reader.readAsDataURL(file) reader.onload = () => resolve(reader.result) reader.onerror = error => reject(error) }) const getBase64Files = async (items) => { const base64Files = [] for (const item of items) { const base64 = await inputFileToBase64(item.getAsFile()) base64Files.push(base64) } return base64Files } document.addEventListener('paste', async (event) => { console.log('pasted') const items = event.clipboardData.items const files = await getBase64Files(items) console.log(files) }) PASTE HERELos items de DataTransferItemList parecen consumirse tan pronto como el bucle de eventos lo permita; no espera a que un FileReader lo lea. Entonces, cuando se lee el primer archivo, items están vacíos.
Si permite que la cola de tareas haga su trabajo, incluso con un setTimeout de 0, perderá todos los archivos:
const items = event.clipboardData.items await new Promise(resolve => setTimeout(resolve, 0)) //wait 0ms const files = await getBase64Files(items) //no items, no files y eso también está sucediendo con la versión de trabajo de getBase64Files a continuación.
Independientemente de la explicación (que se podría mejorar), siempre es una buena idea comenzar todas las lecturas al mismo tiempo y esperar a que se completen todas:
const getBase64Files = async (items) => { const base64Files = [] await Promise.allSettled( Array.from(items).map( item => inputFileToBase64(item.getAsFile()).then( file => base64Files.push(file) ) ) ) return base64Files }y eso funciona
Este no es tu error. Por alguna razón, la lista de elementos solo contiene 1 elemento en cromo. En Firefox, parece ser 0. No importa cuántos archivos copie.
Probablemente debería usar la API del Portapapeles en su lugar. https://developer.mozilla.org/en-US/docs/Web/API/Clipboard