React - Datei hochladen

In diesem Artikel wird gezeigt, wie man aus einer mit der React-Technologie geschriebenen Website ganz einfach Dateien auf den Server hochladen kann.

Das folgende Beispiel zeigt ein einfaches Formular mit einem Element <input type="file" />, das man verwenden kann, um auf eine beliebige Datei auf dem Computer zu zeigen. Selbst die Übertragung erfolgt mit der Funktion fetch(), die ein Objekt der Klasse FormData als Argument akzeptiert. 

Lauffähiges Beispiel:

// ONLINE-RUNNER:browser;

// Hinweis: Bei der Arbeit mit dem JSX-Compiler soll man die Importzeilen entkommentieren:
// 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">Datei auswählen:</label><br />
      <br />
      <input type="file" name="my-file" /><br />
      <br />
      <input type="submit" value="Genehmigen!" />
    </form>
  );
};

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

Referenzen

1.  FormData - MDN Docs