mediahub
/
mediahub-fe
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add file upload in content image

This commit is contained in:
hanif salafi 2025-01-02 10:32:38 +07:00
parent 99ea4f86d2
commit 7de49ebb08
1 changed files with 44 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
components/form/content/image-form.tsx
View File

@ -10,7 +10,7 @@ import * as z from "zod";
import { Upload } from 'tus-js-client'; import { Upload } from 'tus-js-client';
import Swal from "sweetalert2"; import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content"; import withReactContent from "sweetalert2-react-content";
import { useRouter } from "next/navigation"; import { redirect, useRouter } from "next/navigation";
import { import {
Select, Select,
SelectContent, SelectContent,
@ -52,7 +52,7 @@ import { useDropzone } from "react-dropzone";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import { CloudUpload } from "lucide-react"; import { CloudUpload } from "lucide-react";
import Image from "next/image"; import Image from "next/image";
import { error } from "@/config/swal"; import { error, loading } from "@/config/swal";
import { Item } from "@radix-ui/react-dropdown-menu"; import { Item } from "@radix-ui/react-dropdown-menu";
interface FileWithPreview extends File { interface FileWithPreview extends File {
@ -111,7 +111,8 @@ export default function FormImage() {
}); });
let fileTypeId = "1"; let fileTypeId = "1";
let progressInfo = []; let progressInfo: any = [];
let counterUpdateProgress = 0;
const [progressList, setProgressList] = useState<any>([]); const [progressList, setProgressList] = useState<any>([]);
let uploadPersen = 0; let uploadPersen = 0;
const [isStartUpload, setIsStartUpload] = useState(false); const [isStartUpload, setIsStartUpload] = useState(false);
@ -344,6 +345,7 @@ export default function FormImage() {
}; };
const save = async (data: ImageSchema) => { const save = async (data: ImageSchema) => {
loading();
const finalTitle = isSwitchOn ? title : data.title; const finalTitle = isSwitchOn ? title : data.title;
const requestData = { const requestData = {
...data, ...data,
@ -413,17 +415,7 @@ export default function FormImage() {
Cookies.remove('idCreate'); Cookies.remove('idCreate');
MySwal.fire("Sukses", "Data berhasil disimpan.", "success"); // MySwal.fire("Sukses", "Data berhasil disimpan.", "success");
MySwal.fire({
title: "Sukses",
text: "Data berhasil disimpan.",
icon: "success",
confirmButtonColor: "#3085d6",
confirmButtonText: "OK",
}).then(() => {
// router.push("/en/contributor/content/image");
});
}; };
// function showProgress() { // function showProgress() {
@ -465,32 +457,59 @@ export default function FormImage() {
filename: file.name, filename: file.name,
filetype: file.type, filetype: file.type,
duration, duration,
isWatermark: true, // hardcode isWatermark: 'true', // hardcode
}, },
onError: async (e: any) => { onError: async (e: any) => {
console.log('Error upload :', e); console.log('Error upload :', e);
error(e); error(e);
}, },
onChunkComplete: (chunkSize: any, bytesAccepted: any, bytesTotal: any) => { onChunkComplete: (chunkSize: any, bytesAccepted: any, bytesTotal: any) => {
// const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100); const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
// progressInfo[idx].percentage = uploadPersen; progressInfo[idx].percentage = uploadPersen;
// counterUpdateProgress++; counterUpdateProgress++;
// // console.log(counterUpdateProgress); console.log(counterUpdateProgress);
// setProgressList(progressInfo); setProgressList(progressInfo);
// setCounterProgress(counterUpdateProgress); setCounterProgress(counterUpdateProgress);
}, },
onSuccess: async () => { onSuccess: async () => {
uploadPersen = 100; uploadPersen = 100;
// progressInfo[idx].percentage = 100; progressInfo[idx].percentage = 100;
// counterUpdateProgress++; counterUpdateProgress++;
// setCounterProgress(counterUpdateProgress); setCounterProgress(counterUpdateProgress);
// successTodo(); successTodo();
}, },
}); });
upload.start(); upload.start();
} }
const successSubmit = (redirect: string) => {
MySwal.fire({
title: "Sukses",
text: "Data berhasil disimpan.",
icon: "success",
confirmButtonColor: "#3085d6",
confirmButtonText: "OK",
}).then(() => {
router.push(redirect);
});
}
function successTodo() {
let counter = 0;
for (const element of progressInfo) {
if (element.percentage == 100) {
counter++;
}
}
if (counter == progressInfo.length) {
setIsStartUpload(false);
// hideProgress();
Cookies.remove('idCreate');
successSubmit("/in/contributor/content/image/");
}
}
const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0]; const file = e.target.files?.[0];
if (file) { if (file) {