From 52c8e18ea8f85470449769fdbce592c9792676bf Mon Sep 17 00:00:00 2001 From: Nevo David Date: Sun, 21 Jul 2024 14:38:17 +0700 Subject: [PATCH] feat: fix uploader --- apps/frontend/src/app/global.css | 6 +- .../src/components/media/media.component.tsx | 91 +++---------------- .../src/components/media/new.uploader.tsx | 24 ++++- apps/frontend/tailwind.config.js | 7 +- 4 files changed, 41 insertions(+), 87 deletions(-) diff --git a/apps/frontend/src/app/global.css b/apps/frontend/src/app/global.css index e4965efa..64eb6670 100644 --- a/apps/frontend/src/app/global.css +++ b/apps/frontend/src/app/global.css @@ -352,10 +352,12 @@ html { } .uppy-ProgressBar-inner[style='width: 0%;'], -.uppy-ProgressBar-inner[style='width: 0%;'] + div, +.uppy-ProgressBar-inner[style='width: 0%;'] + div { + opacity: 0; +} .uppy-ProgressBar-inner[style='width: 100%;'], .uppy-ProgressBar-inner[style='width: 100%;'] + div { - visibility: hidden; + @apply animate-normalFadeOut; } .fill-text-white { diff --git a/apps/frontend/src/components/media/media.component.tsx b/apps/frontend/src/components/media/media.component.tsx index 61526a33..410b60ae 100644 --- a/apps/frontend/src/components/media/media.component.tsx +++ b/apps/frontend/src/components/media/media.component.tsx @@ -63,8 +63,6 @@ export const MediaBox: FC<{ const [mediaList, setListMedia] = useState([]); const fetch = useFetch(); const mediaDirectory = useMediaDirectory(); - const toaster = useToaster(); - const [uploadProgress, setUploadProgress] = useState(0); const [loading, setLoading] = useState(false); @@ -72,59 +70,6 @@ export const MediaBox: FC<{ return (await fetch('/media')).json(); }, []); - const uploadMedia = useCallback( - async (event: ChangeEvent) => { - const file = event.target.files?.[0]!; - const totalChunks = Math.ceil(file.size / CHUNK_SIZE); - for (let i = 0; i < totalChunks; i++) { - const chunk = file.slice(i, i + CHUNK_SIZE); - const formData = new FormData(); - formData.append('chunk', chunk); - formData.append('chunkNumber', String(i)); - formData.append('totalChunks', String(totalChunks)); - formData.append('fileName', file.name); - - const percent = ((i + 1) / totalChunks) * 100; - setUploadProgress(percent); - - const data = await ( - await fetch('/media', { - method: 'POST', - body: formData, - }) - ).json(); - } - - // const maxFileSize = - // (file?.target?.files?.[0].name.indexOf('mp4') || -1) > -1 - // ? 100 * 1024 * 1024 - // : 10 * 1024 * 1024; - // - // if ( - // !file?.target?.files?.length || - // file?.target?.files?.[0]?.size > maxFileSize - // ) { - // toaster.show( - // `Maximum file size ${maxFileSize / 1024 / 1024}mb`, - // 'warning' - // ); - // return; - // } - // const formData = new FormData(); - // formData.append('file', file?.target?.files?.[0]); - // setLoading(true); - // const data = await ( - // await fetch('/media', { - // method: 'POST', - // body: formData, - // }) - // ).json(); - // setLoading(false); - setListMedia([...mediaList, data]); - }, - [mediaList] - ); - const setNewMedia = useCallback( (media: Media) => () => { setMedia(media); @@ -178,18 +123,6 @@ export const MediaBox: FC<{ type="button" >
- {!mediaList.length && (
You don{"'"}t have any assets yet.
Click the button below to upload one
-
- {/**/} +
+
)} diff --git a/apps/frontend/src/components/media/new.uploader.tsx b/apps/frontend/src/components/media/new.uploader.tsx index ca6e66af..3e4f5330 100644 --- a/apps/frontend/src/components/media/new.uploader.tsx +++ b/apps/frontend/src/components/media/new.uploader.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useMemo, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; // @ts-ignore import Uppy, { UploadResult } from '@uppy/core'; // @ts-ignore @@ -10,8 +10,8 @@ import sha256 from 'sha256'; import { FileInput, ProgressBar } from '@uppy/react'; // Uppy styles -import "@uppy/core/dist/style.min.css"; -import "@uppy/dashboard/dist/style.min.css"; +import '@uppy/core/dist/style.min.css'; +import '@uppy/dashboard/dist/style.min.css'; const fetchUploadApiEndpoint = async ( fetch: any, @@ -39,18 +39,32 @@ export function MultipartFileUploader({ allowedFileTypes: string; }) { const [loaded, setLoaded] = useState(false); + const [reload, setReload] = useState(false); + + const onUploadSuccessExtended = useCallback((result: UploadResult) => { + setReload(true); + onUploadSuccess(result); + }, [onUploadSuccess]); + + useEffect(() => { + if (reload) { + setTimeout(() => { + setReload(false); + }, 1); + } + }, [reload]); useEffect(() => { setLoaded(true); }, []); - if (!loaded) { + if (!loaded || reload) { return null; } return ( ); diff --git a/apps/frontend/tailwind.config.js b/apps/frontend/tailwind.config.js index 492b1ab5..2d2accd3 100644 --- a/apps/frontend/tailwind.config.js +++ b/apps/frontend/tailwind.config.js @@ -39,10 +39,11 @@ module.exports = { loginBg: 'url(/auth/bg-login.png)', }, fontFamily: { - sans: ["Helvetica Neue"], + sans: ['Helvetica Neue'], }, animation: { fade: 'fadeOut 0.5s ease-in-out', + normalFadeOut: 'normalFadeOut 0.5s linear 5s forwards', overflow: 'overFlow 0.5s ease-in-out forwards', overflowReverse: 'overFlowReverse 0.5s ease-in-out forwards', fadeDown: 'fadeDown 4s ease-in-out forwards', @@ -60,6 +61,10 @@ module.exports = { '0%': { opacity: 0, transform: 'translateY(30px)' }, '100%': { opacity: 1, transform: 'translateY(0)' }, }, + normalFadeOut: { + '0%': { opacity: 1 }, + '100%': { opacity: 0 }, + }, overFlow: { '0%': { overflow: 'hidden' }, '99%': { overflow: 'hidden' },