Upgrade @vercel/blob to 0.12.0

package.json

@@ -11,10 +11,10 @@
     "@types/node": "^20.6.0",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.6.0",
-    "@typescript-eslint/parser": "^6.6.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.0",
+    "@typescript-eslint/parser": "^6.7.0",
     "@vercel/analytics": "^1.0.2",
-    "@vercel/blob": "^0.11.0",
+    "@vercel/blob": "^0.12.0",
     "@vercel/og": "^0.5.13",
     "@vercel/postgres": "^0.4.1",
     "autoprefixer": "10.4.15",

src/app/(auth-state)/admin/uploads/blob/route.tsx

@@ -2,17 +2,17 @@ import {
   ACCEPTED_PHOTO_FILE_TYPES,
   isUploadPathnameValid,
 } from '@/services/blob';
-import { handleBlobUpload, type HandleBlobUploadBody } from '@vercel/blob';
+import { handleUpload, type HandleUploadBody } from '@vercel/blob/client';
 import { revalidatePath } from 'next/cache';
 import { NextResponse } from 'next/server';
 
 export const runtime = 'edge';
 
 export async function POST(request: Request): Promise<NextResponse> {
-  const body = (await request.json()) as HandleBlobUploadBody;
+  const body = (await request.json()) as HandleUploadBody;
 
   try {
-    const jsonResponse = await handleBlobUpload({
+    const jsonResponse = await handleUpload({
       body,
       request,
       onBeforeGenerateToken: async (pathname) => {

src/photo/PhotoUploadInput.tsx

@@ -2,8 +2,10 @@
 
 import { useState } from 'react';
 import Spinner from '@/components/Spinner';
-import { ACCEPTED_PHOTO_FILE_TYPES, putPhoto } from '@/services/blob';
-import { ROUTE_ADMIN_UPLOAD_BLOB_HANDLER } from '@/site/routes';
+import {
+  ACCEPTED_PHOTO_FILE_TYPES,
+  uploadPhotoFromClient,
+} from '@/services/blob';
 import { cc } from '@/utility/css';
 import { useRouter } from 'next/navigation';
 
@@ -27,11 +29,9 @@ export default function PhotoUploadInput() {
                 setIsUploading(true);
                 setUploadError('');
                 const extension = file.name.split('.').pop();
-                putPhoto(
+                uploadPhotoFromClient(
                   file,
                   extension,
-                  'upload',
-                  ROUTE_ADMIN_UPLOAD_BLOB_HANDLER,
                 )
                   .then(({ url }) => {
                     // Refresh page to update upload list,

src/photo/actions.ts

@@ -17,7 +17,10 @@ import { revalidatePhotosTag } from '@/cache';
 export async function createPhotoAction(formData: FormData) {
   const photo = convertFormDataToPhoto(formData);
 
-  const updatedUrl = await convertUploadToPhoto(photo.url);
+  const updatedUrl = await convertUploadToPhoto(
+    photo.url,
+    photo.id,
+  );
 
   if (updatedUrl) { photo.url = updatedUrl; }
   await sqlInsertPhotoIntoDb(photo);

src/services/blob.ts

@@ -1,5 +1,7 @@
 import { BLOB_BASE_URL } from '@/site';
+import { ROUTE_ADMIN_UPLOAD_BLOB_HANDLER } from '@/site/routes';
 import { del, list, put } from '@vercel/blob';
+import { upload } from '@vercel/blob/client';
 
 export const ACCEPTED_PHOTO_FILE_TYPES = [
   'image/jpg',
@@ -32,30 +34,34 @@ export const getExtensionFromBlobUrl = (url: string) =>
 export const isUploadPathnameValid = (pathname?: string) =>
   pathname?.match(REGEX_UPLOAD_PATH);
 
-export const putPhoto = async (
+export const uploadPhotoFromClient = async (
   file: File | Blob,
   extension = 'jpg',
-  type: 'upload' | 'photo' = 'upload',
-  handleBlobUploadUrl?: string,
 ) =>
-  put(
-    `${type === 'upload' ? PREFIX_UPLOAD : PREFIX_PHOTO}.${extension}`,
+  upload(
+    `${PREFIX_UPLOAD}.${extension}`,
     file,
     {
       access: 'public',
-      handleBlobUploadUrl,
+      handleUploadUrl: ROUTE_ADMIN_UPLOAD_BLOB_HANDLER,
     },
   );
 
-export const convertUploadToPhoto = async (uploadUrl: string) => {
+export const convertUploadToPhoto = async (
+  uploadUrl: string,
+  photoId: string,
+) => {
   const file = await fetch(uploadUrl)
     .then((response) => response.blob());
 
   if (file) {
-    const { url } = await putPhoto(
+    const { url } = await put(
+      `${PREFIX_PHOTO}-${photoId}.${uploadUrl.split('.').pop()}`,
       file,
-      uploadUrl.split('.').pop(),
-      'photo',
+      {
+        access: 'public',
+        addRandomSuffix: false,
+      }
     );
 
     if (url) {