Entfernen von großen Dateien aus Datei-Upload

Question

Ich möchte einem Benutzer erlauben, mehrere Dateien über Ajax hochzuladen. Wenn einige der Dateien zu groß sind, möchte ich sie aus der Upload-Liste entfernen. Wie kann ich das tun? Ich habe momentan folgendes für mein Eingabefeld.

<input id="file" type="file" onChange={this.handleChange.bind(this)} required multiple /> 

Bisher habe ich mit so etwas wie diese kommen, um zu überprüfen, welche Dateien zu groß sind:

handleChange(event) { 
    const target = event.target; 

    if (target.type === 'file'){ 
     console.log("FILES") 
     const files = target.files 
     console.log("The following files are too large") 
     for (let i=0; i < files.length; i++){ 
      if (files[i].size > 50000){ 
       console.log(files[i].name) 
      } 
     } 
    } 
} 

Das, was ich bin verwirrt darüber, wie Dateien behandelt werden, da sie Links nicht wirklich sind zu den eigentlichen Dateien im Dateisystem. Wie funktioniert die Dateistruktur? Wie kann ich die guten Dateien in einer neuen Dateistruktur speichern, die mit Ajax hochgeladen werden kann?

Answer 1

target.files ist nur ein Array. Sie können es einfach filtern, indem Sie die nicht benötigten Dateien entfernen und mit dem neuen Array machen, was Sie wollen (z. B. im Zustand der Komponente speichern).

const data = new FormData(); 
files.forEach(file => data.append(file.name, file)); 

und dann über die XMLHTTPRequest das FormData Objekt senden:

const files = target.files.filter(file => file.size <= 50000); 
this.setState({files}); 
// or uploadFiles(files) 

Wenn Sie fragen, wie eigentlich Dateien über eine XMLHTTPRequest senden, kann dies mit FormData erfolgen.