I am using react-dropzone to upload mp3 files and using a metadata npm to grab all the contents of the file. When sending it to axios.post(), I am getting an Error of "Body Exceeded 1mb limit"

This is where I'm sending the new data:

async function insertArtists(uploadedArtists, doneCallback) {
    // console.log(uploadedArtists); // [5]
    // console.log(artistsData);// []
    const originalArtists = [...artistsData];
    const newArtists = [...uploadedArtists, ...artistsData];
    try {
      setArtistsData(newArtists);
      const results = await axios.post(`${restUrl}/multi`, newArtists);
      console.log(results);
      if (doneCallback) {
        doneCallback();
      }
    } catch (error) {
      console.log("error thrown inside insertArtists", error);
      setArtistsData(originalArtists);
    }
  }

found this doc here https://github.com/vercel/next.js/issues/19684. But it didnt explain how to add other params.

my Dropzone:

 function Dropzone() {
  const { insertArtists } = useReqRest();
  const { getRootProps, getInputProps } = useDropzone({
    accept: "audio/*",
    onDrop: useCallback(async (acceptedFiles) => {
      const filesData = await Promise.all(
        acceptedFiles.map(async (file) => {
          let fileContents = {
            _id: uuidv4(),
            path: file.path,
            fileName: file.name,
            fileSize: file.size,
            fileType: file.type,
          };
          const meta = await musicMetadata.parseBlob(file);
          return { ...fileContents, ...meta.common };
        })
      );
      const fullDb = [...artists, ...filesData];
      insertArtists(fullDb);
    }),
  });
}

CodePudding user response：

You can the limit as you want by adding a config:

//pages/api/your_file.js
export const config = {
  api: {
    bodyParser: {
      sizeLimit: '5mb',
    },
  },
}

or completely disable bodyParser if you parse the body later in another handler (e.g. FormData handler as you are working with files)

export const config = {
    api: {
        bodyParser: false
    }
}

CodePudding user response：

If your issue is just "Body Exceeded 1MB limit" you can add this at the end of your API file and it will work

export const config = {
  api: {
    bodyParser: {
      sizeLimit: '1mb',
    },
  },
}

if you want to add all the detail in files consider using FormData() and then append files and send it as the body of the request

CodePudding user response：

You need to set custom config inorder to send data more than 1mb

export const config = {
 api: {
    bodyParser : {
      sizeLimit : '1mb' // change this
     },
 },
}

For more info check this out: https://nextjs.org/docs/api-routes/api-middlewares#custom-config