upload file and save it to public directory

[muhaimincs]

I've been looking example for uploading multiple files to the nextjs api. So I come up with my own solution here.

here the request from client

const onSubmit = values => {
    const { userfile } = values;
    const data = new FormData();
    data.append("file", userfile[0]);
    fetch("/api/upload", {
      method: "POST",
      // headers: {
      //   "Content-Type": "multipart/form-data"
      // },
      body: data
    })
      .then(response => response.json())
      .then(data => {
        console.log(data);
      })
      .catch(error => {
        console.error(error);
      });
};

this is the api/upload.js content

import Formidable from "Formidable";
const fs = require("fs");

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

const uploadForm = next => (req, res) => {
  return new Promise(async (resolve, reject) => {
    try {
      const form = new Formidable.IncomingForm({
        multiples: true,
        keepExtensions: true
      });
      form.once("error", console.error);
      form
        .on("fileBegin", (name, file) => {
          console.log("start uploading: ", file.name);
        })
        .on("aborted", () => console.log("Aborted..."));
      form.once("end", () => {
        console.log("Done!");
      });
      await form.parse(req, async (err, fields, files) => {
        if (err) {
          throw String(JSON.stringify(err, null, 2));
        }
        console.log(
          "moving file: ",
          files.file.path,
          " to ",
          `public/upload/${files.file.name}`
        );
        // await fs.rename(
        //   files.file.path,
        //   `public/upload/${files.file.name}`,
        //   err => {
        //     if (err) throw err;
        //   }
        // );
        fs.renameSync(files.file.path, `public/upload/${files.file.name}`);
        req.form = { fields, files };
        return resolve(next(req, res));
      });
    } catch (error) {
      return resolve(res.status(403).send(error));
    }
  });
};

function handler(req, res) {
  try {
    if (req.method === "POST") {
      res.status(200).send(req.form);
    } else {
      throw String("Method not allowed");
    }
  } catch (error) {
    res.status(400).json({ message: JSON.stringify(error, null, 2) });
  }
}

export default uploadForm(handler);

I just do simple image upload, it is working but the file is in incomplete shape/form. What do you guys think that I missed?

[MOUTAIROU]

I have the same issues

[IRediTOTO]

Just tested, I still can upload avatar image to Vercel. With small size still well. Limit it is ~5-6MB

[dieguezz]

Thanks @muhaimincs i had some troubles with your implementation for multiple files and it worked for me this way:

Client side components/imageUploader

import React from "react";

export default function ImageUploader() {
  function onSubmit(event) {
    event.preventDefault()

    const body = new FormData();

    for (let index = 0; index <= files.length; index++) {
      const element = files[index];
      body.append('file', element)
    }

    fetch("/api/upload", {
      method: "POST",
      body
    })
  }

  return (
    <form onSubmit={onSubmit}>
      <input type="file" multiple />
      <button type="submit">Submit</button>
    </form>
  );
}

API side api/upload.ts

import { Request, Response } from "express";
import { File } from "formidable";
import Formidable from "formidable-serverless";
import fs from "fs";

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

export default function uploadFormFiles(
  req: Request,
  res: Response
) {
  return new Promise(async (resolve, reject) => {
    const form = new Formidable.IncomingForm({
      multiples: true,
      keepExtensions: true,
    });

    form
      .on("file", (name: string, file: File) => {
        const data = fs.readFileSync(file.path);
        fs.writeFileSync(`public/upload/${file.name}`, data);
        fs.unlinkSync(file.path);
      })
      .on("aborted", () => {
        reject(res.status(500).send('Aborted'))  
      })
      .on("end", () => {
        resolve(res.status(200).send('done'));
      });

    await form.parse(req)
  });
}

[aland-sleman]

for anyone getting ReferenceError: files is not defined. here is the solution:
first import useRef

import {useRef } from "react";

then in your component:

const fileInputRef = useRef();

function onSubmit(event) {
event.preventDefault()

const files = fileInputRef.current.files;
const body = new FormData();

for (let index = 0; index <= files.length; index++) {
  const element = files[index];
  body.append('file', element)
}

fetch("/api/upload", {
  method: "POST",
  body
})}

and in the form input

<input ref={fileInputRef} type="file" multiple />

also thank you @dieguezz you saved me hours

[dieguezz]

Why are you using express, instead of next-connect? with next-connect you could use formidable as a middleware with .use(...) and then work on the extracted files array in the .post(...) branch. The usage of express breaks next.js page optimisation and might be another reason, that this will not run on Vercel platform.

yeah, you're right. I was only using it for the Response and Request types, i think you can get them from connect

[3li7u]

I am using js file so I had to delete : String : File because Type annotations can only be used in TypeScript files.

form
.on("file", (name: string, file: File) => {
const data = fs.readFileSync(file.path);
fs.writeFileSync(public/upload/${file.name}, data);
fs.unlinkSync(file.path);
})

so I got this error
error - uncaughtException: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string or an instance of Buffer or URL. Received undefined
any help?

[dieguezz]

@3li7u maybe you can share your full code, that error is saying that your path is undefined

[3li7u]

My code is exactly the same as yours
Except you're using a ts file and I'm using js so I got this error and mentioned it
Anyway, I've found a solution to the problem on StackOverflow, so I'll post the link so that someone can benefit.
Create upload files api in next.js
Since the solution in the above link may be rather generic and some may have problems while implementing it, so I will post my own code in a separate comment as it works perfectly

[ctrngk]

Unfortunately, it is not working when deployment on vercel platform.

[thaismonteriropsicologa]

Yeah! For me as well! It works pretty fine on local but when deploy it is not working!!
I think it is because the api lambda function is in a different directory than the public.

[ctrngk]

It is because vercel and heroku, etc, does not save your uploaded files. It is recommended to save them to amazon s3 or your server.
However, this is frustrated when I only want to look into zip files. I have to unzip/analyze them on the browser side.

[pepyta]

It's not the only problem. When you're using a prebuilt version of your website (not the dev one). Then it will upload into the /public folder, which means it wont be accessible for the logic inside /.next

[3li7u]

Hi there,
After a tiring search on finding an efficient way to upload files using formidable in next js via api folder, I found a perfect solution and it works for me well so I will share it with you and I hope it works for you in the same way.

Client Side: Components/ImageUpload.js

import { useState } from 'react';

const ImageUpload = () => {
    const [pictureFile, setpictureFile] = useState(null);

    const pictureChangeHandler = event => {
        setpictureFile(event.target.files[0]);
    };

    const uploadPictureHandler = async () => {
        const pictureData = new FormData();
        pictureData.append('image', pictureFile);
        try {
            const response = await fetch('/api/upload', {
                method: 'POST',
                body: profilePicData,
            });
            const data = await response.json();
            if (!response.ok) {
                throw data;
            }
            setpictureFile(null);
        } catch (error) {
            console.log(error.message);
        }
    };

    return (
        <div className="input-group input-group-sm mb-3">
            <input accept=".png, .jpg" type="file" className="form-control" name='picture' onChange={pictureChangeHandler} />
            <button className={`btn btn-primary btn-sm px-3 ${(isLoading || !pictureFile) && 'disabled'}`} onClick={uploadPictureHandler}>
                <i className="fa-solid fa-upload"></i> :
            </button>
        </div>
    );
};
export default ImageUpload;

Server Side: api/upload.js

import { IncomingForm } from 'formidable';
import { promises as fs } from 'fs';

// first we need to disable the default body parser
export const config = {
    api: {
        bodyParser: false,
    }
};

export default async (req, res) => {
    if (req.method === 'POST') {

        // parse form with a Promise wrapper
        const data = await new Promise((resolve, reject) => {
            const form = new IncomingForm();
            form.parse(req, (err, fields, files) => {
                if (err) return reject(err);
                resolve({ fields, files });
            });
        });

        try {
            const imageFile = data.files.image; // .image because I named it in client side by that name: // pictureData.append('image', pictureFile);
            const imagePath = imageFile.filepath;
            const pathToWriteImage = `public/...`; // include name and .extention, you can get the name from data.files.image object
            const image = await fs.readFile(imagePath);
            await fs.writeFile(pathToWriteImage, image);
            //store path in DB
            res.status(200).json({ message: 'image uploaded!'});
        } catch (error) {
            res.status(500).json({ message: error.message });
            return;
        }
    };
};

I relied on the following solution:
Create upload files api in next.js

[StefanoChicaiza]

thank you, one question it's works on vercel server?

[johnshift]

Working. Thanks!

[sc0rp10n-py]

Hi there, After a tiring search on finding an efficient way to upload files using formidable in next js via api folder, I found a perfect solution and it works for me well so I will share it with you and I hope it works for you in the same way.

Client Side: Components/ImageUpload.js

import { useState } from 'react';

const ImageUpload = () => {
    const [pictureFile, setpictureFile] = useState(null);

    const pictureChangeHandler = event => {
        setpictureFile(event.target.files[0]);
    };

    const uploadPictureHandler = async () => {
        const pictureData = new FormData();
        pictureData.append('image', pictureFile);
        try {
            const response = await fetch('/api/upload', {
                method: 'POST',
                body: profilePicData,
            });
            const data = await response.json();
            if (!response.ok) {
                throw data;
            }
            setpictureFile(null);
        } catch (error) {
            console.log(error.message);
        }
    };

    return (
        <div className="input-group input-group-sm mb-3">
            <input accept=".png, .jpg" type="file" className="form-control" name='picture' onChange={pictureChangeHandler} />
            <button className={`btn btn-primary btn-sm px-3 ${(isLoading || !pictureFile) && 'disabled'}`} onClick={uploadPictureHandler}>
                <i className="fa-solid fa-upload"></i> :
            </button>
        </div>
    );
};
export default ImageUpload;

Server Side: api/upload.js

import { IncomingForm } from 'formidable';
import { promises as fs } from 'fs';

// first we need to disable the default body parser
export const config = {
    api: {
        bodyParser: false,
    }
};

export default async (req, res) => {
    if (req.method === 'POST') {

        // parse form with a Promise wrapper
        const data = await new Promise((resolve, reject) => {
            const form = new IncomingForm();
            form.parse(req, (err, fields, files) => {
                if (err) return reject(err);
                resolve({ fields, files });
            });
        });

        try {
            const imageFile = data.files.image; // .image because I named it in client side by that name: // pictureData.append('image', pictureFile);
            const imagePath = imageFile.filepath;
            const pathToWriteImage = `public/...`; // include name and .extention, you can get the name from data.files.image object
            const image = await fs.readFile(imagePath);
            await fs.writeFile(pathToWriteImage, image);
            //store path in DB
            res.status(200).json({ message: 'image uploaded!'});
        } catch (error) {
            res.status(500).json({ message: error.message });
            return;
        }
    };
};

I relied on the following solution: Create upload files api in next.js

what are you passing in body, its no where declared.

i got filepath undefined error

[eudamniac]

Thanks a lot! I'm using busboy for the file upload and this was the crucial missing piece to add to my api file:

// first we need to disable the default body parser
export const config = {
    api: {
        bodyParser: false,
    }
};

[SudevaHarsha]

Will they work in production

[feodosii71]

there is a bug!

when define imageFile value you have to do like this

        const imageFile = data.files.image[0]; 

And it will work.

[hozaifa4you]

Is it legal?? I uploaded files in public, it works in the dev move. But after build the uploaded file does not work.

https://nextjs.org/docs/pages/building-your-application/optimizing/static-assets#robots-favicons-and-others

[Tommy1223454]

Disabling the default body parser is definitely part of making multipart work correctly here.

I’d just add one more layer after parsing: once the file is successfully received, inspect it server-side before writing it to a public or persistent location.

I built Pompelmi for this exact step:
https://github.com/pompelmi/pompelmi

It’s an OSS Node.js package focused on untrusted upload inspection before storage (type sniffing, mismatch detection, risky archive signals, etc.).