How can I post an array of objects in axios-http

Question

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);
    }),
  });
}

score -1 · Answer 1 · answered Oct 01 '21 at 18:41

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

score -1 · Answer 2 · answered Oct 01 '21 at 18:42

-1

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

answered Oct 01 '21 at 18:42

Amaarockz

4,348
2
9
27

What the hell man? I guess you ask a qsn jus to pass time. If yes then this is not the right place dude – Amaarockz Oct 02 '21 at 05:21

How can I post an array of objects in axios-http

2 Answers2