React - upload wielu plików

W tym artykule chcielibyśmy pokazać, jak w prosty sposób można wysyłać na serwer wiele plików ze strony napisanej przy użyciu technologi React.

Istnieją dwa główne podejścia pozwalające użytkownikowi wybrać wiele plików:

• użycie elementu input z właściwością multiple, który pozwala wybrać wiele plików na jedno wejście,
• użycie wielu elementów input, z których każdy pozwala użytkownikowi wybrać tylko jeden plik.

W tym artykule chcemy pokazać, jak korzystać z drugiej opcji.

Poniższy przykład pokazuje prosty formularz z elementem <input type="file" />, za pomocą którego jesteśmy w stanie wskazać dowolne pliki znajdujące się na dysku komputera. Samo przesyłanie odbywa się już z użyciem funkcji fetch() przyjmującej jako argument obiekt klasy FormData - podobnie jak w przypadku klasycznego formularza, jednak w tym przypadku wysyłamy je poprzez żądanie AJAX / XHR.

Bardzo ważne jest, aby każdemu elementowi wejściowemu podać nazwę, która pozwoli odróżnić go na serwerze - w poniższym przykładzie użyto nazw plik1, plik2 i plik3.

Uruchamialny przykład:

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:
// import React from 'react';
// import ReactDOM from 'react-dom';

const Form = () => {
 const handleSubmit = (e) => {
   e.preventDefault();
   const formData = new FormData(e.target);
   fetch("/example/upload", {
     method: "POST",
     body: formData,
   })
     .then((response) => {
       response.text()
         .then((text) => console.log(text));
     })
     .catch((error) => {
       console.error("Wystąpił błąd!");
     });
 };
 return (
   <form onSubmit={handleSubmit}>
     <label htmlFor="userfile">Wgrane pliki:</label><br />
     <br />
     <input type="file" name="plik1" /><br />
     <input type="file" name="plik2" /><br />
     <input type="file" name="plik3" /><br />
     <br />
     <input type="submit" value="Zatwierdź!" />
   </form>
 );
};

const root = document.querySelector("#root");
ReactDOM.render(<Form />, root);

Ważne:

• każdemu plikowi należy nadać nazwę,
• liczba wystąpień elementu <input type="file" /> zależna jest od ilości plików jaką zamierzamy wysłać na serwer.