6

There are a lot of examples online regarding with file uploading for Node.js Express framework. But most of them are using multer. All of them are loading file from a form.

But my scenario is different. My app will pick an image from mobile phone and upload to server (by using cordova-file-transfer plugin in Ionic). In this case, I don't have a form at all. So that there is no req.files. Any suggestion? Thanks.

P.S: Here is the log in my server logs my http header:

{ host: 'localhost:3000',
  'x-requested-with': 'XMLHttpRequest',
  accept: '*/*',
  'content-type': 'multipart/form-data; boundary=+++++org.apache.cordova.formBoundary',
  'content-length': '23394',
  'accept-language': 'en-us',
  'accept-encoding': 'gzip, deflate',
  connection: 'keep-alive',
  'user-agent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 9_2 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Mobile/13C75 (2079040640)' }

My server code:

  app.post('/', multer({dest:'./uploads/'}).single('upl'),(req,res) => {
    console.dir(req.headers)
    console.dir(req.body)
    res.status(204).end()
  })

Apparently 'upl' is not defined in my case.

4
  • 2
    Set option fileKey for cordova-plugin-file-transer to upl. Commented Feb 5, 2016 at 8:15
  • I'll have a try. Thanks. Commented Feb 5, 2016 at 11:06
  • @stdob, sorry, I don't quite understand. Based on the Multer document, I should add req.file inside upl. That means I have to create a file object. But the file is from <input type="file"> inside a form, how can I create file object manually? Commented Feb 10, 2016 at 1:46
  • @stdob, it works. Thanks. Commented Feb 10, 2016 at 3:51

1 Answer 1

7

In case somebody have the same issue, here is my full source code and explanation.

Background of my project

An ionic application which is using cordova-file-transfer plugin to upload file from photo library to a node.js express server.

My server code in app.js:

var express = require('express')
var multer = require('multer')
var bodyParser = require('body-parser')
var path = require('path')

var app = express()

// settings
app.set('views', path.join(__dirname,'views'))
app.set('view engine','jade')

// middleware
app.use(bodyParser.json())

// route
app.get('/', (req,res) => {
  res.render('index')
})

app.post('/', multer({dest:'./uploads/'}).single('upl'),(req,res) => {
  console.log(req.body)
  console.log(req.file)
  res.status(204).end()
})

// start
var server = app.listen(3000, () => {
  console.log('Started at port ' + server.address().port)
})

My client code upload():

upload() {

var options = new FileUploadOptions()
options.fileKey = "upl";              // this equal to <input type="file" id="upl">
options.fileName = 'test.jpg';
options.mimeType = "image/jpg";
options.chunkedMode = false;
options.params = {'directory' : 'uploads', 'fileName': 'test.jpg'};

var ft = new FileTransfer()
ft.upload(this.thumbnail, encodeURI('http://localhost:3000/'),
  (res) => {
    console.log("Code = " + res.responseCode)
    console.log("Response = " + res.response)
    console.log("Sent = " + res.bytesSent)
  },(error) => {
    alert("An error has occurred: Code = " + error.code);
    console.log("upload error source " + error.source);
    console.log("upload error target " + error.target);
  },options)
}

this.thumbnail is my file path, for example in my ios, the path is something like:

file:///Users/myusername/Library/Developer/CoreSimulator/Devices/81B513B7-AE34-4911-A9C9-57E293957BEC/data/Containers/Data/Application/C9A0BE15-EA4A-4DD8-9E75-BC960ECF50B7/tmp/cdv_photo_016.jpg

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.