3

I am implementing 'image uploading' functionality using multer, angular 6, ng2-file uploader, and nodeJs. I want to upload only '.png' & '.jpeg' file types. Here is the backend.

/* UPLOAD image file */
router.post('/upload',function(req,res){

  var storage = multer.diskStorage({
    destination: (req, file, cb) => {
      cb(null, DIR);
    },
    filename: (req, file, cb) => {
      cb(null,file.fieldname+".jpg"); 
    },
  });
  var upload = multer({storage: storage,limits: { fileSize: 524288 }}).single('photo');

  upload(req,res,function(err) {
      if(err) {
          console.log(err);
          return res.end("Error uploading file.");
      } else {
           res.end("File has been uploaded");
      }
  });
});

I want to upload .png and .jpg files. So I restricted other file extensions from the frontend.

  <input type="file" #fileInput name="photo" ng2FileSelect [uploader]="uploader" (change)="handleFileInput($event.target.files)"
  accept="image/jpeg, image/png" />

After restricting other file types first it only shows the required files in the file explorer (customized file types). But there is an option to select all files in the file explorer. Then it shows other file types too. Then it allows uploading other file types as well. What I want is to restrict uploading file types other than .png and .jpeg. Is there a proper way to achieve it.

RMD
  • 311
  • 1
  • 7
  • 22
  • Which OS and which browser do you use? – Henry Nov 19 '18 at 07:58
  • Possible duplicate of [Filter files on the basis of extension using Multer in Express JS](https://stackoverflow.com/questions/38652848/filter-files-on-the-basis-of-extension-using-multer-in-express-js) – magos Nov 19 '18 at 07:59
  • windows and chrome – RMD Nov 19 '18 at 08:00
  • Security should not be done in the front-end, as Javascript can be modified by anyone (since the source of the code is available to anyone using it). You should instead secure your back-end so that it refuses to process file extensions you don't accept. Hence, I am removing the Angular tag, as it has nothing to do with it. If you feel this is not justified, please explain why. –  Nov 19 '18 at 08:21
  • @magos I tried that one also but did not work – RMD Nov 21 '18 at 03:08

1 Answers1

0

You can use ngx-dropzone or some other library to restrict the other files.

user13753604
  • 21
  • 3