Ant Design Library has this component pre-built, and it is very easy to integrate as well. Upload Component is used for uploading files by selecting or dragging. We can use the following approach in ReactJS to use the Ant Design Upload Component.
Upload Props:
- accept: It is used to denote the file types that can be accepted.
- action: It is used to denote the Uploading URL.
- beforeUpload: It is a Hook function that will be executed before uploading.
- customRequest: It is used to override the default xhr behavior.
- data: It is used for uploading extra params or function which can return uploading extra params.
- defaultFileList: It is used to denote the Default list of files that have been uploaded.
- directory: It is used to support upload the whole directory.
- disabled: It is used to disable the upload button.
- fileList: It is used to denote the list of files that have been uploaded.
- headers: It is used to set request headers.
- iconRender: It is used for the custom show icon.
- isImageUrl: It is used to customize if render <img /> in thumbnail.
- itemRender: It is used for the custom item of uploadList.
- listType: It is the Built-in stylesheets, support for text, picture, or picture-card type.
- maxCount: It is used to limit the number of uploaded files.
- method: It is the HTTP method of upload request.
- multiple: It is used to indicate whether to support selected multiple files.
- name: It is used to denote the name of the uploading file.
- openFileDialogOnClick: It is used to open the file dialog on click of it.
- previewFile: It is used for the customized preview file logic.
- progress: It is used for the Custom progress bar.
- showUploadList: It is used to indicate whether to show the default upload list.
- withCredentials: It is the Ajax upload with cookie sent.
- onChange: It is a callback function that is triggered when the uploading state is changing.
- onDrop: It is a callback function that is triggered when files are dragged and dropped into the upload area.
- onDownload: It is the method to download the file when it is clicked.
- onPreview: It is a callback function that is triggered when a file link or preview icon is clicked.
- onRemove: It is a callback function that is triggered when the removing file button is clicked.
UploadFile Props:
- name: It is used to denote the file name.
- percent: It is used to denote the upload progress percent.
- status: It is used to denote the upload status.
- thumbUrl: It is used to pass the thumb image URL.
- uid: It is the unique ID, and it will be generated automatically when not provided.
- url: It is used to denote the download URL.
Creating React Application And Installing Module:
-
Step 1: Create a React application using the following command:
npx create-react-app foldername
-
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
-
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install antd
Project Structure: It will look like the following.
Project Structure
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
import React from 'react'
import "antd/dist/antd.css";
import { Upload, message, Button } from 'antd';
const props = { headers: {
authorization: 'authorization-text',
},
name: 'file',
}; export default function App() {
return (
<div style={{
display: 'block', width: 700, padding: 30
}}>
<h4>ReactJS Ant-Design Upload Component</h4>
<>
<Upload {...props}
onChange={(response) => {
if (response.file.status !== 'uploading') {
console.log(response.file, response.fileList);
}
if (response.file.status === 'done') {
message.success(`${response.file.name}
file uploaded successfully`);
} else if (response.file.status === 'error') {
message.error(`${response.file.name}
file upload failed.`);
}
}}
>
<Button>Upload File</Button>
</Upload>
</>
</div>
);
} |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Reference: https://ant.design/components/upload/