You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
monitor-doc/resources/js/Pages/Document/ModalImport.jsx

95 lines
2.9 KiB
React

import React, { useRef } from 'react'
import { useForm } from '@inertiajs/react'
export default function ModalImport(props) {
const { modalState } = props
const { data, setData, post, progress, errors, clearErrors } = useForm({
file: null,
});
const inputFileImport = useRef();
const handleReset = () => {
setData({file: null});
inputFileImport.current.value = ""
clearErrors();
};
const handleCancel = () => {
modalState.toggle()
handleReset();
};
function handleSubmit(e) {
e.preventDefault();
post(route("docs.import"), {
forceFormData: false,
onSuccess: () => Promise.all([handleReset(), modalState.toggle()]),
});
return;
}
return (
<div
className="modal modal-bottom sm:modal-middle pb-10"
style={
modalState.isOpen
? {
opacity: 1,
pointerEvents: 'auto',
visibility: 'visible',
}
: {}
}
>
<div className="modal-box">
<h1 className="font-bold text-2xl pb-8">Import</h1>
<div className='flex flex-row items-center gap-2'>
<div
className={`btn ${
errors.photo && 'input-error'
}`}
onClick={() => {
console.log(inputFileImport.current.click())
}}
>Pilih File: </div>
<div>
{data.file ? data.file.name : 'Pilih File'}
</div>
</div>
<input
ref={inputFileImport}
type="file"
className="hidden"
onChange={(e) =>
setData("file", e.target.files[0])
}
/>
{progress && (
<progress className='progress' value={progress.percentage} max="100">
{progress.percentage}%
</progress>
)}
<div>
{errors.file}
</div>
<p>
Unduh format file import{" "}
<a
className="underline text-blue-500"
href="/sample-import.csv"
>
disini
</a>
</p>
<div className='flex justify-between mt-4 space-x-4'>
<div className='btn' onClick={handleSubmit}>Upload</div>
<div className='btn btn-outline' onClick={handleCancel}>Batal</div>
</div>
</div>
</div>
)
}