FileTransfer Plugin not sending the Image file to server

@afzal415 wrote:

Ionic Info
cli packages: (C:\Program Files\nodejs\node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.9.2

System:

Node : v8.9.4
npm  : 5.6.0
OS   : Windows 7

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro

Bug
FileTransfer plugin not sending the image to the server. The log shows the exact details of the file that is being transferred . But when receiving at the server which is node.js the file is empty. At the server side i am using node.js express with mutler for receiving the files.

Related Code
FileTransfer realted Code:

public presentActionSheet()
{
  let actionSheet = this.actionSheetCtrl.create(
    {
      title : 'select Image source',
      buttons :[
        {
          text : 'Load from Gallery',
          handler:()=> {
             this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
          }
        },
        {
          text : 'Use Camera',
          handler:()=> {
             this.takePicture(this.camera.PictureSourceType.CAMERA);
          } 
        },
        {
          text: 'Cancel',
          role: 'cancel'
        }
      ]
    }
  );
  actionSheet.present();
}

public takePicture(sourceType)
{
    //create options for the camera Dialog
  var options={
  quality:100,
  sourceType: sourceType,
  //destinationType : this.camera.DestinationType.DATA_URL,
  saveToPhotoAlbum : false,
  correctOrientation: true
  };

  this.camera.getPicture(options).then((imagePath) => {
  // Special handling for Android library
  if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {
    this.filePath.resolveNativePath(imagePath)
     .then(filePath => {
        let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
        let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, imagePath.lastIndexOf('?'));
        console.log("cuurent name and correct path :",currentName,correctPath);
        this.uploadImage(currentName,correctPath);
      });
  } else {
    var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
    var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
    console.log("cuurent name and correct path :",currentName,correctPath);
    this.uploadImage(currentName,correctPath);
    }
    return imagePath;
  }, (err) => {
  this.showLoading();
  this.presentToast('Error while selecting image.');
  });
} 

//Uploading image to server
public uploadImage(imageName,imagePath) {

// Destination URL
  var url =  this.url + "Image";

// File for Upload
  var targetPath = imagePath;

// File name only
var filename = imageName;

  var options = {
   fileKey: "Image",
    fileName: filename,
    chunkedMode: false,
    mimeType: "image/form-data",
    httpMethod: 'POST'
    };

    console.log("URL to load the file : ",url)
    console.log("File to be uploaded : ",filename)
    console.log("target path : ", targetPath)

  const fileTransfer: TransferObject = this.transfer.create();
  this.loading = this.loadingCtrl.create({
    content: 'Uploading...',
  });
  this.loading.present();

// Use the FileTransfer to upload the image
  fileTransfer.upload(targetPath, url, options).then(data => {
    this.loading.dismissAll()
    this.presentToast('Image succesful uploaded.');
  }, err => {
    this.loading.dismissAll()
    this.presentToast('Error while uploading file.');
  });
}

In the console i am getting the below details as log.
[12:23:07] console.log: URL to load the file : http://192.168.3.77:3000/Users/Image
[12:23:07] console.log: File to be uploaded : 1529295784633.jpg
[12:23:07] console.log: target path : file:///storage/emulated/0/Android/data/io.ionic.devapp/cache/

Serve Side Code:

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, './public/uploads/')
    },
    filename: function (req, file, cb) {
        cb(null,  Date.now() + '.jpg');
    }
  });

//Image fetching module Path,still in testing 
router.post('/Image', function (req, res, next) {
    var upload = multer({ storage: storage }).single('Image');
        upload(req,res,function(err){
            if(err){
                console.log("reques body : ",req.body)
                console.log("request file : ",req.file)
                var obj = {status : 'failed',
                message : 'Error while loading image Capture' ,
                error :   err
                }
                return res.status(200).json(obj)
            } else {
                console.log("reques body : ",req.body)
                console.log("request file : ",req.file)
                var onlyPath = require('path').dirname(process.mainModule.filename)
                var obj = {status : 'success',
                message : 'Image  loaded successfully' ,
                path :   onlyPath +"\\"+ req.file.path
                }
                return res.status(200).json(obj)
            }
        })    
    
});

When loading images using postman , the image is being loaded correctly at the server side. But loading using the ionic file transfer , i am getting null at the server side when the transfer is made.

Console log received on the server side is as below:
reques body :
Object {}
request file : undefined

Expected Behavior
The image file should be loaded as well just like loading thru postman when transferring using filetransfer plugin

Posts: 1

Participants: 1

Read full topic