PL
React - upload pliku
6 points
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:
xxxxxxxxxx1
// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:2
// import React from 'react';3
// import ReactDOM from 'react-dom';4
5
const Form = () => {6
const handleSubmit = (e) => {7
e.preventDefault();8
const formData = new FormData(e.target);9
fetch("/example/upload", {10
method: "POST",11
body: formData,12
})13
.then((response) => {14
response.text()15
.then((text) => console.log(text));16
})17
.catch((error) => {18
console.error("File upload error!");19
});20
};21
return (22
<form onSubmit={handleSubmit}>23
<label htmlFor="userfile">Wybierz plik:</label><br />24
<br />25
<input type="file" name="my-file" /><br />26
<br />27
<input type="submit" value="Zatwierdź!" />28
</form>29
);30
};31
32
const root = document.querySelector("#root");33
ReactDOM.render(<Form />, root);