Dalam tutorial React ini, saya akan menunjukkan kepada Anda cara membuat contoh Upload File Drag and Drop dengan React Hooks menggunakan react-dropzone, Axios dan Multipart File untuk membuat permintaan HTTP, Bootstrap untuk progress bar dan menampilkan daftar informasi file (dengan url unduhan
Dari BezKoder
Ringkasan
Kami akan membuat Drag and Drop File Upload dengan contoh React di pengguna itu
- seret file dan jatuhkan ke zona Jatuhkan
- lihat proses upload (persentase) dengan progress bar
- melihat semua file yang diunggah
- tautan unduhan ke file saat mengklik nama file
Tepat setelah drag and drop file ke Dropzone
Klik tombol Unggah
Teknologi
- Bereaksi 18/17/16
- Aksioma
- reaksi-dropzone 11. 4. 0
- Bootstrap 4
Rest API untuk Pengunggahan & Penyimpanan File
Ini adalah API yang akan digunakan oleh React App kami
MethodsUrlsActionsPOST/uploadupload FileGET/filesdapatkan Daftar File (nama & url)GET/files/[filename]download File
Anda dapat menemukan cara mengimplementasikan Rest APIs Server di salah satu postingan berikut
- Node. contoh js Express File Upload Rest API
- Node. Unggah File Ekspres js ke contoh MongoDB
- Node. Contoh Upload File js Express ke Google Cloud Storage
- Contoh upload File Spring Boot Multipart (ke folder statis).
Atau. Contoh upload File Spring Boot Multipart (ke database).
React Drag and Drop File Upload Aplikasi
Setelah membangun React. js proyek selesai, struktur folder akan terlihat seperti ini
Izinkan saya menjelaskannya secara singkat
- FileUploadService menyediakan fungsi untuk menyimpan File dan mendapatkan File menggunakan Axios
- FileUpload berisi file upload dropzone, progress bar, tampilan daftar file
Aplikasi. js adalah wadah tempat kami menyematkan semua komponen React
http-umum. js menginisialisasi Axios dengan HTTP base Url dan header
Kami mengonfigurasi port untuk Aplikasi kami. lingkungan
Siapkan Proyek Pengunggahan File Seret dan Lepas
Buka cmd di folder yang ingin Anda simpan folder Project, jalankan perintah
import axios from "axios";
export default axios.create({
baseURL: "//localhost:8080",
headers: {
"Content-type": "application/json"
}
});
_3
Setelah proses selesai. Kami membuat folder dan file tambahan seperti pohon berikut
publik
src
--komponen
----Unggah File. js
--jasa
---- Layanan Unggah File. js
--Aplikasi. css
--Aplikasi. js
--indeks. js
kemasan. json
Impor Bootstrap untuk React Drag Drop File Upload App
Jalankan perintah. import axios from "axios";
export default axios.create({
baseURL: "//localhost:8080",
headers: {
"Content-type": "application/json"
}
});
_4
Atau. import axios from "axios";
export default axios.create({
baseURL: "//localhost:8080",
headers: {
"Content-type": "application/json"
}
});
5
Buka src/Aplikasi. js dan modifikasi kode di dalamnya sebagai berikut-
import React from "react"; import "./App.css"; import "bootstrap/dist/css/bootstrap.min.css"; function App() { return ( ... ); } export default App;
Masuk ke mode layar penuh Keluar dari mode layar penuh
Inisialisasi Axios untuk React HTTP Client
Mari instal axios dengan perintah
import axios from "axios";
export default axios.create({
baseURL: "//localhost:8080",
headers: {
"Content-type": "application/json"
}
});
6 atau import axios from "axios";
export default axios.create({
baseURL: "//localhost:8080",
headers: {
"Content-type": "application/json"
}
});
7
Di bawah folder src, kami membuat http-common. js dengan kode berikut
import axios from "axios"; export default axios.create({ baseURL: "//localhost:8080", headers: { "Content-type": "application/json" } });
Masuk ke mode layar penuh Keluar dari mode layar penuh
Anda dapat mengubah import axios from "axios"; export default axios.create({ baseURL: "//localhost:8080", headers: { "Content-type": "application/json" } }); 8 yang bergantung pada url REST API yang dikonfigurasi oleh Server Anda
Buat Layanan untuk Unggah File
Layanan ini akan menggunakan Axios untuk mengirim permintaan HTTP
Ada 2 fungsi
- import axios from "axios"; export default axios.create({ baseURL: "//localhost:8080", headers: { "Content-type": "application/json" } }); _9. Data formulir POST dengan panggilan balik untuk melacak kemajuan pengunggahan
- import http from "../http-common"; export const uploadFile = (file, onUploadProgress) => { let formData = new FormData(); formData.append("file", file); return http.post("/upload", formData, { headers: { "Content-Type": "multipart/form-data", }, onUploadProgress, }); }; export const getFiles = () => { return http.get("/files"); }; _0. DAPATKAN daftar informasi File
layanan/FileUploadService. js
import http from "../http-common"; export const uploadFile = (file, onUploadProgress) => { let formData = new FormData(); formData.append("file", file); return http.post("/upload", formData, { headers: { "Content-Type": "multipart/form-data", }, onUploadProgress, }); }; export const getFiles = () => { return http.get("/files"); }; _
Masuk ke mode layar penuh Keluar dari mode layar penuh
Pertama, kami mengimpor Axios sebagai import http from "../http-common"; export const uploadFile = (file, onUploadProgress) => { let formData = new FormData(); formData.append("file", file); return http.post("/upload", formData, { headers: { "Content-Type": "multipart/form-data", }, onUploadProgress, }); }; export const getFiles = () => { return http.get("/files"); }; _1 dari http-common. js
Di dalam metode import http from "../http-common"; export const uploadFile = (file, onUploadProgress) => { let formData = new FormData(); formData.append("file", file); return http.post("/upload", formData, { headers: { "Content-Type": "multipart/form-data", }, onUploadProgress, }); }; export const getFiles = () => { return http.get("/files"); }; _2, kami menggunakan import http from "../http-common"; export const uploadFile = (file, onUploadProgress) => { let formData = new FormData(); formData.append("file", file); return http.post("/upload", formData, { headers: { "Content-Type": "multipart/form-data", }, onUploadProgress, }); }; export const getFiles = () => { return http.get("/files"); }; 3 untuk menyimpan key-value pair. Ini membantu untuk membangun objek yang sesuai dengan bentuk HTML menggunakan metode import http from "../http-common"; export const uploadFile = (file, onUploadProgress) => { let formData = new FormData(); formData.append("file", file); return http.post("/upload", formData, { headers: { "Content-Type": "multipart/form-data", }, onUploadProgress, }); }; export const getFiles = () => { return http.get("/files"); }; 4
Kami melewati import http from "../http-common"; export const uploadFile = (file, onUploadProgress) => { let formData = new FormData(); formData.append("file", file); return http.post("/upload", formData, { headers: { "Content-Type": "multipart/form-data", }, onUploadProgress, }); }; export const getFiles = () => { return http.get("/files"); }; _5 untuk memaparkan acara kemajuan. Acara kemajuan ini mahal (perubahan deteksi untuk setiap acara), jadi Anda hanya boleh menggunakannya saat Anda ingin memantaunya
Kami memanggil Axios import http from "../http-common"; export const uploadFile = (file, onUploadProgress) => { let formData = new FormData(); formData.append("file", file); return http.post("/upload", formData, { headers: { "Content-Type": "multipart/form-data", }, onUploadProgress, }); }; export const getFiles = () => { return http.get("/files"); }; _6 untuk mengirim HTTP POST untuk mengunggah File ke Rest APIs Server dan metode import http from "../http-common"; export const uploadFile = (file, onUploadProgress) => { let formData = new FormData(); formData.append("file", file); return http.post("/upload", formData, { headers: { "Content-Type": "multipart/form-data", }, onUploadProgress, }); }; export const getFiles = () => { return http.get("/files"); }; 7 untuk permintaan HTTP GET untuk mengambil semua file yang disimpan
Instal react-dropzone
Tambahkan modul react-dropzone ke dalam proyek dengan perintah
- import http from "../http-common"; export const uploadFile = (file, onUploadProgress) => { let formData = new FormData(); formData.append("file", file); return http.post("/upload", formData, { headers: { "Content-Type": "multipart/form-data", }, onUploadProgress, }); }; export const getFiles = () => { return http.get("/files"); }; _8
- Atau. import http from "../http-common"; export const uploadFile = (file, onUploadProgress) => { let formData = new FormData(); formData.append("file", file); return http.post("/upload", formData, { headers: { "Content-Type": "multipart/form-data", }, onUploadProgress, }); }; export const getFiles = () => { return http.get("/files"); }; _9
Buat Halaman untuk Mengunggah File
Mari buat UI Pengunggahan File dengan Bilah Kemajuan, Kartu, Tombol, dan Pesan
Pertama kita membuat template React dengan React Hooks (import React, { useState, useEffect } from "react"; import Dropzone from "react-dropzone"; import { getFiles, uploadFile } from "../services/FileUploadService"; const UploadFiles = () => { return ( ); }; export default UploadFiles; 0, import React, { useState, useEffect } from "react"; import Dropzone from "react-dropzone"; import { getFiles, uploadFile } from "../services/FileUploadService"; const UploadFiles = () => { return ( ); }; export default UploadFiles; 1) dan mengimpor fungsi import React, { useState, useEffect } from "react"; import Dropzone from "react-dropzone"; import { getFiles, uploadFile } from "../services/FileUploadService"; const UploadFiles = () => { return ( ); }; export default UploadFiles; 2, import React, { useState, useEffect } from "react"; import Dropzone from "react-dropzone"; import { getFiles, uploadFile } from "../services/FileUploadService"; const UploadFiles = () => { return ( ); }; export default UploadFiles; 3
komponen/FileUpload. js
import React, { useState, useEffect } from "react"; import Dropzone from "react-dropzone"; import { getFiles, uploadFile } from "../services/FileUploadService"; const UploadFiles = () => { return ( ); }; export default UploadFiles;
Masuk ke mode layar penuh Keluar dari mode layar penuh
Kemudian kita mendefinisikan status menggunakan React Hooks
const UploadFiles = () => { const [selectedFiles, setSelectedFiles] = useState(undefined); const [currentFile, setCurrentFile] = useState(undefined); const [progress, setProgress] = useState(0); const [message, setMessage] = useState(""); const [fileInfos, setFileInfos] = useState([]); ... }
Masuk ke mode layar penuh Keluar dari mode layar penuh
Selanjutnya kita mendefinisikan metode import React, { useState, useEffect } from "react";
import Dropzone from "react-dropzone";
import { getFiles, uploadFile } from "../services/FileUploadService";
const UploadFiles = () => {
return (
);
};
export default UploadFiles;
_4 yang membantu kita mendapatkan File yang dipilih dari elemen nanti
const UploadFiles = () => { ... const onDrop = (files) => { if (files.length > 0) { setSelectedFiles(files); } }; ... }
Masuk ke mode layar penuh Keluar dari mode layar penuh
Kami menggunakan import React, { useState, useEffect } from "react";
import Dropzone from "react-dropzone";
import { getFiles, uploadFile } from "../services/FileUploadService";
const UploadFiles = () => {
return (
);
};
export default UploadFiles;
_5 untuk mengakses File saat ini sebagai Item pertama. Kemudian kami memanggil metode import React, { useState, useEffect } from "react";
import Dropzone from "react-dropzone";
import { getFiles, uploadFile } from "../services/FileUploadService";
const UploadFiles = () => {
return (
);
};
export default UploadFiles;
_6 di import React, { useState, useEffect } from "react";
import Dropzone from "react-dropzone";
import { getFiles, uploadFile } from "../services/FileUploadService";
const UploadFiles = () => {
return (
);
};
export default UploadFiles;
7 dengan panggilan balik. Jadi buat metode ________20______8 berikut
const UploadFiles = () => { ... const upload = () => { let currentFile = selectedFiles[0]; setProgress(0); setCurrentFile(currentFile); uploadFile(currentFile, (event) => { setProgress(Math.round((100 * event.loaded) / event.total)); }) .then((response) => { setMessage(response.data.message); return getFiles(); }) .then((files) => { setFileInfos(files.data); }) .catch(() => { setProgress(0); setMessage("Could not upload the file!"); setCurrentFile(undefined); }); setSelectedFiles(undefined); }; ... }
Masuk ke mode layar penuh Keluar dari mode layar penuh
Kemajuan akan dihitung berdasarkan import React, { useState, useEffect } from "react";
import Dropzone from "react-dropzone";
import { getFiles, uploadFile } from "../services/FileUploadService";
const UploadFiles = () => {
return (
);
};
export default UploadFiles;
9 dan const UploadFiles = () => {
const [selectedFiles, setSelectedFiles] = useState(undefined);
const [currentFile, setCurrentFile] = useState(undefined);
const [progress, setProgress] = useState(0);
const [message, setMessage] = useState("");
const [fileInfos, setFileInfos] = useState([]);
...
}
0
Jika transmisi selesai, kami memanggil const UploadFiles = () => {
const [selectedFiles, setSelectedFiles] = useState(undefined);
const [currentFile, setCurrentFile] = useState(undefined);
const [progress, setProgress] = useState(0);
const [message, setMessage] = useState("");
const [fileInfos, setFileInfos] = useState([]);
...
}
_1 untuk mendapatkan informasi file dan menetapkan hasilnya ke status const UploadFiles = () => {
const [selectedFiles, setSelectedFiles] = useState(undefined);
const [currentFile, setCurrentFile] = useState(undefined);
const [progress, setProgress] = useState(0);
const [message, setMessage] = useState("");
const [fileInfos, setFileInfos] = useState([]);
...
}
2, yang merupakan array dari const UploadFiles = () => {
const [selectedFiles, setSelectedFiles] = useState(undefined);
const [currentFile, setCurrentFile] = useState(undefined);
const [progress, setProgress] = useState(0);
const [message, setMessage] = useState("");
const [fileInfos, setFileInfos] = useState([]);
...
}
3 objek
Kita juga perlu melakukan pekerjaan ini dalam metode Effect Hook const UploadFiles = () => {
const [selectedFiles, setSelectedFiles] = useState(undefined);
const [currentFile, setCurrentFile] = useState(undefined);
const [progress, setProgress] = useState(0);
const [message, setMessage] = useState("");
const [fileInfos, setFileInfos] = useState([]);
...
}
4 yang memiliki tujuan yang sama dengan const UploadFiles = () => {
const [selectedFiles, setSelectedFiles] = useState(undefined);
const [currentFile, setCurrentFile] = useState(undefined);
const [progress, setProgress] = useState(0);
const [message, setMessage] = useState("");
const [fileInfos, setFileInfos] = useState([]);
...
}
5
const UploadFiles = () => { ... useEffect(() => { getFiles().then((response) => { setFileInfos(response.data); }); }, []); ... }
Masuk ke mode layar penuh Keluar dari mode layar penuh
Sekarang kami mengembalikan UI File Unggah. Tambahkan kode berikut di dalam blok const UploadFiles = () => {
const [selectedFiles, setSelectedFiles] = useState(undefined);
const [currentFile, setCurrentFile] = useState(undefined);
const [progress, setProgress] = useState(0);
const [message, setMessage] = useState("");
const [fileInfos, setFileInfos] = useState([]);
...
}
6
const UploadFiles = () => { ... return ( <div> {currentFile && ( <div className="progress mb-3"> <div className="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow={progress} aria-valuemin="0" aria-valuemax="100" style={{ width: progress + "%" }} > {progress}% </div> </div> )} <Dropzone onDrop={onDrop} multiple={false}> {({ getRootProps, getInputProps }) => ( <section> <div {...getRootProps({ className: "dropzone" })}> <input {...getInputProps()} /> {selectedFiles && selectedFiles[0].name ? ( <div className="selected-file"> {selectedFiles && selectedFiles[0].name} </div> ) : ( "Drag and drop file here, or click to select file" )} </div> <aside className="selected-file-wrapper"> <button className="btn btn-success" disabled={!selectedFiles} onClick={upload} > Upload </button> </aside> </section> )} </Dropzone> <div className="alert alert-light" role="alert"> {message} </div> {fileInfos.length > 0 && ( <div className="card"> <div className="card-header">List of Files</div> <ul className="list-group list-group-flush"> {fileInfos.map((file, index) => ( <li className="list-group-item" key={index}> <a href={file.url}>{file.name}</a> </li> ))} </ul> </div> )} </div> ); };
Masuk ke mode layar penuh Keluar dari mode layar penuh
Pada kode di atas, kami menggunakan Bootstrap Progress Bar
- const UploadFiles = () => { const [selectedFiles, setSelectedFiles] = useState(undefined); const [currentFile, setCurrentFile] = useState(undefined); const [progress, setProgress] = useState(0); const [message, setMessage] = useState(""); const [fileInfos, setFileInfos] = useState([]); ... } _7 sebagai pembungkus
- batin const UploadFiles = () => { const [selectedFiles, setSelectedFiles] = useState(undefined); const [currentFile, setCurrentFile] = useState(undefined); const [progress, setProgress] = useState(0); const [message, setMessage] = useState(""); const [fileInfos, setFileInfos] = useState([]); ... } _8 untuk menunjukkan kemajuan
- const UploadFiles = () => { const [selectedFiles, setSelectedFiles] = useState(undefined); const [currentFile, setCurrentFile] = useState(undefined); const [progress, setProgress] = useState(0); const [message, setMessage] = useState(""); const [fileInfos, setFileInfos] = useState([]); ... } _8 membutuhkan const UploadFiles = () => { ... const onDrop = (files) => { if (files.length > 0) { setSelectedFiles(files); } }; ... } 0 untuk mengatur lebar dengan persentase
- const UploadFiles = () => { const [selectedFiles, setSelectedFiles] = useState(undefined); const [currentFile, setCurrentFile] = useState(undefined); const [progress, setProgress] = useState(0); const [message, setMessage] = useState(""); const [fileInfos, setFileInfos] = useState([]); ... } _8 juga membutuhkan const UploadFiles = () => { ... const onDrop = (files) => { if (files.length > 0) { setSelectedFiles(files); } }; ... } 2 dan beberapa atribut aria agar dapat diakses
- label bilah kemajuan adalah teks di dalamnya
Untuk menampilkan Daftar file yang diunggah, kami mengulangi larik const UploadFiles = () => { const [selectedFiles, setSelectedFiles] = useState(undefined); const [currentFile, setCurrentFile] = useState(undefined); const [progress, setProgress] = useState(0); const [message, setMessage] = useState(""); const [fileInfos, setFileInfos] = useState([]); ... } 2 menggunakan fungsi const UploadFiles = () => { ... const onDrop = (files) => { if (files.length > 0) { setSelectedFiles(files); } }; ... } 4. Pada setiap item file, kami menggunakan const UploadFiles = () => { ... const onDrop = (files) => { if (files.length > 0) { setSelectedFiles(files); } }; ... } _5 sebagai atribut const UploadFiles = () => { ... const onDrop = (files) => { if (files.length > 0) { setSelectedFiles(files); } }; ... } 6 dan const UploadFiles = () => { ... const onDrop = (files) => { if (files.length > 0) { setSelectedFiles(files); } }; ... } 7 untuk menampilkan teks
Jangan lupa untuk mengekspor komponen fungsi
const UploadFiles = () => { ... } export default UploadFiles;
Masuk ke mode layar penuh Keluar dari mode layar penuh
Gaya CSS untuk Dropzone dan File
Buka Aplikasi. css dan tambahkan gaya berikut
import axios from "axios"; export default axios.create({ baseURL: "//localhost:8080", headers: { "Content-type": "application/json" } }); 0
Masuk ke mode layar penuh Keluar dari mode layar penuh
Tambahkan Seret dan Lepas Komponen Unggah File ke Komponen Aplikasi
Buka Aplikasi. js, impor dan sematkan tag Komponen ________27______8
import axios from "axios"; export default axios.create({ baseURL: "//localhost:8080", headers: { "Content-type": "application/json" } }); _1
Masuk ke mode layar penuh Keluar dari mode layar penuh
Konfigurasi Port untuk React App
Karena sebagian besar Server HTTP menggunakan konfigurasi CORS yang menerima pembagian sumber daya terbatas pada beberapa situs atau port, Anda perlu mengonfigurasi port untuk Aplikasi kami
Di folder proyek, buat. env dengan konten berikut
import axios from "axios"; export default axios.create({ baseURL: "//localhost:8080", headers: { "Content-type": "application/json" } }); _2
Masuk ke mode layar penuh Keluar dari mode layar penuh
Jadi aplikasi kita akan berjalan di port 8081
Jalankan Aplikasi
Anda dapat menemukan cara mengimplementasikan Rest APIs Server di salah satu postingan berikut
- Node. contoh js Express File Upload Rest API
- Node. Unggah File Ekspres js ke contoh MongoDB
- Node. Contoh Upload File js Express ke Google Cloud Storage
- Contoh upload File Spring Boot Multipart (ke folder statis).
Jalankan React Client ini dengan perintah. const UploadFiles = () => { ... const onDrop = (files) => { if (files.length > 0) { setSelectedFiles(files); } }; ... } _9 atau const UploadFiles = () => { ... const upload = () => { let currentFile = selectedFiles[0]; setProgress(0); setCurrentFile(currentFile); uploadFile(currentFile, (event) => { setProgress(Math.round((100 * event.loaded) / event.total)); }) .then((response) => { setMessage(response.data.message); return getFiles(); }) .then((files) => { setFileInfos(files.data); }) .catch(() => { setProgress(0); setMessage("Could not upload the file!"); setCurrentFile(undefined); }); setSelectedFiles(undefined); }; ... } 0
Buka Browser dengan url const UploadFiles = () => { ... const upload = () => { let currentFile = selectedFiles[0]; setProgress(0); setCurrentFile(currentFile); uploadFile(currentFile, (event) => { setProgress(Math.round((100 * event.loaded) / event.total)); }) .then((response) => { setMessage(response.data.message); return getFiles(); }) .then((files) => { setFileInfos(files.data); }) .catch(() => { setProgress(0); setMessage("Could not upload the file!"); setCurrentFile(undefined); }); setSelectedFiles(undefined); }; ... } _1 dan periksa hasilnya
Kesimpulan
Hari ini kita belajar cara membangun aplikasi React Hooks untuk unggahan file Drag and Drop menggunakan React-Dropzone, Axios, Bootstrap dengan Progress Bar. Kami juga menyediakan kemampuan untuk menampilkan daftar file, mengunggah persentase kemajuan, dan mengunduh file dari server