How to delete file from the server after auto upload

Question

When I select an image it automatically uploads which is what I want, and then using Node.js and Multer I rename the file to make it unique and save it to disk. However, once the upload is complete, the progress loader turns into a 'X' and the file can be deleted. When I click on that the image is removed from react but it remains on the server.

In React:

          <FilePond
            files={files}
            onupdatefiles={setFiles}
            allowMultiple={false}
            maxFiles={1}
            server="http://localhost:8000/api/v1/users/update-avatar"
            name="image"
            labelIdle='Drag & Drop your files or <span class="filepond--label-action">Browse</span>'
          />

In Node.js

const MIME_TYPE_MAP = {
  "image/png": "png",
  "image/jpg": "jpg",
  "image/jpeg": "jpeg",
};

const fileUpload = multer({
  limits: 500000,
  storage: multer.diskStorage({
    destination: (req, file, cb) => {
      cb(null, "uploads/images/");
    },
    filename: (req, file, cb) => {
      const ext = MIME_TYPE_MAP[file.mimetype];
      console.log(file);
      cb(null, uuidv1() + "." + ext);
    },
  }),
  fileFilter: (req, file, cb) => {
    const isValid = !!MIME_TYPE_MAP[file.mimetype];
    let error = isValid ? null : new Error("Invalid mime type");
    cb(error, isValid);
  },
});
router:

router.post(
  "/update-avatar",
  fileUpload.single("image"),
  userController.updateAvatar
);

If I console.log 'file' I only get the below which doesn't help because I rename the file.

{
  fieldname: 'image',
  originalname: 'bob.png',
  encoding: '7bit',
  mimetype: 'image/png'
}

Answer 1

you have to create a revert api endpoint server side, where you manually clean-up by removing the previously uploaded file. You have to specify that link on your component :

<FilePond
      server={{
        process: {
          url: "/api/v1/users/update-avatar"
        },
        revert: {
          url: "/api/v1/users/revert-avatar",
        }
     }}
     // ...
/>