DH
Do Hung

File Import Modal - Copy this React, Tailwind Component to your project

Create a ReactJS component that handles file import functionality with a modal interface. This component should: 1. Have a ‘Thêm mới’ button that, when clicked, opens a modal where the user can upload an Excel file. 2. The modal should have a button to download a sample Excel template (‘Tải file mẫu’) and a file upload area that accepts .xls and .xlsx files up to 10MB. 3. Include a ‘Hủy bỏ’ button to close the modal and a ‘Thêm mới’ button that shows a loading state when the file is being processed. 4. Implement client side validation: If the file fails validation, show an error message listing each error, such as invalid date ranges. 5. If validation passes, send the file to an API endpoint for upload. If the API call is successful, show a success message and allow the user to download the uploaded file. 6. If the upload fails, display another modal showing error details and provide an option to download the error report file.”

Prompt
Component Preview

About

FileImportModal - Easily upload .xls/.xlsx files with validation, download templates, and handle errors. Built with React and Tailwind. View and copy code!

Share

Last updated 1 month ago