#nextjs

1 messages · Page 1 of 1 (latest)

elder spindleBOT
#

Hi @slim flower. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

In Next.js, you can use a Server Action with the App Router to upload a file. Here's an example of how to do this:

import { put } from '@vercel/blob';
import { revalidatePath } from 'next/cache';
 
export async function Form() {
 async function uploadImage(formData: FormData) {
 'use server';
 const imageFile = formData.get('image') as File;
 const blob = await put(imageFile.name, imageFile, {
 access: 'public',
 });
 revalidatePath('/');
 return blob;
 }
 
 return (
 <form action={uploadImage}>
 <label htmlFor="image">Image</label>
 <input type="file" id="image" name="image" required />
 <button>Upload</button>
 </form>
 );
}

In this example, the uploadImage function is a Server Action that uploads a file to Vercel Blob. The use server directive is used to mark this function as a Server Action. The put function from @vercel/blob is used to upload the file, and revalidatePath is used to update the UI after the upload is complete.

You also need to add the hostname to your next.config.js file:

/** @type {import('next').NextConfig} */
const nextConfig = {
 images: {
 remotePatterns: [
 {
 protocol: 'https',
 hostname: 'my-blob-store.public.blob.vercel-storage.com',
 port: '',
 },
 ],
 },
};
 
module.exports = nextConfig;

This allows you to use next/image to display images from your Vercel Blob store.

For more information, you can refer to the Server Actions (https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations) and App Router (https://nextjs.org/docs) sections in the Next.js documentation.

Source: Vercel Documentation (https://vercel.com/docs/storage/vercel-blob/server-upload)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@slim flower kapa.ai is still learning and improving, please let us know how it did by reacting below

#

Let me check the knowledge base for you. One moment! :books:

#

Yes, Vercel Blob is a good solution for storing files. It is a scalable, cost-effective object storage service for static assets, such as images, videos, audio files, and more. It is available on Hobby and Pro plans and can be accessed by those with the owner, member, developer role.

Here are some use cases for Vercel Blob:

  • Storing files that are programmatically uploaded or generated at build time, for display and download such as avatars, screenshots, cover images, and videos.
  • Storing large files such as videos and audios to take advantage of the global network.
  • Storing files that you would normally store in an external file storage solution like Amazon S3. With your project hosted on Vercel, you can readily access and manage these files with Vercel Blob.

You can create and manage your Vercel Blob stores from your account dashboard. You can scope your Vercel Blob stores to your Hobby account or team, and connect them to as many projects as you want.

Vercel Blob usage is measured on the number of basic operations, number of advanced operations, amount of storage used, and data transferred when the Blob URL is delivered.

For more information, you can refer to the Vercel Blob Documentation (https://vercel.com/docs/storage/vercel-blob).

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@slim flower kapa.ai is still learning and improving, please let us know how it did by reacting below

slim flower
#

@elder spindle what if i store more than 10gb of files. how much will it cost?

elder spindleBOT
#

Let me check the knowledge base for you. One moment! :books:

#

If you store more than 10GB of files in Vercel Blob, you will be charged for the additional storage. According to the information provided in the extracts, the cost for additional storage in Vercel KV (which includes databases, requests, storage, and data transfer) is $0.25 per additional GB.

So, if you store, for example, 15GB of files, you would have an additional 5GB beyond the 10GB limit. This would cost you an additional $1.25 (5GB * $0.25).

Please note that these costs are in addition to any other costs associated with your Pro plan, and they can vary depending on your usage of other resources.

For more detailed information, you can refer to the Vercel Limits and Pricing (https://vercel.com/docs/limits/overview) page.

Source: Vercel Limits and Pricing (https://vercel.com/docs/limits/overview)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@slim flower kapa.ai is still learning and improving, please let us know how it did by reacting below

#

Let me check the knowledge base for you. One moment! :books:

#

To use Vercel Blob to store files, you can follow these steps:

  1. Create a Blob store: Navigate to the Project you'd like to add the blob store to. Select the Storage tab, then select the Connect Database button. Under the Create New tab, select Blob and then the Continue button. Use the name "Images" and select Create a new Blob store. Select the environments where you would like the read-write token to be included. You can also update the prefix of the Environment Variable in Advanced Options. Once created, you are taken to the Vercel Blob store page.

  2. Prepare your local project: Since you created the Blob store in a project, Vercel automatically created and added the following Environment Variable to the project for you: BLOB_READ_WRITE_TOKEN. To use this Environment Variable locally, pull it with the Vercel CLI using the command: vercel env pull .env.development.local.

  3. Upload files: There are two ways to upload files to Vercel Blob:

    • Server uploads: This is the most common way to upload files. The file is first sent to your server and then to Vercel Blob. It's straightforward to implement, but you are limited to the request body your server can handle. Which in case of a Vercel-hosted website is 4.5 MB. This means you can't upload files larger than 4.5 MB on Vercel when using this method. You can refer to the server-side quickstart guide (https://vercel.com/docs/storage/vercel-blob/server-upload) for more details.
#
  • Client uploads: This is a more advanced solution for when you need to upload larger files. The file is securely sent directly from the client (a browser for example) to Vercel Blob. This requires a bit more work to implement, but it allows you to upload files up to 500 MB. You can refer to the client-side quickstart guide (https://vercel.com/docs/storage/vercel-blob/client-upload) for more details.

For more information, you can refer to the Vercel Blob Documentation (https://vercel.com/docs/storage/vercel-blob).

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@slim flower kapa.ai is still learning and improving, please let us know how it did by reacting below

#

Let me check the knowledge base for you. One moment! :books:

#

To download a file from Vercel Blob, you can follow these steps:

  1. Go to the Vercel Project where you created the store.
  2. Select the Storage tab and select your new store.
  3. Paste the blob object URL returned in the previous step in the Blob URL input box in the Browser section and select Lookup.
  4. The following blob object metadata will be displayed: file name, path, size, uploaded date, content type, and HTTP headers.
  5. You have the option to download the file from this page.

Please note that the blob object URL is the URL of the file you uploaded to Vercel Blob. This URL is typically returned when you upload a file to Vercel Blob.

For more information, you can refer to the Vercel Blob Documentation (https://vercel.com/docs/storage/vercel-blob).

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@slim flower kapa.ai is still learning and improving, please let us know how it did by reacting below

elder spindleBOT
#

Let me check the knowledge base for you. One moment! :books: