Languages
[Edit]
DE

React - Datei hochladen

3 points
Created by:
Nikki
10460

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

ReactJS (DE)

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

â€ïžđŸ’» 🙂

Join