diff --git a/apps/frontend/next.config.js b/apps/frontend/next.config.js index 74aaf0ad..3df2713a 100644 --- a/apps/frontend/next.config.js +++ b/apps/frontend/next.config.js @@ -12,6 +12,7 @@ const nextConfig = { // See: https://github.com/gregberge/vgr svgr: false, }, + transpilePackages: ['crypto-hash'], images: { remotePatterns: [ { diff --git a/apps/frontend/src/components/media/media.component.tsx b/apps/frontend/src/components/media/media.component.tsx index 3c5bf88d..61526a33 100644 --- a/apps/frontend/src/components/media/media.component.tsx +++ b/apps/frontend/src/components/media/media.component.tsx @@ -14,13 +14,7 @@ import { VideoFrame } from '@gitroom/react/helpers/video.frame'; import { useToaster } from '@gitroom/react/toaster/toaster'; import { LoadingComponent } from '@gitroom/frontend/components/layout/loading'; import dynamic from 'next/dynamic'; -const MultipartFileUploader = dynamic( - () => - import('@gitroom/frontend/components/media/new.uploader').then( - (mod) => mod.MultipartFileUploader - ), - { ssr: false } -); +import { MultipartFileUploader } from '@gitroom/frontend/components/media/new.uploader'; const showModalEmitter = new EventEmitter(); export const ShowMediaBoxModal: FC = () => { @@ -221,16 +215,16 @@ export const MediaBox: FC<{
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 7e5da790..ca6e66af 100644 --- a/apps/frontend/src/components/media/new.uploader.tsx +++ b/apps/frontend/src/components/media/new.uploader.tsx @@ -1,15 +1,18 @@ -import React from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; // @ts-ignore -import Uppy, { type UploadResult } from '@uppy/core'; -// @ts-ignore -import { ProgressBar, FileInput } from '@uppy/react'; -// @ts-ignore -import { sha256 } from 'crypto-hash'; +import Uppy, { UploadResult } from '@uppy/core'; // @ts-ignore import AwsS3Multipart from '@uppy/aws-s3-multipart'; // @ts-ignore import { useFetch } from '@gitroom/helpers/utils/custom.fetch'; +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"; + const fetchUploadApiEndpoint = async ( fetch: any, endpoint: string, @@ -34,20 +37,47 @@ export function MultipartFileUploader({ // @ts-ignore onUploadSuccess: (result: UploadResult) => void; allowedFileTypes: string; +}) { + const [loaded, setLoaded] = useState(false); + + useEffect(() => { + setLoaded(true); + }, []); + + if (!loaded) { + return null; + } + + return ( + + ); +} + +export function MultipartFileUploaderAfter({ + onUploadSuccess, + allowedFileTypes, +}: { + // @ts-ignore + onUploadSuccess: (result: UploadResult) => void; + allowedFileTypes: string; }) { const fetch = useFetch(); - const uppy = React.useMemo(() => { - const uppy = new Uppy({ + const uppy = useMemo(() => { + const uppy2 = new Uppy({ autoProceed: true, restrictions: { maxNumberOfFiles: 1, allowedFileTypes: allowedFileTypes.split(','), - maxFileSize: 1000000, + maxFileSize: 1000000000, }, }).use(AwsS3Multipart, { // @ts-ignore createMultipartUpload: async (file) => { const arrayBuffer = await new Response(file.data).arrayBuffer(); + // @ts-ignore const fileHash = await sha256(arrayBuffer); const contentType = file.type; return fetchUploadApiEndpoint(fetch, 'create-multipart-upload', { @@ -75,29 +105,31 @@ export function MultipartFileUploader({ ...props, }), }); - return uppy; - }, []); - uppy.on('complete', (result) => { - onUploadSuccess(result); - }); - uppy.on('upload-success', (file, response) => { - // @ts-ignore - uppy.setFileState(file.id, { - // @ts-ignore - progress: uppy.getState().files[file.id].progress, - // @ts-ignore - uploadURL: response.body.Location, - response: response, - isPaused: false, + + uppy2.on('complete', (result) => { + onUploadSuccess(result); }); - }); + + uppy2.on('upload-success', (file, response) => { + // @ts-ignore + uppy.setFileState(file.id, { + // @ts-ignore + progress: uppy.getState().files[file.id].progress, + // @ts-ignore + uploadURL: response.body.Location, + response: response, + isPaused: false, + }); + }); + + return uppy2; + }, []); return ( <> = 0.6" } }, + "node_modules/convert-hex": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/convert-hex/-/convert-hex-0.1.0.tgz", + "integrity": "sha512-w20BOb1PiR/sEJdS6wNrUjF5CSfscZFUp7R9NSlXH8h2wynzXVEPFPJECAnkNylZ+cvf3p7TyRUHggDmrwXT9A==" + }, "node_modules/convert-source-map": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", "dev": true }, + "node_modules/convert-string": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/convert-string/-/convert-string-0.1.0.tgz", + "integrity": "sha512-1KX9ESmtl8xpT2LN2tFnKSbV4NiarbVi8DVb39ZriijvtTklyrT+4dT1wsGMHKD3CJUjXgvJzstm9qL9ICojGA==" + }, "node_modules/cookie": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz", @@ -17912,11 +17932,11 @@ } }, "node_modules/crypto-hash": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/crypto-hash/-/crypto-hash-2.0.1.tgz", - "integrity": "sha512-t4mkp7Vh6MuCZRBf0XLzBOfhkH3nW6YEAotMDSjshVQ1GffCMGdPLSr7pKH0rdXY02jTjAZ7QW2apD0buaZXcQ==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/crypto-hash/-/crypto-hash-3.0.0.tgz", + "integrity": "sha512-5l5xGtzuvGTU28GXxGV1JYVFou68buZWpkV1Fx5hIDRPnfbQ8KzabTlNIuDIeSCYGVPFehupzDqlnbXm2IXmdQ==", "engines": { - "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + "node": ">=18" }, "funding": { "url": "https://github.com/sponsors/sindresorhus" @@ -35544,6 +35564,15 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "node_modules/sha256": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/sha256/-/sha256-0.2.0.tgz", + "integrity": "sha512-kTWMJUaez5iiT9CcMv8jSq6kMhw3ST0uRdcIWl3D77s6AsLXNXRp3heeqqfu5+Dyfu4hwpQnMzhqHh8iNQxw0w==", + "dependencies": { + "convert-hex": "~0.1.0", + "convert-string": "~0.1.0" + } + }, "node_modules/shallow-clone": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz", diff --git a/package.json b/package.json index b2619db7..7a059f59 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "@types/mime-types": "^2.1.4", "@types/multer": "^1.4.11", "@types/remove-markdown": "^0.3.4", + "@types/sha256": "^0.2.2", "@types/stripe": "^8.0.417", "@types/yup": "^0.32.0", "@uidotdev/usehooks": "^2.4.1", @@ -74,7 +75,7 @@ "concat-stream": "^2.0.0", "cookie-parser": "^1.4.6", "copy-to-clipboard": "^3.3.3", - "crypto-hash": "^2.0.1", + "crypto-hash": "^3.0.0", "dayjs": "^1.11.10", "google-auth-library": "^9.11.0", "googleapis": "^137.1.0", @@ -107,6 +108,7 @@ "remove-markdown": "^0.5.0", "resend": "^3.2.0", "rxjs": "^7.8.0", + "sha256": "^0.2.0", "sharp": "^0.33.4", "simple-statistics": "^7.8.3", "stripe": "^15.5.0",