From 3a4b40ef27d83a7434176f6eb63cf125e0ea50d9 Mon Sep 17 00:00:00 2001 From: Derrick Hammer Date: Mon, 18 Mar 2024 10:12:27 -0400 Subject: [PATCH] refactor: remove uploader from uppy hook and check by the upload size limit if we use tus plugin or just file post. additionally add a onBeforeUpload filter to set the custom uploader property. --- app/components/lib/uppy.ts | 68 +++++++++++++++++++++++++++----------- 1 file changed, 48 insertions(+), 20 deletions(-) diff --git a/app/components/lib/uppy.ts b/app/components/lib/uppy.ts index 6b725f8..522f658 100644 --- a/app/components/lib/uppy.ts +++ b/app/components/lib/uppy.ts @@ -1,17 +1,13 @@ -import Uppy, { type State, debugLogger } from "@uppy/core" +import Uppy, {debugLogger, type State, UppyFile} from "@uppy/core" import Tus from "@uppy/tus" import toArray from "@uppy/utils/lib/toArray" -import { - type ChangeEvent, - useCallback, - useEffect, - useMemo, - useRef, - useState -} from "react" -import DropTarget, { type DropTargetOptions } from "./uppy-dropzone" +import {type ChangeEvent, useCallback, useEffect, useMemo, useRef, useState} from "react" +import DropTarget, {type DropTargetOptions} from "./uppy-dropzone" +import {useSdk} from "~/components/lib/sdk-context.js"; +import UppyFileUpload from "~/components/lib/uppy-file-upload.js"; +import {Sdk} from "@lumeweb/portal-sdk"; const LISTENING_EVENTS = [ "upload", @@ -23,12 +19,26 @@ const LISTENING_EVENTS = [ ] as const export function useUppy({ - uploader, endpoint }: { - uploader: "tus" endpoint: string }) { + const sdk = useSdk() + + const [uploadLimit, setUploadLimit] = useState(0) + + useEffect(() => { + async function getUploadLimit() { + try { + const limit = await sdk.account!().uploadLimit(); + setUploadLimit(limit); + } catch (err) { + console.log('Error occured while fetching upload limit', err); + } + } + getUploadLimit(); + }, []); + const inputRef = useRef(null) const [targetRef, _setTargetRef] = useState(null) const uppyInstance = useRef() @@ -82,7 +92,17 @@ export function useUppy({ useEffect(() => { if (!targetRef) return - const uppy = new Uppy({ logger: debugLogger }).use(DropTarget, { + const uppy = new Uppy({ + logger: debugLogger, + onBeforeUpload: (files) => { + for (const file of Object.entries(files)) { + // @ts-ignore + file[1].uploader = file[1].size > uploadLimit ? "tus" : "file"; + } + + return true; + }, + }).use(DropTarget, { target: targetRef } as DropTargetOptions) @@ -109,12 +129,20 @@ export function useUppy({ } }) - switch (uploader) { - case "tus": - uppy.use(Tus, { endpoint: endpoint, limit: 6 }) - break - default: - } + + uppy.use(UppyFileUpload, { sdk: sdk as Sdk }) + + let useTus = false; + + uppyInstance.current?.getFiles().forEach((file) => { + if (file.size > uploadLimit) { + useTus = true; + } + }) + + if (useTus) { + uppy.use(Tus, { endpoint: endpoint, limit: 6 }) + } uppy.on("complete", (result) => { if (result.failed.length === 0) { @@ -148,7 +176,7 @@ export function useUppy({ }) } setState("idle") - }, [targetRef, endpoint, uploader]) + }, [targetRef, endpoint, uploadLimit]) useEffect(() => { return () => {