React - upload pliku

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

Poniższy przykład pokazuje prosty formularz z elementem <input type="file" /> , za pomocą którego jesteśmy w stanie wskazać dowolny plik znajdujący się na dysku komputera. Samo przesyłanie odbywa się już z użyciem funkcji fetch() przyjmującej jako argument obiekt klasy FormData.

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("File upload error!");
      });
  };
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="userfile">Wybierz plik:</label><br />
      <br />
      <input type="file" name="my-file" /><br />
      <br />
      <input type="submit" value="Zatwierdź!" />
    </form>
  );
};

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

Bibliografia

1.  FormData - MDN Docs