Hi @oblique jungle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#nextjs vercel blob
flint galleonBOT
To add a folder in the Vercel Blob, you first need to create a Blob store. Here are the steps to do so:
- 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.
After creating the Blob store, an Environment Variable BLOB_READ_WRITE_TOKEN is automatically created and added to the project. To use this Environment Variable locally, pull it with the Vercel CLI using the command vercel env pull .env.development.local.
To upload files to the Blob store, you can use the upload function from the @vercel/blob/client package. Here's an example of how to do it:
import { upload } from '@vercel/blob/client';
// ...
const newBlob = await upload(file.name, file, {
access: 'public',
handleUploadUrl: '/api/avatar/upload',
});
In this example, file.name is the name of the file you want to upload, and file is the file itself. The handleUploadUrl option is the URL where your server handles the upload.
Please note that the Blob store doesn't support creating folders directly. However, you can simulate folders by using slashes (/) in your file names. For example, you can name your file folder/subfolder/myfile.txt to create a "folder" structure.
For more information, you can refer to the Vercel Blob documentation (https://vercel.com/docs/storage/vercel-blob/client-upload).
Please note that the information provided is based on the extracts provided and may not cover all aspects of your question. For a more comprehensive guide, please refer to the official Vercel and Next.js documentation.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
flint galleonBOT
Let me check the knowledge base for you. One moment! :books:
The string you're seeing after the filename (caEfPx2DKpJeBMhfSYsfGvbhbBke7g) is likely a unique identifier generated by Vercel Blob when you upload a file. This is a common practice in cloud storage services to ensure that each file has a unique name, even if you upload multiple files with the same original name.
This unique identifier helps prevent naming conflicts and overwriting of files. It also provides a way to reference each file individually, even if they were uploaded with the same name.
In the context of Vercel Blob, this unique identifier is part of the Blob object's URL, which is returned when you upload a file. You can use this URL to access the uploaded file.
Here's an example of how you might upload a file and get its URL:
import { upload } from '@vercel/blob/client';
// ...
const newBlob = await upload(file.name, file, {
access: 'public',
handleUploadUrl: '/api/avatar/upload',
});
console.log(newBlob.url); // This will log the URL of the uploaded file
In this example, newBlob.url would be a string like <https://my-blob-store.public.blob.vercel-storage.com/yeah-caEfPx2DKpJeBMhfSYsfGvbhbBke7g.png,> where yeah is the original filename, and caEfPx2DKpJeBMhfSYsfGvbhbBke7g is the unique identifier generated by Vercel Blob.
For more information, you can refer to the Vercel Blob documentation (https://vercel.com/docs/storage/vercel-blob/client-upload).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
Let me check the knowledge base for you. One moment! :books:
To remove the random suffix when uploading a file to Vercel Blob, you can use the put() method from the @vercel/blob package with the addRandomSuffix option set to false. Here's an example:
import { Blob } from '@vercel/blob';
// ...
const blob = new Blob({
token: process.env.BLOB_READ_WRITE_TOKEN,
storeId: 'your-store-id',
});
const newBlob = await blob.put('profilesv1/user-12345.txt', {
contentType: 'text/plain',
contentDisposition: 'attachment; filename="user-12345.txt"',
addRandomSuffix: false,
});
console.log(newBlob.url); // This will log the URL of the uploaded file
In this example, newBlob.url would be a string like <https://ce0rcu23vrrdzqap.public.blob.vercel-storage.com/profilesv1/user-12345.txt,> where profilesv1/user-12345.txt is the pathname you provided, and no random suffix is added.
Please note that by setting addRandomSuffix to false, you are responsible for ensuring that each file has a unique pathname. If you try to upload a file with a pathname that already exists in the Blob store, the existing file will be overwritten.
For more information, you can refer to the Vercel Blob SDK documentation (https://vercel.com/docs/storage/vercel-blob/using-blob-sdk).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
Let me check the knowledge base for you. One moment! :books:
To remove the random suffix when uploading a file to Vercel Blob in your code, you can use the addRandomSuffix option and set it to false in the put() method. Here's how you can modify your code:
import { put } from '@vercel/blob';
import { NextResponse } from 'next/server';
export async function POST(request: Request): Promise<NextResponse> {
const { searchParams } = new URL(request.url);
const filename = searchParams.get('filename');
const blob = await put(`planning/${filename!}`, request.body!, {
access: 'public',
addRandomSuffix: false, // Add this line
});
return NextResponse.json('blob');
}
Please note that by setting addRandomSuffix to false, you are responsible for ensuring that each file has a unique pathname. If you try to upload a file with a pathname that already exists in the Blob store, the existing file will be overwritten.
For more information, you can refer to the Vercel Blob SDK documentation (https://vercel.com/docs/storage/vercel-blob/using-blob-sdk).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
Let me check the knowledge base for you. One moment! :books:
To make the access not public when uploading a file to Vercel Blob, you can set the access option to 'private' in the put() method. Here's how you can modify your code:
import {{ put }} from '@vercel/blob';
import {{ NextResponse }} from 'next/server';
export async function POST(request: Request): Promise<NextResponse> {{
const {{ searchParams }} = new URL(request.url);
const filename = searchParams.get('filename');
const blob = await put(`planning/${{filename!}}`, request.body!, {{
access: 'private', // Change this line
addRandomSuffix: false,
}});
return NextResponse.json('blob');
}}
In this code, access: 'private' makes the uploaded file private, meaning it can only be accessed with a valid token.
For more information, you can refer to the Vercel Blob SDK documentation (https://vercel.com/docs/storage/vercel-blob/using-blob-sdk).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
Let me check the knowledge base for you. One moment! :books:
@oblique jungle That's a great question, but unfortunately I am only capable of responding to a maximum of five questions per thread. Don't hesitate to create a new thread for any further questions you have though. I'm here to help!
Let me check the knowledge base for you. One moment! :books: