I'd be happy to help you integrate Vercel Blob storage with your Next.js project and implement the workflow you described. Let's break this down into steps and create the necessary components and functions.

Let's start by setting up Vercel Blob storage and creating the necessary components:

Now, let's go through the implementation and explain how it works:

1. We've created a server action uploadAndCreate in app/actions/uploadAndCreate.ts. This action handles both file upload to Vercel Blob and document creation in MongoDB 12.

2. The uploadAndCreate function does the following:

   • Extracts the file and title from the form data.
   • Uploads the file to Vercel Blob using the put function from @vercel/blob.
   • Connects to MongoDB and inserts a new document with the title and the URL of the uploaded file.
3. We've created a client-side component UploadForm in app/components/UploadForm.tsx. This component renders a form for file upload and title input.
4. The UploadForm component uses the uploadAndCreate server action to handle form submission. It displays the result of the operation (success or error) to the user.
5. We've updated the main page (app/page.tsx) to include the UploadForm component.

To make this work, you need to set up the following environment variables:

1. BLOB_READ_WRITE_TOKEN: Your Vercel Blob read-write token 1.
2. MONGODB_URI: Your MongoDB Atlas connection string.

You can set these environment variables in your Vercel project settings or in a .env.local file for local development.

Remember to replace 'your_database_name' and 'your_collection_name' in the uploadAndCreate function with your actual MongoDB database and collection names.

This implementation covers your desired workflow:

1. It creates a document on MongoDB Atlas.
2. It uploads the media file to Vercel Blob storage and gets the URL.
3. It links the URL to the document in MongoDB.

You can further customize this implementation to fit your specific needs, such as adding more fields to the document or implementing error handling and validation.

I can help you optimize the media files and ensure they're not above 10 MB before uploading. We'll modify the existing code to include this functionality. Let's update our project to include file size checking and optimization.

Let's update our React Project to include file size checking and optimization:

Now, let's go through the changes and explain how the optimization works:

1. We've updated the uploadAndCreate function in app/actions/uploadAndCreate.ts:

   • We've defined a maximum file size of 10 MB.
   • We've added an optimizeImage function that uses the sharp library to optimize images 1.
   • The function checks the file size and optimizes it if it's over 10 MB.
   • For images, we convert them to WebP format and gradually reduce quality until the file size is under 10 MB.
   • For non-image files over 10 MB, we throw an error as we can't optimize them.

2. The optimization process:

   • If the file is an image and over 10 MB, we use sharp to convert it to WebP format.
   • We start with 100% quality and gradually reduce it in steps of 10% until the file size is under 10 MB.
   • If we can't get the file under 10 MB even at the lowest quality, we throw an error.
3. We've updated the MongoDB document creation to include information about the original and optimized file sizes.

4. In the UploadForm component (app/components/UploadForm.tsx):

   • We've added a helper function formatFileSize to display file sizes in a human-readable format.
   • We now show the selected file size before upload.
   • After successful upload, we display both the original and optimized file sizes.

This implementation ensures that:

1. Files under 10 MB are uploaded as-is.
2. Image files over 10 MB are optimized by converting to WebP and reducing quality if necessary.
3. Non-image files over 10 MB are rejected with an error message.
4. Users are informed about the original and optimized file sizes.

Remember to handle errors gracefully on the client side, especially for cases where a file can't be optimized to under 10 MB.

This solution provides a good balance between file size reduction and maintaining image quality. However, keep in mind that for very large images, the quality might be significantly reduced to meet the 10 MB limit. You may want to adjust the QUALITY_REDUCTION_STEP or implement more sophisticated optimization strategies for specific use cases.