50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
|
import { useFormikContext } from "formik";
|
||
|
|
|
||
|
|
import FormGroup from "../components/FormGroup";
|
||
|
|
import { toast } from "sonner";
|
||
|
|
|
||
|
|
type SystemFileUploadProps = {
|
||
|
|
name: string;
|
||
|
|
selectedFile: File | null | undefined;
|
||
|
|
};
|
||
|
|
|
||
|
|
const SystemFileUpload = ({ name, selectedFile }: SystemFileUploadProps) => {
|
||
|
|
const { setFieldValue } = useFormikContext();
|
||
|
|
const handleFileUploadClick = () => console.log(selectedFile);
|
||
|
|
return (
|
||
|
|
<div className="py-8 w-full">
|
||
|
|
<FormGroup>
|
||
|
|
<div className="flex-1 flex justify-end md:w-2/3">
|
||
|
|
<input
|
||
|
|
type="file"
|
||
|
|
name="softwareUpdate"
|
||
|
|
id="softwareUpdate"
|
||
|
|
className="file:px-10 file:border file:border-gray-500 file:rounded-lg file:bg-blue-800 file:mr-5 w-full max-w-xs"
|
||
|
|
onChange={(event) => {
|
||
|
|
const file = event.currentTarget.files?.[0];
|
||
|
|
if (!file) {
|
||
|
|
toast.error("No File selected");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (file?.size > 8 * 1024 * 1024)
|
||
|
|
toast.error("File is too large (max 8MB).");
|
||
|
|
setFieldValue(name, file);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</FormGroup>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="w-full max-w-md text-white bg-[#26B170] hover:bg-green-700 font-small rounded-lg text-sm px-2 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
|
||
|
|
disabled={!selectedFile}
|
||
|
|
onClick={handleFileUploadClick}
|
||
|
|
>
|
||
|
|
Upload Software Update
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default SystemFileUpload;
|