Ionic file transfer with params on node express sever using multer


#1

I am trying to upload an image with the params and receive them on the server side where I am using node, express, and multer. after many tries, i am finally able to upload an image but still not able to find any way how to receive the params along with the image.here in my ionic code portion.

  getPicture() {
    if (Camera['installed']()) {
        Camera.getPicture({
            quality : 75,
            destinationType : Camera.DestinationType.FILE_URI,
            sourceType : Camera.PictureSourceType.PHOTOLIBRARY,
            allowEdit : false,
            encodingType: Camera.EncodingType.JPEG,
            correctOrientation: true
        }).then(imageData => {
            this.uploadImg(imageData);
        }, error => {
            console.log("ERROR -> " + JSON.stringify(error));
        });
        } else {
      this.fileInput.nativeElement.click();
    }
  }
    uploadImg(path){
        const fileTransfer = new Transfer();
        var SERVER_URL = api + "/profile";
        var filename = path.split("/").pop().split("?")[0];
        var changeScope = this;
        var options = {
          fileKey: "profilePic",              // this equal to <input type="file" id="upl">
          fileName: filename,
          mimeType: "image/jpg",
          chunkedMode: false,
          params: {'fileName': filename, "test": "test value"}
        }
          console.log('params'+JSON.stringify(options));
      fileTransfer.upload(path,SERVER_URL, options)
              .then(function(result) {
                    console.log("fileTransfer upload SUCCESS:");
                    console.log(result);
                }, function(err) {
                  console.log('errrrrrr'+JSON.stringify(err));
                  // loading.dismiss();
                  this.toast.show('Error while uploading image. Please try again!');
                });
  }

and here is my node code

var distributorsStorage = multer.diskStorage({
destination: function (req, file, callback) {
callback(null, 'public/images/distributors');
},
filename: function (req, file, callback) {
callback(null, 'profilePic-' + Date.now()+'.'+file.originalname.split('.')[1]);
}});
var distributorsUpload = multer({ storage: distributorsStorage }).single('fileName');

apiRoutes.post('/profile', function (req, res, next) {
	distributorsUpload(req, res, function (err) {
		if (err) {
		console.log(err.message);
		// An error occurred when uploading
		res.json({ status: false, message: 'Only image files are allowed!' });
		return
		}
		console.log('Everything went fine');
		if(req.file)
			res.json({ status: true, message: req.file.destination + '/'+ req.file.filename });
		else
			res.json({ status: true, message: 'no image provided' });
	})
})

Please someone review this and help me, any and all suggestions are appreciated.


#2

(I changed your post to format your code or error message correctly. Please use the </> button above the post input field to format your code or error message or wrap it in ``` (“code fences”) manually. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.)

Does it actually transmit the parameters over the wire?
Try to remote debug the problem on the device. Follow these instructions here to debug the problem in Chrome dev tools: https://ionic.zone/debug/remote-debug-your-app#android Look at the network tab for the request and look at the body and headers.