Languages
[Edit]
PL

React - upload wielu plików

3 points
Created by:
Dirask JS Member
3460

W tym artykule chcieliby┼Ťmy pokaza─ç, jak w prosty spos├│b mo┼╝na wysy┼éa─ç na serwer wiele┬áplik├│w┬áze strony napisanej przy u┼╝yciu technologi┬áReact.

Istniej─ů dwa g┼é├│wne podej┼Ťcia pozwalaj─ůce u┼╝ytkownikowi wybra─ç wiele plik├│w:

  • u┼╝ycie┬áelementu input z w┼éa┼Ťciwo┼Ťci─ů multiple, kt├│ry pozwala wybra─ç wiele plik├│w na jedno wej┼Ťcie,
  • u┼╝ycie wielu element├│w input, z kt├│rych ka┼╝dy┬ápozwala u┼╝ytkownikowi wybra─ç tylko jeden plik.

W tym artykule chcemy pokaza─ç, jak korzysta─ç z drugiej opcji.

Poni┼╝szy przyk┼éad pokazuje prosty formularz z elementem <input type="file" />, za pomoc─ů kt├│rego jeste┼Ťmy w stanie wskaza─ç dowolne pliki znajduj─ůce si─Ö na dysku komputera. Samo przesy┼éanie odbywa si─Ö ju┼╝ z u┼╝yciem funkcji fetch() przyjmuj─ůcej jako argument obiekt klasy FormData - podobnie jak w przypadku klasycznego formularza, jednak w tym przypadku wysy┼éamy je poprzez ┼╝─ůdanie AJAX / XHR.

Bardzo wa┼╝ne jest, aby ka┼╝demu elementowi wej┼Ťciowemu poda─ç nazw─Ö, kt├│ra pozwoli odr├│┼╝ni─ç go na serwerze - w poni┼╝szym przyk┼éadzie u┼╝yto nazw plik1, plik2 i plik3.

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("Wyst─ůpi┼é b┼é─ůd!");
     });
 };
 return (
   <form onSubmit={handleSubmit}>
     <label htmlFor="userfile">Wgrane pliki:</label><br />
     <br />
     <input type="file" name="plik1" /><br />
     <input type="file" name="plik2" /><br />
     <input type="file" name="plik3" /><br />
     <br />
     <input type="submit" value="Zatwierd┼║!" />
   </form>
 );
};

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

Wa┼╝ne:

  • ka┼╝demu plikowi nale┼╝y nada─ç nazw─Ö,
  • liczba wyst─ůpie┼ä elementu┬á<input type="file" />┬ázale┼╝na jest od ilo┼Ťci plik├│w jak─ů zamierzamy wys┼éa─ç na serwer.┬á

ReactJS (PL)

React - upload wielu plików
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