|
1 | | -import React, { Fragment, useState } from "react"; |
2 | | -import Message from "../Message"; |
3 | | -import Progress from "../Progress"; |
4 | | -import axios from "axios"; |
| 1 | +import React, { useState } from "react"; |
5 | 2 |
|
6 | | -const FileUpload = ({ onChange }) => { |
| 3 | +const FileUpload = ({ placeholder = "Choose file", onChange, onSubmit }) => { |
7 | 4 | const [file, setFile] = useState(""); |
8 | | - const [filename, setFilename] = useState("Choose File"); |
9 | | - const [uploadedFile, setUploadedFile] = useState({}); |
10 | | - const [message, setMessage] = useState(""); |
11 | | - const [uploadPercentage, setUploadPercentage] = useState(0); |
| 5 | + const [filename, setFilename] = useState(""); |
12 | 6 |
|
13 | 7 | const handleFileChange = (e) => { |
14 | | - setFile(e.target.files[0]); |
15 | | - setFilename(e.target.files[0].name); |
16 | | - onChange(e.target.files[0]); |
| 8 | + if (e.target.files && e.target.files.length) { |
| 9 | + if (onChange && onChange instanceof Function) { |
| 10 | + const valid = onChange(e.target.files[0]); |
| 11 | + if (valid === false) { |
| 12 | + setFile(""); |
| 13 | + setFilename(""); |
| 14 | + return; |
| 15 | + } |
| 16 | + } |
| 17 | + setFile(e.target.files[0]); |
| 18 | + setFilename(e.target.files[0].name); |
| 19 | + } |
17 | 20 | }; |
18 | 21 |
|
19 | | - const onSubmit = async (e) => { |
| 22 | + const handleSubmit = (e) => { |
20 | 23 | e.preventDefault(); |
21 | | - const formData = new FormData(); |
22 | | - formData.append("file", file); |
23 | | - |
24 | | - try { |
25 | | - const res = await axios.post("/upload", formData, { |
26 | | - headers: { |
27 | | - "Content-Type": "multipart/form-data", |
28 | | - }, |
29 | | - onUploadProgress: (progressEvent) => { |
30 | | - setUploadPercentage( |
31 | | - parseInt( |
32 | | - Math.round((progressEvent.loaded * 100) / progressEvent.total) |
33 | | - ) |
34 | | - ); |
35 | | - |
36 | | - // Clear percentage |
37 | | - setTimeout(() => setUploadPercentage(0), 10000); |
38 | | - }, |
39 | | - }); |
40 | | - |
41 | | - const { fileName, filePath } = res.data; |
42 | | - |
43 | | - setUploadedFile({ fileName, filePath }); |
44 | | - |
45 | | - setMessage("File Uploaded"); |
46 | | - } catch (err) { |
47 | | - if (err.response.status === 500) { |
48 | | - setMessage("There was a problem with the server"); |
49 | | - } else { |
50 | | - setMessage(err.response.data.msg); |
51 | | - } |
52 | | - } |
| 24 | + onSubmit(file); |
53 | 25 | }; |
54 | 26 |
|
55 | 27 | return ( |
56 | | - <Fragment> |
57 | | - {message ? <Message msg={message} /> : null} |
58 | | - <form onSubmit={onSubmit}> |
59 | | - <div className="custom-file mb-4"> |
60 | | - <input |
61 | | - type="file" |
62 | | - className="custom-file-input" |
63 | | - id="customFile" |
64 | | - onChange={handleFileChange} |
65 | | - /> |
66 | | - <label className="custom-file-label" htmlFor="customFile"> |
67 | | - {filename} |
68 | | - </label> |
69 | | - </div> |
70 | | - |
71 | | - <Progress percentage={uploadPercentage} /> |
72 | | - |
| 28 | + <form onSubmit={handleSubmit}> |
| 29 | + <div className="custom-file mb-4"> |
73 | 30 | <input |
74 | | - type="submit" |
75 | | - value="Upload" |
76 | | - className="btn btn-primary btn-block mt-4" |
| 31 | + type="file" |
| 32 | + className="custom-file-input" |
| 33 | + id="customFile" |
| 34 | + onChange={handleFileChange} |
77 | 35 | /> |
78 | | - </form> |
79 | | - {uploadedFile ? ( |
80 | | - <div className="row mt-5"> |
81 | | - <div className="col-md-6 m-auto"> |
82 | | - <h3 className="text-center">{uploadedFile.fileName}</h3> |
83 | | - <img style={{ width: "100%" }} src={uploadedFile.filePath} alt="" /> |
84 | | - </div> |
85 | | - </div> |
86 | | - ) : null} |
87 | | - </Fragment> |
| 36 | + <label className="custom-file-label" htmlFor="customFile"> |
| 37 | + {filename || placeholder} |
| 38 | + </label> |
| 39 | + </div> |
| 40 | + |
| 41 | + <input |
| 42 | + type="submit" |
| 43 | + value="Upload" |
| 44 | + className="btn btn-primary btn-block mt-4" |
| 45 | + /> |
| 46 | + </form> |
88 | 47 | ); |
89 | 48 | }; |
90 | 49 |
|
|
0 commit comments