Upload file to Google Cloud Storage

[civic parcel]

I'm trying to upload an image to a Google Cloud Storage bucket.
Here's my code:

import { Storage } from '@google-cloud/storage';
import { NextApiRequest } from 'next';

const bucketName = 'faqmaker';

export default async function handler(req: NextApiRequest, res) {
  const storage = new Storage({
    projectId: process.env.PROJECT_ID,
    keyFilename: '@/lib/server/gcpKeyFile.json',
  });
  const bucket = storage.bucket(bucketName);

  const fileName = req.query.file as string;
  const options = {
    destination: `logos/${fileName}`,
    public: true,
  };

  bucket.upload(fileName, options, (error, file) => {
    console.log('error: ', error);
    console.log('file: ', file);
  });
}

And here's the front:

const { logo } = values;
  const logoName = encodeURIComponent(logo.name);
  const { data } = await axios.get(
    `${Routes.API.STORAGE.LOGO}?file=${logoName}`,
  );

logo is a file of type File
I'm getting this error from the upload: ENOENT: no such file or directory

[next tide]

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

---

I'm sorry, but the information extracts provided do not contain any details about uploading files to Google Cloud Storage using Next.js. My knowledge is based on the information provided in the extracts, and they primarily cover file uploads using AWS S3 and Vercel Blob with Next.js.

For your specific issue, it seems like the error ENOENT: no such file or directory is related to the file path you're trying to upload. Make sure the fileName you're passing to bucket.upload() is a correct path to the file in your local system or server.

However, I would recommend checking the official Google Cloud Storage documentation or Next.js community and forums for more specific help on this topic.

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

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

[civic parcel]

@next tide The problem is that there is no local path because the file come from an input of type file

[next tide]

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

---

Based on the information provided in the extracts, it seems like you're trying to upload a file directly from a client-side input to Google Cloud Storage. However, the extracts do not provide a direct solution for this specific scenario.

In the context of Next.js and Vercel, the extracts show examples of handling file uploads using Vercel Blob and AWS S3. The general approach involves receiving the file on a server-side route, processing it (which could involve saving it temporarily to the server file system), and then uploading it to the storage service.

Here's an example of handling file uploads on a server-side route in Next.js, based on the extracts:

import type { PutBlobResult } from '@vercel/blob';
import { useState, useRef } from 'react';
 
export default function AvatarUploadPage() {
 const inputFileRef = useRef<HTMLInputElement>(null);
 const [blob, setBlob] = useState<PutBlobResult | null>(null);
 return (
 <>
 <h1>Upload Your Avatar</h1>
 
 <form
 onSubmit={async (event) => {
 event.preventDefault();
 
 if (!inputFileRef.current?.files) {
 throw new Error('No file selected');
 }
 
 const file = inputFileRef.current.files[0];
 
 const response = await fetch(
 `/api/avatar/upload?filename=${file.name}`,
 {
 method: 'POST',
 body: file,
 },
 );
 
 const newBlob = (await response.json()) as PutBlobResult;
 
 setBlob(newBlob);
 }}
 >
 <input name="file" ref={inputFileRef} type="file" required />
 <button type="submit">Upload</button>
 </form>
 {blob && (
 <div>
 Blob url: <a href={blob.url}>{blob.url}</a>
 </div>
 )}
 </>
 );
}

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

In this example, the file from the client-side input is sent to a server-side route (/api/avatar/upload) via a POST request. The server-side route then handles the file upload process.

However, this example uses Vercel Blob for the file upload, not Google Cloud Storage. You would need to adapt this approach to use Google Cloud Storage's SDK or API for the actual file upload.

For more specific guidance on uploading files to Google Cloud Storage with Next.js, I recommend checking the official Google Cloud Storage documentation or Next.js community and forums.

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

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

[civic parcel]

@next tide Can you show me the content of the api file

[next tide]

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

---

Based on the information provided in the extracts, here's an example of a server-side route in Next.js that handles file uploads:

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(filename, request.body, {
 access: 'public',
 });
 
 return NextResponse.json(blob);
}

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

In this example, the server-side route receives a POST request with a file in the request body. It uses the put function from the @vercel/blob package to upload the file. The filename is retrieved from the request's query parameters.

However, this example uses Vercel Blob for the file upload, not Google Cloud Storage. You would need to adapt this approach to use Google Cloud Storage's SDK or API for the actual file upload.

For more specific guidance on uploading files to Google Cloud Storage with Next.js, I recommend checking the official Google Cloud Storage documentation or Next.js community and forums.

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