dwd-projects/bs-p2
1
0
Fork 0
generated from dwd/boilarplate-remix-tailwind-antd
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

s1

Browse Source
This commit is contained in:
Suvodip
2024-08-13 18:50:45 +05:30
parent 5ae9d77c5a
commit bcae7c673f
26 changed files with 359 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
app/components/ExaminationsPractical.tsx
View File

@@ -6,31 +6,45 @@ import { InboxOutlined } from '@ant-design/icons';
import type { UploadProps } from 'antd';
import { message, Upload } from 'antd';
const { Dragger } = Upload;
const props: UploadProps = {
name: 'file',
multiple: true,
action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
onChange(info) {
const { status } = info.file;
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.`);
}
},
onDrop(e) {
console.log('Dropped files', e.dataTransfer.files);
},
};
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);
};
@@ -70,13 +84,15 @@ const App: React.FC = () => {
</div>
</Dragger>
</div>
{/* <p>{uploadingNumber} / {fileCount}</p> */}
<div className='flex flex-col space-y-3'>
<label className='text-[16px ] font-[600]' htmlFor="title">Title *</label>
<input className='border-[1px] border-[#CFCFCF] rounded-[8px] p-2.5 focus:outline-none' placeholder='Enter Title here' type="text" name="title" id="title" />
</div>
<div className='flex flex-col space-y-3'>
<label className='text-[16px ] font-[600]' htmlFor="subject">Subject *</label>
<select className='border-[1px] border-[#CFCFCF] bg-[#fff] rounded-[8px] p-2.5 focus:outline-none' name="subject" id="subject">
<select className='border-[1px] border-[#CFCFCF] text-[#9D9D9D] bg-[#fff] rounded-[8px] p-2.5 focus:outline-none' name="subject" id="subject">
<option value="0">Select the Subject here</option>
<option value="Subject-1">Subject-1</option>
<option value="Subject-2">Subject-2</option>
<option value="Subject-3">Subject-3</option>
@@ -85,7 +101,8 @@ const App: React.FC = () => {
</div>
<div className='flex flex-col space-y-3'>
<label className='text-[16px ] font-[600]' htmlFor="practical-exercise">Practical Exercise *</label>
<select className='border-[1px] border-[#CFCFCF] bg-[#fff] rounded-[8px] p-2.5 focus:outline-none' name="practical-exercise" id="practical-exercise">
<select className='border-[1px] border-[#CFCFCF] text-[#9D9D9D] bg-[#fff] rounded-[8px] p-2.5 focus:outline-none' name="practical-exercise" id="practical-exercise">
<option value="0">Choose the practical exercise here</option>
<option value="Practical Exercise-1">Practical Exercise-1</option>
<option value="Practical Exercise-2">Practical Exercise-2</option>
<option value="Practical Exercise-3">Practical Exercise-3</option>