Ionic native file transfer - File upload - Node js express server but req.files undefined

Question

I am a beginner at ionic framework developing.

This is flow of my ionic app. - Select image from folders and press "upload a picture" button. - I used ionic-native-file transfer for uploading to Nodejs express server.

This is my code.

//ionic page https://www.dropbox.com/s/k1nittp0p8t4ay3/item-create.rar?dl=0

//Node js source https://www.dropbox.com/sh/0zd9ydk0uhhz5g7/AABIg9S7hV6XiIzrMTj8FKA2a?dl=0

Main Point: app.post('/upload', function(req,res)) , uploadImage()

//ionic3-item.js
      uploadImage()   //When press upload button
      {

          const fileTransfer:FileTransferObject = this.transfer.create();

          let option: FileUploadOptions = {
            fileKey:'file',
            fileName:'name.jpg',
            mimeType:'image/jpeg'
          };
          fileTransfer.upload(this.fileurl, encodeURI("http://192.168.1.249:8080/upload"),option);

      }
    }

    //This Node js  server code.      

    //route/ index.js
    module.exports = function(app, Article)
    {

        //Uploaded Article------------------This part -------------------------
        app.post('/upload', function(req,res){            
            console.log(req.files);
        });   

    }

But req.files is undefined. I wonder how I can treat the uploaded files from ionic app. Please help.

Thanks.

Can you paste your code in the question. It makes it easier to read and understand — Malice

fastworker399 fastworker399 · Accepted Answer · 2017-10-18T04:42:18

This is client source.

var name = "upload";  

let option: FileUploadOptions = {
  fileKey:'file',
  mimeType:'audio/3gp',
  httpMethod:'POST',
  fileName:'user_step4#'+name
};

this.loader = this.loadingCtrl.create({



  content:'登录中...',



 });


this.loader.present();

const fileTransfer:FileTransferObject = this.transfer.create();

console.log('filename'+this.curfilename);

fileTransfer.upload(this.file.externalRootDirectory+this.curfilename, encodeURI(localStorage.getItem('GlobalIP')+"/upload"),option).then((result)=>
{
  console.log('success');
}).catch(error=>{
this.loader.dismiss();      
console.log('uploaderror');
console.log(error.message);  
});   
}

This is server code

var multer      = require('multer');


var storage = multer.diskStorage({
destination:function(req, file, cb)
{
    console.log('uploadpath:'+file.originalname);

var pathname = file.originalname.split('#');
    console.log(file.originalname);
var path = pathname[0].replace('_','/');


console.log(path);

    cb(null,'public/resources/'+path);

},filename:function(req,file,cb)    
{
   var pathname = file.originalname.split('#');
   var filename = pathname[1];
   console.log(filename);
if(filename!=undefined)
        cb(null, filename);            
}
});


//For multipart/form-data Uploading
var upload = multer({storage:storage});

app.post('/upload',upload.single('file'), function(req,res,next)
{
    console.log("uploaded");
    res.json({result:1});

});

Thanks for reading.

Ionic native file transfer - File upload - Node js express server but req.files undefined

1 Answers