mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
refactor(FE-438): Replace FileInput with custom file upload UI
This commit is contained in:
rstubryan
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useFormik } from 'formik';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Icon } from '@iconify/react';
|
||||
@@ -14,7 +14,6 @@ import SelectInput, {
|
||||
OptionType,
|
||||
useSelect,
|
||||
} from '@/components/input/SelectInput';
|
||||
import FileInput from '@/components/input/FileInput';
|
||||
|
||||
import {
|
||||
UniformityFormSchema,
|
||||
@@ -57,6 +56,8 @@ const UniformityForm = ({
|
||||
const [uniformityFormErrorMessage, setUniformityFormErrorMessage] =
|
||||
useState('');
|
||||
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// ===== SELECT INPUT DATA =====
|
||||
const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
|
||||
null
|
||||
@@ -451,50 +452,105 @@ const UniformityForm = ({
|
||||
/>
|
||||
|
||||
<div>
|
||||
<FileInput
|
||||
required
|
||||
name='files'
|
||||
label='Upload File'
|
||||
onChange={handleFileChange}
|
||||
accept='application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv'
|
||||
isError={formik.touched.files && Boolean(formik.errors.files)}
|
||||
errorMessage={formik.errors.files as string}
|
||||
className={{ wrapper: 'w-full' }}
|
||||
/>
|
||||
|
||||
{formik.values.files && (
|
||||
<div className='mt-4 flex flex-col gap-2'>
|
||||
<label className='text-sm font-semibold'>
|
||||
File yang dipilih:
|
||||
</label>
|
||||
<div className='flex items-center justify-between gap-4 p-3 bg-base-200 rounded-lg'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Icon
|
||||
icon='material-symbols:attach-file'
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
<span className='text-sm'>
|
||||
{formik.values.files.name}
|
||||
<label
|
||||
htmlFor='file-upload-input'
|
||||
className="w-full text-sm font-normal leading-5 after:content-['*'] after:ml-0.5 after:text-red-500"
|
||||
>
|
||||
Upload File
|
||||
</label>
|
||||
<section
|
||||
className='h-full w-full border border-gray-300 rounded-2xl border-dashed cursor-pointer mt-2'
|
||||
onClick={() =>
|
||||
document.getElementById('file-upload-input')?.click()
|
||||
}
|
||||
>
|
||||
{formik.values.files ? (
|
||||
<div className='flex flex-col items-center justify-center gap-2 my-10'>
|
||||
<div className='border border-[#18181B]/25 rounded-2xl p-1 flex items-center justify-center'>
|
||||
<Button
|
||||
type='button'
|
||||
className='rounded-2xl border border-sky-500 bg-[#0069E0] text-white'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
document.getElementById('file-upload-input')?.click();
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
icon={'heroicons:document-text'}
|
||||
className='text-2xl text-white'
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
<span className='text-md font-semibold text-black line-clamp-2 text-center max-w-xs break-all'>
|
||||
{formik.values.files.name}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className='flex flex-col items-center justify-center gap-2 my-10 mb-0!'>
|
||||
<div className='border border-[#18181B]/25 rounded-2xl p-1 flex items-center justify-center'>
|
||||
<Button
|
||||
type='button'
|
||||
className='rounded-2xl border border-sky-500 bg-[#0069E0] text-white'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
document
|
||||
.getElementById('file-upload-input')
|
||||
?.click();
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
icon={'heroicons-solid:arrow-up-tray'}
|
||||
className='text-2xl text-white'
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
<span className='text-md font-semibold text-[#18181B80]'>
|
||||
Drag file to this area to upload
|
||||
</span>
|
||||
<span className='text-xs text-base-content/60'>
|
||||
({(formik.values.files.size / 1024).toFixed(2)} KB)
|
||||
<span className='text-xs font-light text-[#18181B80] text-center max-w-xs px-4'>
|
||||
Upload data file (*.csv)
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={handleRemoveFile}
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:delete-outline-rounded'
|
||||
width={18}
|
||||
height={18}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className='flex items-center justify-center gap-2 py-4'>
|
||||
<div className='h-px bg-[#18181B33] w-8'></div>
|
||||
<span className='text-[#18181B33] text-xs'>
|
||||
Templates
|
||||
</span>
|
||||
<div className='h-px bg-[#18181B33] w-8'></div>
|
||||
</div>
|
||||
|
||||
<div className='flex items-center justify-center mb-10'>
|
||||
<Button
|
||||
type='button'
|
||||
variant='outline'
|
||||
className='btn-sm rounded-2xl shadow-md border border-base-300'
|
||||
href='https://www.timestored.com/data/sample/chickweight.csv'
|
||||
target='_blank'
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Icon
|
||||
icon='heroicons:arrow-down-tray'
|
||||
width={18}
|
||||
height={18}
|
||||
/>
|
||||
Template CSV
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type='file'
|
||||
id='file-upload-input'
|
||||
name='files'
|
||||
accept='application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv'
|
||||
onChange={handleFileChange}
|
||||
className='hidden'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
|
||||
Reference in New Issue
Block a user