Vercel blob with react js

Help
1

Hello world, I need help uploading large files to Vercel blob using React JS and Node JS. I have already tried several solutions without concrete results. I would now like to use the Vercel Blob API to upload it on the client side.
import { handleUpload } from ‘@vercel/blob/client’;

export default async function BlobClient(request) {

const body = await request.json();
console.log('body', body);
try {
    const jsonResponse = await handleUpload({
        body,
        request,
        onBeforeGenerateToken: async (pathname /*, clientPayload */) => {
            // Authenticate and authorize users here if needed

            return {
                allowedContentTypes: ['image/jpeg', 'image/png', 'image/gif'],
                addRandomSuffix: true,
                tokenPayload: JSON.stringify({
                    // Add custom payload if needed
                }),
            };
        },
        onUploadCompleted: async ({ blob, tokenPayload }) => {
            // Handle post-upload logic here
            console.log('blob upload completed', blob, tokenPayload);

            try {
                // Example: update user or database with blob.url
                // const { userId } = JSON.parse(tokenPayload);
                // await db.update({ avatar: blob.url, userId });
            } catch (error) {
                throw new Error('Could not update user');
            }
        },
    });

    return new Response(JSON.stringify(jsonResponse), {
        headers: { 'Content-Type': 'application/json' },
    });
} catch (error) {
    return new Response(
        JSON.stringify({ error: error.message }),
        {
            status: 400,
            headers: { 'Content-Type': 'application/json' },
        }
    );
}

}

2

For larger files, please consider using multipart upload. You can use v0.dev to get suggestion how to implement in React.js

3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.