feat: fix uploader
This commit is contained in:
Nevo David
parent
f1dfce9f1d
commit
52c8e18ea8
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -63,8 +63,6 @@ export const MediaBox: FC<{
|
|||
const [mediaList, setListMedia] = useState<Media[]>([]);
|
||||
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<HTMLInputElement>) => {
|
||||
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"
|
||||
>
|
||||
<div className="relative flex gap-2 items-center justify-center">
|
||||
<input
|
||||
type="file"
|
||||
className="absolute left-0 top-0 w-full h-full opacity-0"
|
||||
accept={
|
||||
type === 'video'
|
||||
? 'video/mp4'
|
||||
: type === 'image'
|
||||
? 'image/*'
|
||||
: 'image/*,video/mp4'
|
||||
}
|
||||
onChange={uploadMedia}
|
||||
/>
|
||||
<MultipartFileUploader
|
||||
onUploadSuccess={mutate}
|
||||
allowedFileTypes={
|
||||
|
|
@ -207,24 +140,24 @@ export const MediaBox: FC<{
|
|||
<div
|
||||
className={clsx(
|
||||
'flex flex-wrap gap-[10px] mt-[35px] pt-[20px]',
|
||||
!mediaList.length && 'justify-center items-center text-white'
|
||||
!!mediaList.length && 'justify-center items-center text-white'
|
||||
)}
|
||||
>
|
||||
{!mediaList.length && (
|
||||
<div className="flex flex-col text-center">
|
||||
<div>You don{"'"}t have any assets yet.</div>
|
||||
<div>Click the button below to upload one</div>
|
||||
<div className="mt-[10px]">
|
||||
{/*<MultipartFileUploader*/}
|
||||
{/* onUploadSuccess={mutate}*/}
|
||||
{/* allowedFileTypes={*/}
|
||||
{/* type === 'video'*/}
|
||||
{/* ? 'video/mp4'*/}
|
||||
{/* : type === 'image'*/}
|
||||
{/* ? 'image/*'*/}
|
||||
{/* : 'image/*,video/mp4'*/}
|
||||
{/* }*/}
|
||||
{/*/>*/}
|
||||
<div className="mt-[10px] justify-center items-center flex flex-col-reverse gap-[10px]">
|
||||
<MultipartFileUploader
|
||||
onUploadSuccess={mutate}
|
||||
allowedFileTypes={
|
||||
type === 'video'
|
||||
? 'video/mp4'
|
||||
: type === 'image'
|
||||
? 'image/*'
|
||||
: 'image/*,video/mp4'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<MultipartFileUploaderAfter
|
||||
onUploadSuccess={onUploadSuccess}
|
||||
onUploadSuccess={onUploadSuccessExtended}
|
||||
allowedFileTypes={allowedFileTypes}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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' },
|
||||
|
|
|
|||
Loading…
Reference in New Issue