Seret dan lepas unggahan banyak file, bootstrap

Question

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

Table of Contents Show

Rest API untuk Pengunggahan & Penyimpanan File
React Drag and Drop File Upload Aplikasi
Siapkan Proyek Pengunggahan File Seret dan Lepas
Impor Bootstrap untuk React Drag Drop File Upload App
Inisialisasi Axios untuk React HTTP Client
Buat Layanan untuk Unggah File
Instal react-dropzone
Buat Halaman untuk Mengunggah File
Gaya CSS untuk Dropzone dan File
Tambahkan Seret dan Lepas Komponen Unggah File ke Komponen Aplikasi
Konfigurasi Port untuk React App
Jalankan Aplikasi

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: "http://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: "http://localhost:8080",
  headers: {
    "Content-type": "application/json"
  }
});

_4
Atau.

import axios from "axios";

export default axios.create({
  baseURL: "http://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: "http://localhost:8080",
  headers: {
    "Content-type": "application/json"
  }
});

6 atau

import axios from "axios";

export default axios.create({
  baseURL: "http://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: "http://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: "http://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: "http://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: "http://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: "http://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: "http://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

kode bootstrap