S
Supabase•2y ago
Miraii_

Uploaded files to supabase is only 15 bytes and is empty

Hi, I'm trying to upload an image to my supabase bucket, the problem is that the image file is blank and only has 15 bytes. The file uploaded should be an image, and have at least 1.59mb as its size. This is the code: 
  // I used NestJS for this
  @Post('upload')
  @UseInterceptors(FileInterceptor('file'))
  // added Multer type for better type safety when
  // uploading file
  uploadFile(@UploadedFile() file: Express.Multer.File) {
    const image_uuid = uuidv4();
    console.log(file);
    return this.studentService.uploadImage(file, image_uuid);
  }

 async uploadImage(file, uuid: string) {
    const supabaseUrl = process.env.SUPABASE_URL;
    const supabaseKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
    const supabase = createClient(supabaseUrl, supabaseKey);
    const { data, error } = await supabase.storage
      .from('payment_url')
      .upload(`image_${Date.now()}.png`, file, {
        contentType: 'image/png',
 });
  // I used NestJS for this
  @Post('upload')
  @UseInterceptors(FileInterceptor('file'))
  // added Multer type for better type safety when
  // uploading file
  uploadFile(@UploadedFile() file: Express.Multer.File) {
    const image_uuid = uuidv4();
    console.log(file);
    return this.studentService.uploadImage(file, image_uuid);
  }

 async uploadImage(file, uuid: string) {
    const supabaseUrl = process.env.SUPABASE_URL;
    const supabaseKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
    const supabase = createClient(supabaseUrl, supabaseKey);
    const { data, error } = await supabase.storage
      .from('payment_url')
      .upload(`image_${Date.now()}.png`, file, {
        contentType: 'image/png',
 });
I've tried the following: 1. Upload the image to supabase manually as a test (Image is uploaded properly, so I ruled out that bucket policies isn't causing this problem) 2. Check the image file properties that I receive from the HTTP methods (The image contains the proper filename, mime type, etc.) 3. Try to use base64-ArrayBuffer library as can be seen the in the docs (Didnt work, same issue) Any ideas?
No description
No description
4 Replies
garyaustin
garyaustin•2y ago
Usually this means you are uploading the file object and not the file data.
Miraii_
Miraii_OP•2y ago
Oh The first picture I sent is telling me that I am getting the file correctly from POST so it means the issue must be how I'm passing over the file data then?
garyaustin
garyaustin•2y ago
Yes. Supabase I believe can only deal with passing in the file object in a browser environment. Otherwise you have to pass in the data and also usually set the content-type. But I'm not that familiar with the process for that. I assume since you are node (I think) you have to pass the actual file data. https://github.com/orgs/supabase/discussions/2336
Miraii_
Miraii_OP•2y ago
I'll look into this, thank you! I finally got it to work, I had to convert the file to a base64 before I upload it to supabase. Thanks again! Here's the code for anyone who might encounter this in the future. 
toBase64(file: Express.Multer.File) {
    return Buffer.from(file.buffer).toString('base64');
  }

  async uploadImage(file: Express.Multer.File, uuid: string) {
    const supabaseUrl = process.env.SUPABASE_URL;
    const supabaseKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
    const supabase = createClient(supabaseUrl, supabaseKey);
    const base64 = this.toBase64(file);

    const { data, error } = await supabase.storage
      .from('payment_url')
      .upload(`image_${Date.now()}.png`, decode(base64), {
       contentType: 'image/jpg',
      });
  }
toBase64(file: Express.Multer.File) {
    return Buffer.from(file.buffer).toString('base64');
  }

  async uploadImage(file: Express.Multer.File, uuid: string) {
    const supabaseUrl = process.env.SUPABASE_URL;
    const supabaseKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
    const supabase = createClient(supabaseUrl, supabaseKey);
    const base64 = this.toBase64(file);

    const { data, error } = await supabase.storage
      .from('payment_url')
      .upload(`image_${Date.now()}.png`, decode(base64), {
       contentType: 'image/jpg',
      });
  }

Did you find this page helpful?