Languages
[Edit]
PL

React - upload pliku

6 points
Created by:
christa
300

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

ReactJS (PL)

React - upload pliku
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