import React, { useState } from 'react'; import { Button, Modal } from 'antd'; import { InboxOutlined } from '@ant-design/icons'; import type { UploadProps } from 'antd'; import { message, Upload } from 'antd'; const { Dragger } = Upload; const App: React.FC = () => { const [fileCount, setFileCount] = useState(0); const [uploadingNumber, setUploadingNumber] = useState(0); const props: UploadProps = { name: 'file', multiple: true, action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload', onChange(info) { const { status } = info.file; setFileCount(info.fileList.length); // Update file count whenever files are added or removed if (status !== 'uploading') { // console.log(info.file, info.fileList); } if (status === 'done') { message.success(`${info.file.name} file uploaded successfully.`); } else if (status === 'error') { message.error(`${info.file.name} file upload failed.`); setUploadingNumber(currentFile => currentFile + 1); } }, onDrop(e) { // console.log('Dropped files', e.dataTransfer.files); setFileCount(e.dataTransfer.files.length); // Update file count on drop // setUploadingNumber(currentFile => currentFile + 1); }, }; const [isModalOpen, setIsModalOpen] = useState(false); const showModal = () => { setIsModalOpen(true); }; const handleOk = () => { setIsModalOpen(false); }; const handleCancel = () => { setIsModalOpen(false); }; const customCloseButton = () => { setIsModalOpen(false); }; return ( <>

{/* width={771} */} {/* */}

Browse or drop a file here

Supported formats: JPEG, PNG PDF, Word, PPT

{/*

{uploadingNumber} / {fileCount}

*/}

Title *

Subject *

Practical Exercise *

); }; export default App;