Array di file restituisce undefined in un ciclo for

di
BennyBatt
il
1 risposte
B
BennyBatt
Utente Attivo
Iscritto da
dic, 2021
Messaggi:
58

Array di file restituisce undefined in un ciclo for

Buongiorno.

Ho un problema con una routine di gestione di una pagina che contiene alcuni tag <INPUT type “file” name="files[]" multiple>.

In javascript inidividuo gli input e li assegno ad una variabile

Ho poi inserito dei listeners per il drag and drop, e nel drop prelevo i dati contenuti nei file aggiunti inserendoli nella variabile degli input.

Quando poi cerco di stamparne i nomi, succede una cosa stranissima; se indico un singolo elementop dell'array, JS me lo restitisce, mentre se ciclo l'array ogni elemento mi viene restituito come undefined.

Questo il codice, che dovrebbe chiarire la situazione (riporto solo le parti significative):

let fileInput = item.querySelector('[name="files[]"');

item.addEventListener('drop', function (e) {
        droppedFiles = e.dataTransfer.files;
        fileInput.files = droppedFiles;
        updateFileList(item, fileInput);
      }, false);
      
 function updateFileList(box, fileInput) {
    const filesArray = Array.from(fileInput.files);
    const appoggio = '';
    if (filesArray.length > 1) {
      console.log(filesArray);
      console.log(filesArray[0].name);
      for (var i = 0; i < filesArray.length; i++) {
        appoggio = '- ' . filesArray[i][file].name;
      }
        fileList.innerHTML = '<p>Files selezionati:</p><ul><li>' + appoggio.join('</li><li>') + '</li></ul>';
       [...]

Ora, nella function in un esempio, la log di filesArray  mi restituisce:

A questo punto,  la log di filesArray[0].name  mi restituisce: ‘photocamera2.png’, mentre nel ciclo for la log di filesArray[i].name  mi restituisce undefined, e controllando, undefined è filesArray[i].

La cosa mi sconcerta!  Ho provato con un array.map, tipo

filesArray.map(f => f.name)

ma anche qui f nell'istruzione della funzione interna f.name risulta undefined.

Qualcuno sa spiegarmi il perché?

1 Risposte

  • B
    BennyBatt
    Utente Attivo
    Iscritto da
    dic, 2021
    Messaggi:
    58

    Re: Array di file restituisce undefined in un ciclo for

    Scusate, ho risolto il problema ed è interamente dovuto a un mio errore.

    Ho perso mezza giornata per una sciocchezza, imputandolo a qualche strano comportamento di JS, che non poteva essere…

    Quello che mi ha fuorviato, e credo abbia messo fuori strada anche altri che hanno visionato questo post, è che l'array.map da me utilizzato non era quello descritto sopra, ma il seguente:

    filesArray.map(f => '- ' . f.name)

    che fa il paio con l'istruzione applicata nella versione altenativa con il ciclo for (questa riportata sopra correttamente):

    appoggio = '- ' . filesArray[i][file].name;

    Ora, a parte che quest'ultima istruzione indica un sotto array [file], che è di per sè già un errore, il problema consta nel segno di concatenazione: nel mio codice ho usato il punto, mentre in JS è ovviamente il segno d'addizione. Quindi con il ‘.’ JS cercava di applicare una proprietà (ovviamente non esistente), trovando come risultato undefined. É bastato correggere per sistemare il problema.

    Il codice è stato semplificato nella function updateFileList come segue:

    function updateFileList(box, fileInput, fileList) {
    const filesArray = Array.from(fileInput.files);
    if (filesArray.length > 1) {
        fileList.innerHTML = "<p>Files selezionati:</p><ul style='text-align: left;'><li>" + filesArray.map(f => '- ' + f.name).join('</li><li>') + '</li></ul>';

    dove filesArray.map(f => '- ‘ + f.name) è l’istruzione corretta.

    Scusate ancora.

Devi accedere o registrarti per scrivere nel forum
1 risposte