Post input file con label

[Trommo]

Salve a tutti ho creato un form di upload con un input file a cui ho modificato l'estetica aggiungendo incorporandolo in una label

<label class="fileContainer" style="color: white" id="FileNameLabel">      
Seleziona un file       
<input type="file" name="UpFile"/>
</label>                                           

A questo si aggiunge uno script in js per modificare il nome della label ogni volta che viene selezionato un file

$(document).ready(function(){            
$('input[type="file"]').change(function(e){                
var fileName = e.target.files[0].name;                
document.getElementById('FileNameLabel').innerHTML = fileName;            
});        
});

Ora, lanciando il form, il quale reindirizza ad una pagina .php con $_FILES['UpFile'] mi restituisce un "Undefined index".

Provando poi a togliere il file input dalla label lo script funziona tranquillamente e l'upload va a buon fine.

Cosa sbaglio?
Grazie a tutti in anticipo!

[KillerWorm]

Ciao, penso che il problema sia qui:

getElementById('FileNameLabel').innerHTML = ...

La proprietà innerHTML rappresenta tutto ciò che sta dentro l'elemento a cui questa è riferita.
Tenendo conto che l'elemento <input> sta dentro quell'elemento <label>, se tu modifichi quella proprietà è ovvio che l'elemento <input> (con tutti i dati del file appena scelto) va a farsi benedire.

Chiaramente in tal caso è abbastanza logico che tu riceva un valore del tipo undefined, perché quell'elemento <input> non esisterà più dal momento che lo hai rimosso dal flusso dei contenuti html, sostituendolo con dell'altro.

Per risolvere potresti usare un terzo elemento contenitore (può andar bene un semplice <span>) in modo da mostrare qui il nome del file appena scelto.

Potrebbe essere una cosa del genere:

<label class="fileContainer" style="color: white" id="FileNameLabel">
   <span id="FileName">Seleziona un file</span>
   <input type="file" name="UpFile"/>
</label>
...
<script>
$(document).ready(function(){
   $('input[type="file"]').change(function(e){
      var fileName = e.target.files[0].name;
      document.getElementById('FileName').innerHTML = fileName;
   });
});

In sostanza quello che viene modificato è solo il contenuto dello <span> e non quello di tutto il <label>, per cui l'elemento <input> (con il suoi dati relativi al file scelto) viene preservato.

Se poi ti interessa "nascondere" l'elemento <input> una volta che è stato scelto un file, non puoi rimuoverlo dal flusso dei contenuti ma puoi usare delle soluzioni alternative.