Hay preguntas similares como esta, pero no explican por qué esto falla.

Después de colocar varios archivos en el navegador, la iteración con la instrucción for...of falla mientras funciona el bucle for normal.

El for...of versión genera undefined para file.name mientras que el normal for la versión genera el nombre del archivo correctamente.

¿Por qué?

 function initDragDropEvents() { // Trigger file uploads on drop events. $('body').on('drop', function(e) { let fileList = getFileListFromDropEvent(e.originalEvent); // Have image? Update view. for (const file in fileList) { console.log('1 Dropped file: ' + file.name); } for (let i = 0; i < fileList.length; i++) { console.log('2 Dropped file: ' + fileList[i].name); } }); } function getFileListFromDropEvent(event) { // Prevent default behavior, which opens the file. event.preventDefault(); // Set default result for file. let fileList = []; // Get item list from @event. let itemList = event.dataTransfer.items; if (!itemList) { itemList = event.dataTransfer.files; } if (itemList) { for (const item of itemList) { // Assume DataTransfer interface by default. let file = item; // Use DataTransferItemList interface instead? if (item.kind === 'file') { file = item.getAsFile(); } fileList.push(file); } } return fileList; }