50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
"use client";
|
|
import ApiFetch from "@/lib/api-fetch";
|
|
import { Group, Stack, Text } from "@mantine/core";
|
|
import { Dropzone } from "@mantine/dropzone";
|
|
import { useState } from "react";
|
|
import toast from "react-simple-toasts";
|
|
|
|
export default function UploadCsv() {
|
|
return (
|
|
<Stack p={"md"}>
|
|
<DropUpload />
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
function DropUpload() {
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
return (
|
|
<Stack justify="center" align="center">
|
|
<Group>
|
|
<Dropzone
|
|
loading={loading}
|
|
miw={460}
|
|
// accept csv
|
|
accept={["text/csv"]}
|
|
onDrop={async (droppedFiles) => {
|
|
if (droppedFiles.length < 0) {
|
|
return toast("Tidak ada file yang diunggah");
|
|
}
|
|
|
|
setLoading(true);
|
|
for (const file of droppedFiles) {
|
|
await ApiFetch.api["upl-csv-single"].post({
|
|
name: file.name,
|
|
file,
|
|
});
|
|
}
|
|
setLoading(false);
|
|
}}
|
|
>
|
|
<Stack>
|
|
<Text ta="center">Drop Csv here</Text>
|
|
</Stack>
|
|
</Dropzone>
|
|
</Group>
|
|
</Stack>
|
|
);
|
|
}
|