Dropzone Area - Copy this React, Mui Component to your project

When the user clicks the ‘Thêm mới’ button, a modal opens with functionality to import an Excel file. The modal includes a dropzone area where users can drag and drop a file or click ‘Chọn tệp’ to select a file manually. The system only accepts .xls and .xlsx files with a maximum size of 10 MB. If a user attempts to upload a file of a different format or size, an error message will be displayed. Below the dropzone, there is a link for downloading a sample Excel file by clicking ‘Tải tệp mẫu.’ Additionally, the modal includes instructions for users to ensure accurate data input, explaining that each row in the file corresponds to one record. The user can close the modal by clicking ‘Đóng,’ or add the file by clicking ‘Thêm mới,’ which processes the file if valid and previews its content on the screen