Limit File Upload and Display Message in React with AntD: A Guide

In this guide, we will be discussing how to limit file uploads and display messages in React with the help of the Ant Design (AntD) framework. This article is aimed at beginners, so we will try to keep the explanations simple and easy to understand.

Prerequisites

Before we start, make sure you have the following installed in your system:

• Node.js (version 10 or higher) Download Node.js
• NPM (Node Package Manager) - Comes bundled with Node.js
• A code editor like VS Code or Sublime Text

Creating a new React app

To create a new React app, open the terminal and run the following command:

This will create a new folder called file-upload-demo with the basic structure of a React app. Navigate into the folder:

Installing AntD

AntD is a popular React UI library. It provides a set of high-quality components that can be used to build responsive user interfaces. To install AntD, run the following command:

To use AntD in your project, you need to import its CSS file. Open the src/index.js file and add the following line at the end:

Creating a file upload component

AntD provides a Upload component that can be used to upload files. Open the src/App.js file and replace its content with the following code:

import React, { useState } from 'react';
import { Upload, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

function App() {
  const [fileList, setFileList] = useState([]);

  const handleUpload = () => {
    if (fileList.length > 5) {
      message.error('You can only upload a maximum of 5 files.');
      return;
    }

    message.success('Files uploaded successfully.');
  };

  return (
    

       {
          // Do something when a file is previewed.
        }}
        onChange={info => {
          setFileList(info.fileList);
        }}
        onRemove={file => {
          // Do something when a file is removed.
        }}
      >
        

          
          
Upload
        
      
      Upload
    
  );
}

export default App;

In this code, we have created a new state variable fileList to store the list of uploaded files. The Upload component is used to display the file upload interface. We have also added a button to trigger the file upload when clicked.

To limit the number of files that can be uploaded, we have added a handleUpload function that checks the length of the fileList array. If it is greater than 5, we display an error message using the message component from AntD. If it is less than or equal to 5, we display a success message.

Testing the app

To test the app, run the following command in the terminal:

This will start the development server and open the app in your browser. You can now test the file upload functionality and check if the message is displayed correctly.

In this guide, we have discussed how to limit file uploads and display messages in React with AntD. We have created a simple file upload component that can be used to upload multiple files. We have also added a check to limit the number of files that can be uploaded and displayed a message when the limit is reached.

References