CODEWITHSUNDEEP
node.jsreactjsfilepond
Waterfall
Waterfall

Reputation: 704

How to delete file from the server after auto upload

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'
}

Upvotes: 0

Views: 1014

Answers (2)

devFerzen
devFerzen

Reputation: 34

The way I work around this issue was by ussing its event "removefile", because in there you can then call your endpoint and remove the file as Ernest say..."manually".

How did you solve it at the end?

Vuejs... example

template...
    <file-pond ref="pond" name="filePondImages" @init="handleFilePondInit" @removefile="onDeleteImageCall" :files="innerImages" />

script...
  methods: {
    onDeleteImageCall(error, file){
       if(error){ ... }
    
       ... code here
    }
    ...
   }

Upvotes: 0

Ernest
Ernest

Reputation: 121

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",
        }
     }}
     // ...
/>

Upvotes: 1

Related Questions