From 986fb7b124bf70fdc5e697ba4e096ed29bba20e2 Mon Sep 17 00:00:00 2001 From: Moinul Moin Date: Sat, 5 Oct 2024 13:27:43 +0600 Subject: [PATCH] fix: :bug: image uploading fix #240, #243 --- .gitignore | 4 +- package.json | 5 +- pnpm-lock.yaml | 304 ++++++++++-------- .../dashboard/settings/settings-form.tsx | 2 +- src/app/api/uploadthing/core.ts | 12 +- src/components/layout/image-upload-modal.tsx | 62 ++-- src/lib/uploadthing.ts | 9 +- 7 files changed, 225 insertions(+), 173 deletions(-) diff --git a/.gitignore b/.gitignore index e17d503..5c27e6f 100644 --- a/.gitignore +++ b/.gitignore @@ -48,4 +48,6 @@ workbox-*.* !.env.project !.env.vault -.velite \ No newline at end of file +.velite + +.cursorrules \ No newline at end of file diff --git a/package.json b/package.json index 64f73f0..fd5e19e 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "@radix-ui/react-toast": "^1.1.5", "@react-email/components": "^0.0.12", "@serwist/next": "^9.0.3", - "@uploadthing/react": "^6.0.2", + "@uploadthing/react": "^7.0.2", "arctic": "^1.9.1", "dayjs": "^1.11.10", "input-otp": "^1.2.4", @@ -43,12 +43,11 @@ "postcss": "8.4.35", "react": "18.2.0", "react-dom": "18.2.0", - "react-dropzone": "^14.2.3", "react-email": "1.10.0", "react-hook-form": "^7.49.2", "resend": "^3.4.0", "stripe": "^14.8.0", - "uploadthing": "^6.13.2", + "uploadthing": "^7.0.2", "zod": "^3.22.4" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 25ad80e..5cf209a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -52,10 +52,10 @@ importers: version: 0.0.12(@types/react@18.2.79)(react@18.2.0) '@serwist/next': specifier: ^9.0.3 - version: 9.0.3(next@14.2.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(typescript@5.3.3)(webpack@5.92.1) + version: 9.0.3(next@14.2.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(typescript@5.3.3)(webpack@5.95.0) '@uploadthing/react': - specifier: ^6.0.2 - version: 6.6.0(next@14.2.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)(uploadthing@6.13.2(next@14.2.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(tailwindcss@3.4.1)) + specifier: ^7.0.2 + version: 7.0.2(next@14.2.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)(uploadthing@7.0.2(next@14.2.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(tailwindcss@3.4.1)) arctic: specifier: ^1.9.1 version: 1.9.1 @@ -95,9 +95,6 @@ importers: react-dom: specifier: 18.2.0 version: 18.2.0(react@18.2.0) - react-dropzone: - specifier: ^14.2.3 - version: 14.2.3(react@18.2.0) react-email: specifier: 1.10.0 version: 1.10.0(encoding@0.1.13) @@ -111,8 +108,8 @@ importers: specifier: ^14.8.0 version: 14.25.0 uploadthing: - specifier: ^6.13.2 - version: 6.13.2(next@14.2.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(tailwindcss@3.4.1) + specifier: ^7.0.2 + version: 7.0.2(next@14.2.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(tailwindcss@3.4.1) zod: specifier: ^3.22.4 version: 3.23.8 @@ -214,10 +211,16 @@ packages: peerDependencies: commander: 9.4.x - '@effect/schema@0.68.12': - resolution: {integrity: sha512-UWJsFXzeYTBQYnftwI1KR2uaxIZ8fk+kffDS7BnJwnGjPPgODq3/AzeoBDSu1MAlnwBKOz+QRdMuSMxrT/pHig==} + '@effect/platform@0.63.2': + resolution: {integrity: sha512-b39pVFw0NGo/tXjGShW7Yg0M+kG7bRrFR6+dQ3aIu99ePTkTp6bGb/kDB7n+dXsFFdIqHsQGYESeYcOQngxdFQ==} peerDependencies: - effect: ^3.4.5 + '@effect/schema': ^0.72.2 + effect: ^3.7.2 + + '@effect/schema@0.72.2': + resolution: {integrity: sha512-/x1BIA2pqcUidNrOMmwYe6Z58KtSgHSc5iJu7bNwIxi2LHMVuUao1BvpI5x6i7T/zkoi4dd1S6qasZzJIYDjdw==} + peerDependencies: + effect: ^3.7.2 '@emnapi/core@0.45.0': resolution: {integrity: sha512-DPWjcUDQkCeEM4VnljEOEcXdAD7pp8zSZsgOujk/LGIwCXWbXJngin+MO4zbH429lzeC3WbYLGjE2MaUOwzpyw==} @@ -1684,18 +1687,15 @@ packages: '@types/debug@4.1.12': resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==} - '@types/eslint-scope@3.7.7': - resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==} - - '@types/eslint@8.56.10': - resolution: {integrity: sha512-Shavhk87gCtY2fhXDctcfS3e6FdxWkCx1iUZ9eEUbh7rTqlZT0/IzOkCOVt0fCjcFuZ9FPYfuezTBImfHCDBGQ==} - '@types/estree-jsx@1.0.5': resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==} '@types/estree@1.0.5': resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==} + '@types/estree@1.0.6': + resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==} + '@types/hast@3.0.4': resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==} @@ -1792,24 +1792,21 @@ packages: vue: optional: true - '@uploadthing/mime-types@0.2.10': - resolution: {integrity: sha512-kz3F0oEgAyts25NAGXlUBCWh3mXonbSOQJFGFMawHuIgbUbnzXbe4w5WI+0XdneCbjNmikfWrdWrs8m/7HATfQ==} + '@uploadthing/mime-types@0.3.0': + resolution: {integrity: sha512-jN/XFvpKTzcd3MXT/9D9oxx05scnYiSYxAXF/e6hyg377zFducRxivU/kHyYTkpUZPTmOL5q9EQbOkUsXMlSMg==} - '@uploadthing/react@6.6.0': - resolution: {integrity: sha512-jLN4Oy21d0n8F6CNPl9qjEu0/Q1rnddSxny/02Lm89L/sYuR4RXfk1vBgBGPAGXBak0BO9z5eEmYURLrXXUAJQ==} + '@uploadthing/react@7.0.2': + resolution: {integrity: sha512-343zTofWBo1yR+31/oP75WCTCC1lUuyAhfoqgJ0MEY64i15KoQAaTe3ICSNnXyeRaHCmJSQeK3hbEl44QGq/iQ==} peerDependencies: next: '*' react: ^17.0.2 || ^18.0.0 - uploadthing: 6.12.0 + uploadthing: 7.0.2 peerDependenciesMeta: next: optional: true - '@uploadthing/shared@6.7.5': - resolution: {integrity: sha512-BZXzvh6zGEt4ip//mxfXdRTNWYw9XJ6tommL6A1TEo2l8jvdNbUpPUwXnMVWBMwio2b48BO7D9V3siYIKMD4pg==} - - '@uploadthing/shared@6.7.8': - resolution: {integrity: sha512-dLNa9GpdeiCHc/Nd0+BfaJ3wXvWIztBAaWIsNNPoaKiU3qhHoQd+5jDVx4oYKYVANqnv9s2CJW7di8Th5xy7Cw==} + '@uploadthing/shared@7.0.2': + resolution: {integrity: sha512-yhE7lA42m6g7Qw245Ey/8uK5J4d8FJhOg90VVt0PG1iJYvBZHbboSq1ndsGZ1X8jFaskBVORzWc66gEw43FEsQ==} '@webassemblyjs/ast@1.12.1': resolution: {integrity: sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==} @@ -1998,10 +1995,6 @@ packages: resolution: {integrity: sha512-ISvCdHdlTDlH5IpxQJIex7BWBywFWgjJSVdwst+/iQCoEYnyOaQ95+X1JGshuBjGp6nxKUy1jMgE3zPqN7fQdg==} hasBin: true - attr-accept@2.2.2: - resolution: {integrity: sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==} - engines: {node: '>=4'} - autoprefixer@10.4.16: resolution: {integrity: sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==} engines: {node: ^10 || ^12 || >=14} @@ -2057,6 +2050,11 @@ packages: engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true + browserslist@4.24.0: + resolution: {integrity: sha512-Rmb62sR1Zpjql25eSanFGEhAxcFwfA1K0GuQcLoaJBAcENegrQut3hYdhXFF1obQfiDyqIW/cLM5HSJ/9k884A==} + engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} + hasBin: true + buffer-from@1.1.2: resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==} @@ -2093,6 +2091,9 @@ packages: caniuse-lite@1.0.30001640: resolution: {integrity: sha512-lA4VMpW0PSUrFnkmVuEKBUovSWKhj7puyCg8StBChgu298N1AtuF1sKWEvfDuimSEDbhlb/KqPKC3fs1HbuQUA==} + caniuse-lite@1.0.30001667: + resolution: {integrity: sha512-7LTwJjcRkzKFmtqGsibMeuXmvFDfZq/nzIjnmgCGzKKRVzjD72selLDK1oPF/Oxzmt4fNcPvTDvGqSDG4tCALw==} + ccount@2.0.1: resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==} @@ -2221,10 +2222,6 @@ packages: config-chain@1.1.13: resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==} - consola@3.2.3: - resolution: {integrity: sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==} - engines: {node: ^14.18.0 || >=16.10.0} - cross-spawn@7.0.3: resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==} engines: {node: '>= 8'} @@ -2361,15 +2358,20 @@ packages: engines: {node: '>=14'} hasBin: true - effect@3.3.1: - resolution: {integrity: sha512-MP6W5NKSEgsQWgTZcLXTPu6sDjCO3Rqi9NFdYUBjlUZ1poCclLgzUerSVVnymE1oYBG1/7Ix82LpBp7EB5Lxmw==} + effect-log@0.32.0: + resolution: {integrity: sha512-zlh4S+zBkHeDhiV5IAAXwecqxASVJk9tYNJUb12EuJqgtRGGyhrXYNn8zz5Gk/w7PmnNLTl9Vb6bQo2BFn+J/Q==} + peerDependencies: + effect: ^3.7.0 - effect@3.4.5: - resolution: {integrity: sha512-aTonOH68tUttSdYwMkiuky3hjgn3pu7yInNaE8rU2EDKQ8zr9Me78WcvWBQKe4u1gvbBH77y9dAKqn98lNIfNQ==} + effect@3.7.2: + resolution: {integrity: sha512-pV7l1+LSZFvVObj4zuy4nYiBaC7qZOfrKV6s/Ef4p3KueiQwZFgamazklwyZ+x7Nyj2etRDFvHE/xkThTfQD1w==} electron-to-chromium@1.4.796: resolution: {integrity: sha512-NglN/xprcM+SHD2XCli4oC6bWe6kHoytcyLKCWXmRL854F0qhPhaYgUswUsglnPxYaNQIg2uMY4BvaomIf3kLA==} + electron-to-chromium@1.5.32: + resolution: {integrity: sha512-M+7ph0VGBQqqpTT2YrabjNKSQ2fEl9PVx6AK3N558gDH9NO8O6XN9SXXFWRo9u9PbEg/bWq+tjXQr+eXmxubCw==} + emoji-regex@8.0.0: resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} @@ -2383,6 +2385,10 @@ packages: resolution: {integrity: sha512-dwDPwZL0dmye8Txp2gzFmA6sxALaSvdRDjPH0viLcKrtlOL3tw62nWWweVD1SdILDTJrbrL6tdWVN58Wo6U3eA==} engines: {node: '>=10.13.0'} + enhanced-resolve@5.17.1: + resolution: {integrity: sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==} + engines: {node: '>=10.13.0'} + entities@4.5.0: resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==} engines: {node: '>=0.12'} @@ -2438,6 +2444,10 @@ packages: resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==} engines: {node: '>=6'} + escalade@3.2.0: + resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==} + engines: {node: '>=6'} + escape-string-regexp@1.0.5: resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==} engines: {node: '>=0.8.0'} @@ -2599,8 +2609,8 @@ packages: extend@3.0.2: resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==} - fast-check@3.19.0: - resolution: {integrity: sha512-CO2JX/8/PT9bDGO1iXa5h5ey1skaKI1dvecERyhH4pp3PGjwd3KIjMAXEg79Ps9nclsdt4oPbfqiAnLU0EwrAQ==} + fast-check@3.22.0: + resolution: {integrity: sha512-8HKz3qXqnHYp/VCNn2qfjHdAdcI8zcSqOyX64GOMukp7SL2bfzfeDKjSd+UyECtejccaZv3LcvZTm9YDD22iCQ==} engines: {node: '>=8.0.0'} fast-deep-equal@2.0.1: @@ -2634,6 +2644,9 @@ packages: resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==} engines: {node: '>=8'} + find-my-way-ts@0.1.5: + resolution: {integrity: sha512-4GOTMrpGQVzsCH2ruUn2vmwzV/02zF4q+ybhCIrw/Rkt3L8KWcycdC6aJMctJzwN4fXD4SD5F/4B9Sksh5rE0A==} + find-up@4.1.0: resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==} engines: {node: '>=8'} @@ -3446,6 +3459,9 @@ packages: ms@2.1.3: resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} + multipasta@0.2.5: + resolution: {integrity: sha512-c8eMDb1WwZcE02WVjHoOmUVk7fnKU/RmUcosHACglrWAuPQsEJv+E8430sXj6jNc1jHw0zrS16aCjQh4BcEb4A==} + mz@2.7.0: resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==} @@ -3504,6 +3520,9 @@ packages: node-releases@2.0.14: resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==} + node-releases@2.0.18: + resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==} + nopt@7.2.1: resolution: {integrity: sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==} engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} @@ -3650,6 +3669,9 @@ packages: picocolors@1.0.1: resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==} + picocolors@1.1.0: + resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==} + picomatch@2.3.1: resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} engines: {node: '>=8.6'} @@ -3828,12 +3850,6 @@ packages: peerDependencies: react: ^18.2.0 - react-dropzone@14.2.3: - resolution: {integrity: sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==} - engines: {node: '>= 10.13'} - peerDependencies: - react: '>= 16.8 || 18.0.0' - react-email@1.10.0: resolution: {integrity: sha512-IrLs28p3Iqyx9JASSrdEoTC+TQeb3jDcJ++2xzVS71yR6U8GYAqff7NKPGZJIA6z5oGtwRFv6GCViR4JiGdmXg==} engines: {node: '>=18.0.0'} @@ -4107,8 +4123,8 @@ packages: sprintf-js@1.0.3: resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==} - std-env@3.7.0: - resolution: {integrity: sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==} + sqids@0.3.0: + resolution: {integrity: sha512-lOQK1ucVg+W6n3FhRwwSeUijxe93b51Bfz5PMRMihVf1iVkl82ePQG7V5vwrhzB11v0NtsR25PSZRGiSomJaJw==} streamsearch@1.1.0: resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==} @@ -4257,6 +4273,11 @@ packages: engines: {node: '>=10'} hasBin: true + terser@5.34.1: + resolution: {integrity: sha512-FsJZ7iZLd/BXkz+4xrRTGJ26o/6VTjQytUk8b8OxkwcD2I+79VPJlz7qss1+zE7h8GNIScFqXcDyJ/KqBYZFVA==} + engines: {node: '>=10'} + hasBin: true + text-table@0.2.0: resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==} @@ -4399,19 +4420,22 @@ packages: peerDependencies: browserslist: '>= 4.21.0' - uploadthing@6.13.2: - resolution: {integrity: sha512-hrxwOgqKs8siczPloop72drRBiUYaFDHMp45OR/sSAaAbOPyGBmBL88Bi4UWCvgC+aBWCLRxtMEGeoqrfu+OMg==} + update-browserslist-db@1.1.1: + resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==} + hasBin: true + peerDependencies: + browserslist: '>= 4.21.0' + + uploadthing@7.0.2: + resolution: {integrity: sha512-B5/r0nmOfWjo+cGvZLyDQ8jypJYWoW/VsmoL+VqkiGMg5yIkKzMGJ5InrDOJS+3WQBbW8KdhVrRyA+mGSZEGUw==} engines: {node: '>=18.13.0'} peerDependencies: - '@effect/platform': '*' express: '*' fastify: '*' h3: '*' next: '*' tailwindcss: '*' peerDependenciesMeta: - '@effect/platform': - optional: true express: optional: true fastify: @@ -4463,8 +4487,8 @@ packages: vfile@6.0.1: resolution: {integrity: sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==} - watchpack@2.4.1: - resolution: {integrity: sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==} + watchpack@2.4.2: + resolution: {integrity: sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==} engines: {node: '>=10.13.0'} wcwidth@1.0.1: @@ -4480,8 +4504,8 @@ packages: resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==} engines: {node: '>=10.13.0'} - webpack@5.92.1: - resolution: {integrity: sha512-JECQ7IwJb+7fgUFBlrJzbyu3GEuNBcdqr1LD7IbSzwkSmIevTm8PF+wej3Oxuz/JFBUZ6O1o43zsPkwm1C4TmA==} + webpack@5.95.0: + resolution: {integrity: sha512-2t3XstrKULz41MNMBF+cJ97TyHdyQ8HCt//pqErqDvNjU9YQBnZxIHa11VXsi7F3mb5/aO2tuDxdeTPdU7xu9Q==} engines: {node: '>=10.13.0'} hasBin: true peerDependencies: @@ -4576,10 +4600,17 @@ snapshots: dependencies: commander: 9.4.1 - '@effect/schema@0.68.12(effect@3.4.5)': + '@effect/platform@0.63.2(@effect/schema@0.72.2(effect@3.7.2))(effect@3.7.2)': + dependencies: + '@effect/schema': 0.72.2(effect@3.7.2) + effect: 3.7.2 + find-my-way-ts: 0.1.5 + multipasta: 0.2.5 + + '@effect/schema@0.72.2(effect@3.7.2)': dependencies: - effect: 3.4.5 - fast-check: 3.19.0 + effect: 3.7.2 + fast-check: 3.22.0 '@emnapi/core@0.45.0': dependencies: @@ -5832,10 +5863,10 @@ snapshots: optionalDependencies: typescript: 5.3.3 - '@serwist/next@9.0.3(next@14.2.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(typescript@5.3.3)(webpack@5.92.1)': + '@serwist/next@9.0.3(next@14.2.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(typescript@5.3.3)(webpack@5.95.0)': dependencies: '@serwist/build': 9.0.3(typescript@5.3.3) - '@serwist/webpack-plugin': 9.0.3(typescript@5.3.3)(webpack@5.92.1) + '@serwist/webpack-plugin': 9.0.3(typescript@5.3.3)(webpack@5.95.0) '@serwist/window': 9.0.3(typescript@5.3.3) chalk: 5.3.0 glob: 10.4.1 @@ -5847,7 +5878,7 @@ snapshots: transitivePeerDependencies: - webpack - '@serwist/webpack-plugin@9.0.3(typescript@5.3.3)(webpack@5.92.1)': + '@serwist/webpack-plugin@9.0.3(typescript@5.3.3)(webpack@5.95.0)': dependencies: '@serwist/build': 9.0.3(typescript@5.3.3) pretty-bytes: 6.1.1 @@ -5855,7 +5886,7 @@ snapshots: zod: 3.23.8 optionalDependencies: typescript: 5.3.3 - webpack: 5.92.1 + webpack: 5.95.0 '@serwist/window@9.0.3(typescript@5.3.3)': dependencies: @@ -5896,24 +5927,15 @@ snapshots: dependencies: '@types/ms': 0.7.34 - '@types/eslint-scope@3.7.7': - dependencies: - '@types/eslint': 8.56.10 - '@types/estree': 1.0.5 - optional: true - - '@types/eslint@8.56.10': - dependencies: - '@types/estree': 1.0.5 - '@types/json-schema': 7.0.15 - optional: true - '@types/estree-jsx@1.0.5': dependencies: '@types/estree': 1.0.5 '@types/estree@1.0.5': {} + '@types/estree@1.0.6': + optional: true + '@types/hast@3.0.4': dependencies: '@types/unist': 3.0.2 @@ -6004,16 +6026,14 @@ snapshots: optionalDependencies: react: 18.2.0 - '@uploadthing/mime-types@0.2.10': {} + '@uploadthing/mime-types@0.3.0': {} - '@uploadthing/react@6.6.0(next@14.2.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)(uploadthing@6.13.2(next@14.2.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(tailwindcss@3.4.1))': + '@uploadthing/react@7.0.2(next@14.2.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)(uploadthing@7.0.2(next@14.2.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(tailwindcss@3.4.1))': dependencies: '@uploadthing/dropzone': 0.4.1(react@18.2.0) - '@uploadthing/shared': 6.7.5 - file-selector: 0.6.0 + '@uploadthing/shared': 7.0.2 react: 18.2.0 - tailwind-merge: 2.3.0 - uploadthing: 6.13.2(next@14.2.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(tailwindcss@3.4.1) + uploadthing: 7.0.2(next@14.2.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(tailwindcss@3.4.1) optionalDependencies: next: 14.2.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0) transitivePeerDependencies: @@ -6021,17 +6041,11 @@ snapshots: - svelte - vue - '@uploadthing/shared@6.7.5': - dependencies: - '@uploadthing/mime-types': 0.2.10 - effect: 3.3.1 - std-env: 3.7.0 - - '@uploadthing/shared@6.7.8': + '@uploadthing/shared@7.0.2': dependencies: - '@uploadthing/mime-types': 0.2.10 - effect: 3.4.5 - std-env: 3.7.0 + '@uploadthing/mime-types': 0.3.0 + effect: 3.7.2 + sqids: 0.3.0 '@webassemblyjs/ast@1.12.1': dependencies: @@ -6286,8 +6300,6 @@ snapshots: astring@1.8.6: {} - attr-accept@2.2.2: {} - autoprefixer@10.4.16(postcss@8.4.35): dependencies: browserslist: 4.23.1 @@ -6346,6 +6358,14 @@ snapshots: node-releases: 2.0.14 update-browserslist-db: 1.0.16(browserslist@4.23.1) + browserslist@4.24.0: + dependencies: + caniuse-lite: 1.0.30001667 + electron-to-chromium: 1.5.32 + node-releases: 2.0.18 + update-browserslist-db: 1.1.1(browserslist@4.24.0) + optional: true + buffer-from@1.1.2: {} buffer@5.7.1: @@ -6381,6 +6401,9 @@ snapshots: caniuse-lite@1.0.30001640: {} + caniuse-lite@1.0.30001667: + optional: true + ccount@2.0.1: {} chalk@1.1.3: @@ -6508,8 +6531,6 @@ snapshots: ini: 1.3.8 proto-list: 1.2.4 - consola@3.2.3: {} - cross-spawn@7.0.3: dependencies: path-key: 3.1.1 @@ -6640,12 +6661,17 @@ snapshots: minimatch: 9.0.1 semver: 7.6.2 - effect@3.3.1: {} + effect-log@0.32.0(effect@3.7.2): + dependencies: + effect: 3.7.2 - effect@3.4.5: {} + effect@3.7.2: {} electron-to-chromium@1.4.796: {} + electron-to-chromium@1.5.32: + optional: true + emoji-regex@8.0.0: {} emoji-regex@9.2.2: {} @@ -6659,6 +6685,12 @@ snapshots: graceful-fs: 4.2.11 tapable: 2.2.1 + enhanced-resolve@5.17.1: + dependencies: + graceful-fs: 4.2.11 + tapable: 2.2.1 + optional: true + entities@4.5.0: {} error-ex@1.3.2: @@ -6813,6 +6845,9 @@ snapshots: escalade@3.1.2: {} + escalade@3.2.0: + optional: true + escape-string-regexp@1.0.5: {} escape-string-regexp@4.0.0: {} @@ -7076,7 +7111,7 @@ snapshots: extend@3.0.2: {} - fast-check@3.19.0: + fast-check@3.22.0: dependencies: pure-rand: 6.1.0 @@ -7112,6 +7147,8 @@ snapshots: dependencies: to-regex-range: 5.0.1 + find-my-way-ts@0.1.5: {} + find-up@4.1.0: dependencies: locate-path: 5.0.0 @@ -8125,6 +8162,8 @@ snapshots: ms@2.1.3: {} + multipasta@0.2.5: {} + mz@2.7.0: dependencies: any-promise: 1.3.0 @@ -8184,6 +8223,9 @@ snapshots: node-releases@2.0.14: {} + node-releases@2.0.18: + optional: true + nopt@7.2.1: dependencies: abbrev: 2.0.0 @@ -8358,6 +8400,9 @@ snapshots: picocolors@1.0.1: {} + picocolors@1.1.0: + optional: true + picomatch@2.3.1: {} pify@2.3.0: {} @@ -8469,13 +8514,6 @@ snapshots: react: 18.2.0 scheduler: 0.23.2 - react-dropzone@14.2.3(react@18.2.0): - dependencies: - attr-accept: 2.2.2 - file-selector: 0.6.0 - prop-types: 15.8.1 - react: 18.2.0 - react-email@1.10.0(encoding@0.1.13): dependencies: '@commander-js/extra-typings': 9.4.1(commander@9.4.1) @@ -8837,7 +8875,7 @@ snapshots: sprintf-js@1.0.3: {} - std-env@3.7.0: {} + sqids@0.3.0: {} streamsearch@1.1.0: {} @@ -9000,14 +9038,14 @@ snapshots: tapable@2.2.1: {} - terser-webpack-plugin@5.3.10(webpack@5.92.1): + terser-webpack-plugin@5.3.10(webpack@5.95.0): dependencies: '@jridgewell/trace-mapping': 0.3.25 jest-worker: 27.5.1 schema-utils: 3.3.0 serialize-javascript: 6.0.2 - terser: 5.31.1 - webpack: 5.92.1 + terser: 5.34.1 + webpack: 5.95.0 optional: true terser@5.31.1: @@ -9017,6 +9055,14 @@ snapshots: commander: 2.20.3 source-map-support: 0.5.21 + terser@5.34.1: + dependencies: + '@jridgewell/source-map': 0.3.6 + acorn: 8.12.1 + commander: 2.20.3 + source-map-support: 0.5.21 + optional: true + text-table@0.2.0: {} thenify-all@1.6.0: @@ -9178,14 +9224,21 @@ snapshots: escalade: 3.1.2 picocolors: 1.0.1 - uploadthing@6.13.2(next@14.2.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(tailwindcss@3.4.1): + update-browserslist-db@1.1.1(browserslist@4.24.0): dependencies: - '@effect/schema': 0.68.12(effect@3.4.5) - '@uploadthing/mime-types': 0.2.10 - '@uploadthing/shared': 6.7.8 - consola: 3.2.3 - effect: 3.4.5 - std-env: 3.7.0 + browserslist: 4.24.0 + escalade: 3.2.0 + picocolors: 1.1.0 + optional: true + + uploadthing@7.0.2(next@14.2.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(tailwindcss@3.4.1): + dependencies: + '@effect/platform': 0.63.2(@effect/schema@0.72.2(effect@3.7.2))(effect@3.7.2) + '@effect/schema': 0.72.2(effect@3.7.2) + '@uploadthing/mime-types': 0.3.0 + '@uploadthing/shared': 7.0.2 + effect: 3.7.2 + effect-log: 0.32.0(effect@3.7.2) optionalDependencies: next: 14.2.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0) tailwindcss: 3.4.1 @@ -9236,7 +9289,7 @@ snapshots: unist-util-stringify-position: 4.0.0 vfile-message: 4.0.2 - watchpack@2.4.1: + watchpack@2.4.2: dependencies: glob-to-regexp: 0.4.1 graceful-fs: 4.2.11 @@ -9253,18 +9306,17 @@ snapshots: webpack-sources@3.2.3: optional: true - webpack@5.92.1: + webpack@5.95.0: dependencies: - '@types/eslint-scope': 3.7.7 - '@types/estree': 1.0.5 + '@types/estree': 1.0.6 '@webassemblyjs/ast': 1.12.1 '@webassemblyjs/wasm-edit': 1.12.1 '@webassemblyjs/wasm-parser': 1.12.1 acorn: 8.12.1 acorn-import-attributes: 1.9.5(acorn@8.12.1) - browserslist: 4.23.1 + browserslist: 4.24.0 chrome-trace-event: 1.0.4 - enhanced-resolve: 5.17.0 + enhanced-resolve: 5.17.1 es-module-lexer: 1.5.4 eslint-scope: 5.1.1 events: 3.3.0 @@ -9276,8 +9328,8 @@ snapshots: neo-async: 2.6.2 schema-utils: 3.3.0 tapable: 2.2.1 - terser-webpack-plugin: 5.3.10(webpack@5.92.1) - watchpack: 2.4.1 + terser-webpack-plugin: 5.3.10(webpack@5.95.0) + watchpack: 2.4.2 webpack-sources: 3.2.3 transitivePeerDependencies: - '@swc/core' diff --git a/src/app/[locale]/dashboard/settings/settings-form.tsx b/src/app/[locale]/dashboard/settings/settings-form.tsx index 3e01090..fafe213 100644 --- a/src/app/[locale]/dashboard/settings/settings-form.tsx +++ b/src/app/[locale]/dashboard/settings/settings-form.tsx @@ -117,7 +117,7 @@ export default function SettingsForm({ currentUser }: { currentUser: User }) { alt={form.getValues().name ?? ""} /> - {form.getValues().name ?? "A"} + {form.getValues().name[0] ?? "A"} diff --git a/src/app/api/uploadthing/core.ts b/src/app/api/uploadthing/core.ts index b850edf..245b2f9 100644 --- a/src/app/api/uploadthing/core.ts +++ b/src/app/api/uploadthing/core.ts @@ -9,17 +9,23 @@ export const ourFileRouter = { // Define as many FileRoutes as you like, each with a unique routeSlug imageUploader: f({ image: { maxFileSize: "4MB", maxFileCount: 1 } }) // Set permissions and file types for this FileRoute - .middleware(async () => { + .middleware(async ({ req }) => { // This code runs on your server before upload const { user, session } = await validateRequest(); // If you throw, the user will not be able to upload - if (!session) throw new UploadThingError("Unauthorized!"); + if (!session) throw new UploadThingError("Unauthorized"); // Whatever is returned here is accessible in onUploadComplete as `metadata` return { userId: user.id }; }) - .onUploadComplete(({ file }) => { + .onUploadComplete(async ({ metadata, file }) => { + // This code RUNS ON YOUR SERVER after upload + console.log("Upload complete for userId:", metadata.userId); + + console.log("file url", file.url); + + // !!! Whatever is returned here is sent to the clientside `onClientUploadComplete` callback return { url: file.url }; }), } satisfies FileRouter; diff --git a/src/components/layout/image-upload-modal.tsx b/src/components/layout/image-upload-modal.tsx index 1e88971..be5e4c8 100644 --- a/src/components/layout/image-upload-modal.tsx +++ b/src/components/layout/image-upload-modal.tsx @@ -1,12 +1,14 @@ "use client"; +import { useDropzone } from "@uploadthing/react"; import { Loader2 } from "lucide-react"; import Image from "next/image"; import { useCallback, useEffect, useState } from "react"; -import type { FileWithPath } from "react-dropzone"; -import { useDropzone } from "react-dropzone"; import { type ControllerRenderProps } from "react-hook-form"; -import { generateClientDropzoneAccept } from "uploadthing/client"; +import { + generateClientDropzoneAccept, + generatePermittedFileTypes, +} from "uploadthing/client"; import { Dialog, DialogContent, @@ -16,14 +18,11 @@ import { DialogTrigger, } from "~/components/ui/dialog"; import { useUploadThing } from "~/lib/uploadthing"; -import { hasFileNameSpaces } from "~/lib/utils"; import { type SettingsValues } from "~/types"; import Icons from "../shared/icons"; import { Button } from "../ui/button"; import { toast } from "../ui/use-toast"; -const fileTypes = ["image"]; - export default function ImageUploadModal({ onChange, }: { @@ -33,29 +32,13 @@ export default function ImageUploadModal({ const [preview, setPreview] = useState(null); const [showModal, setShowModal] = useState(false); - const onDrop = useCallback((acceptedFiles: FileWithPath[]) => { + const onDrop = useCallback((acceptedFiles: File[]) => { if (acceptedFiles.length === 0) return; setFiles(acceptedFiles); setPreview(URL.createObjectURL(acceptedFiles[0])); }, []); - const { getRootProps, getInputProps } = useDropzone({ - onDrop, - accept: fileTypes ? generateClientDropzoneAccept(fileTypes) : undefined, - maxFiles: 1, - multiple: false, - validator(file) { - if (hasFileNameSpaces(file.name)) { - return { - code: "Spaces in file name", - message: "Spaces in file names are not acceptable!", - }; - } - return null; - }, - }); - - const { startUpload, isUploading, permittedFileInfo } = useUploadThing( + const { startUpload, isUploading, routeConfig } = useUploadThing( "imageUploader", { onClientUploadComplete: (res) => { @@ -77,6 +60,13 @@ export default function ImageUploadModal({ } ); + const { getRootProps, getInputProps } = useDropzone({ + onDrop, + accept: generateClientDropzoneAccept( + generatePermittedFileTypes(routeConfig).fileTypes + ), + }); + const handleCancel = useCallback(() => { if (preview) { setFiles([]); @@ -115,8 +105,8 @@ export default function ImageUploadModal({
{preview ? ( -
-
+
+
File preview ) : (
-
+
- Drop Here
-

OR

-

Click here

+

+ Drop or Click Here +

)}
-
-

- * - {`Only Images are supported. Max file size is ${permittedFileInfo?.config.image?.maxFileSize}.`} -

+

- * - File name with spaces is not acceptable! + * + {`Only Image files are supported and size limit up to ${routeConfig?.image?.maxFileSize}.`}

diff --git a/src/lib/uploadthing.ts b/src/lib/uploadthing.ts index b59a3d3..ebe7c3b 100644 --- a/src/lib/uploadthing.ts +++ b/src/lib/uploadthing.ts @@ -1,6 +1,13 @@ -import { generateReactHelpers } from "@uploadthing/react/hooks"; +import { + generateReactHelpers, + generateUploadButton, + generateUploadDropzone, +} from "@uploadthing/react"; import type { OurFileRouter } from "~/app/api/uploadthing/core"; export const { useUploadThing, uploadFiles } = generateReactHelpers(); + +export const UploadButton = generateUploadButton(); +export const UploadDropzone = generateUploadDropzone();