CODEWITHSUNDEEP
javascriptreactjsaxiosnetlifycloudinary
AgstAngelo
AgstAngelo

Reputation: 51

Problem with file input size (video upload to cloudinary through netlify serverless functions)

I'm having issues uploading video files to cloudinary in my react app, deployed in netlify. In my App I have a react page with a form that sends the data to my API. My API handles the HTTP requests to my netlify functions (using Axios), and then with the serverless function I call the cloudinary node API to store the video file. The problem happens when I'm passing the data from my API to the serverless function, I'm getting "Error: Stream body too big", because the video exceeds the payload limit of netlify functions (6mb). Do I have to compress the file? It's okay to do it like this (frontend page -> api.js -> serverless function)? Thanks for all the help you guys provide everyday, it helped me a lot!

Files that I have and the error:

page.jsx

 const formHandler = async (formValues) => {
    try {
      ...
      const res = await addExercise(formValues);
      ...
    } catch (error) {
      console.log("error ", error);
    }
  };

api.js

import { instance } from "./instance";
...

 export const addExercise = async (data) => {
  try {
    const reader = new FileReader();
    reader.readAsDataURL(data.exerciseVideo[0]);
    reader.onloadend = async () => {
      const cloudVideo = reader.result;
      const cloudinaryResponse = await instance.post("upload-exerciseVideo", { cloudVideo });
      ...
    }
  } catch (error) {
    console.log("error", error);
  }
};

serverless function (upload-exerciseVideo.js)

import cloudinary from '../src/config/cloudinary';

export const handler = async (event, context) => {
  try {
    const data = JSON.parse(event.body);
    const { cloudVideo } = data;

    const cloudinaryRequest = await cloudinary.uploader
      .upload(cloudVideo, {
        resource_type: "video",
        upload_preset: "z9qxfc6q"
      });
    ...
    } catch (error) {
    
    console.log('error', error)
    return {
      statusCode: 400,
      body: JSON.stringify(error)
    }
  }
}

Error: enter image description here

Upvotes: 0

Views: 201

Answers (1)

Becky Peltz
Becky Peltz

Reputation: 81

Netlify Serverless functions are built on top of AWS Lambda functions so there is a hard limit to the size of the file and the amount of time it takes to run the code in the file. You didn't mention the size of your video, but the video does take longer to upload, and even if you are within the 1GB size limit, you may be exceeding the 10-second processing limit. Your video likely already has been compressed, so compression is not a viable option, and decompressing it in the serverless function would probably exceed the time limit. https://www.netlify.com/blog/intro-to-serverless-function. If you're uploading a large file, like a video, from front-end code, consider using the Upload Widget with an unsigned preset. Here's a link to a code sandbox showing how to create and use the upload widget in React: https://codesandbox.io/s/cld-uw-uymkb. You will need to add your Cloudinary cloudname and an unsigned preset to make this work. You'll find instructions for creating unsigned presets here: https://cloudinary.com/documentation/upload_presets enter image description here

Upvotes: 1

Related Questions