Transfer Plugin Photo Upload


#1

Hi, I’m trying to upload a photo took from the camera to a Node JS server, but in the request there is no files or file object, I get “files” is undefined when trying to console log “files”. I think the problem is coming from the client, but I’m not sure. I have a code that is practically identical to the Ionic 2 documentation, but everybody seems to tell me that I’m supposed to have either “files” or “file” in my request…

My Ionic code is:

takePicture(){
Camera.getPicture({
destinationType: Camera.DestinationType.FILE_URI,
targetWidth: 1000,
targetHeight: 1000
}).then((imageData) => {
this.image = imageData;
}, (err) => {
console.log(err);
});
}

upload(){
const fileTransfer = new Transfer();
var options: any;

options = {
fileKey: ‘file’,
fileName: ‘test.jpg’,
headers: {}
}
fileTransfer.upload(this.image, “http://192.168.88.23:3000/api/image/upload”, options, true)
.then((data) => {
console.log(data);
}, (err) => {
console.log(err);
})
}

The code on the server is:

exports.uploadImage = function(req, res, next){
console.log(req);
upload(req,res,function(err){
console.log(“files:”);
console.log(req.files);
if(err){
res.json({error_code:1,err_desc:err});
console.log(err);
return;
}
res.json({error_code:0,err_desc:null});
});
}

var storage = multer.diskStorage({ //multers disk storage settings
destination: function (req, file, cb) {
cb(null, ‘…/…/uploads/’);
},
filename: function (req, file, cb) {
console.log(file);
var datetimestamp = Date.now();
cb(null, “test.png”); //file.fieldname + ‘-’ + datetimestamp + ‘.’ + file.originalname.split(’.’)[file.originalname.split(’.’).length -1]
}
});

var upload = multer({ //multer settings
storage: storage
}).single(‘file’);

I get this error message on the server side:

{ Error: ENOENT: no such file or directory, open '…/…/uploads/test.png’
at Error (native)
errno: -2,
code: ‘ENOENT’,
syscall: ‘open’,
path: ‘…/…/uploads/test.png’,
storageErrors: [] }
POST /api/image/upload 200 177.734 ms - 124

And the request is: IncomingMessage { _readableState: ReadableState { objectMode: false, highWaterMark: 16384, buffer: BufferList { head: null, tail: null, length: 0 }, length: 0, pipes: null, pipesCount: 0, flowing: null, ended: false, endEmitted: false, reading: false, sync: true, needReadable: false, emittedReadable: false, readableListening: false, resumeScheduled: false, defaultEncoding: 'utf8', ranOut: false, awaitDrain: 0, readingMore: true, decoder: null, encoding: null }, readable: true, domain: null, _events: {}, _eventsCount: 0, _maxListeners: undefined, socket: Socket { connecting: false, _hadError: false, _handle: TCP { bytesRead: 65536, _externalStream: {}, fd: 15, reading: true, owner: [Circular], onread: [Function: onread], onconnection: null, writeQueueSize: 0 }, _parent: null, _host: null, _readableState: ReadableState { objectMode: false, highWaterMark: 16384, buffer: [Object], length: 0, pipes: null, pipesCount: 0, flowing: true, ended: false, endEmitted: false, reading: true, sync: false, needReadable: true, emittedReadable: false, readableListening: false, resumeScheduled: false, defaultEncoding: 'utf8', ranOut: false, awaitDrain: 0, readingMore: false, decoder: null, encoding: null }, readable: true, domain: null, _events: { end: [Object], finish: [Function: onSocketFinish], _socketEnd: [Function: onSocketEnd], drain: [Object], timeout: [Function], error: [Object], close: [Object], data: [Function: socketOnData], resume: [Function: onSocketResume], pause: [Function: onSocketPause] }, _eventsCount: 10, _maxListeners: undefined, _writableState: WritableState { objectMode: false, highWaterMark: 16384, needDrain: false, ending: false, ended: false, finished: false, decodeStrings: false, defaultEncoding: 'utf8', length: 0, writing: false, corked: 0, sync: true, bufferProcessing: false, onwrite: [Function], writecb: null, writelen: 0, bufferedRequest: null, lastBufferedRequest: null, pendingcb: 0, prefinished: false, errorEmitted: false, bufferedRequestCount: 0, corkedRequestsFree: [Object] }, writable: true, allowHalfOpen: true, destroyed: false, _bytesDispatched: 0, _sockname: null, _pendingData: null, _pendingEncoding: '', server: Server { domain: null, _events: [Object], _eventsCount: 2, _maxListeners: undefined, _connections: 1, _handle: [Object], _usingSlaves: false, _slaves: [], _unref: false, allowHalfOpen: true, pauseOnConnect: false, httpAllowHalfOpen: false, timeout: 120000, _pendingResponseData: 0, _connectionKey: '6::::3000' }, _server: Server { domain: null, _events: [Object], _eventsCount: 2, _maxListeners: undefined, _connections: 1, _handle: [Object], _usingSlaves: false, _slaves: [], _unref: false, allowHalfOpen: true, pauseOnConnect: false, httpAllowHalfOpen: false, timeout: 120000, _pendingResponseData: 0, _connectionKey: '6::::3000' }, _idleTimeout: 120000, _idleNext: TimersList { _idleNext: [Circular], _idlePrev: [Circular], _timer: [Object], _unrefed: true, msecs: 120000 }, _idlePrev: TimersList { _idleNext: [Circular], _idlePrev: [Circular], _timer: [Object], _unrefed: true, msecs: 120000 }, _idleStart: 780267, parser: HTTPParser { '0': [Function: parserOnHeaders], '1': [Function: parserOnHeadersComplete], '2': [Function: parserOnBody], '3': [Function: parserOnMessageComplete], '4': [Function: onParserExecute], _headers: [], _url: '', _consumed: true, socket: [Circular], incoming: [Circular], outgoing: null, maxHeaderPairs: 2000, onIncoming: [Function: parserOnIncoming] }, on: [Function: socketOnWrap], _paused: false, read: [Function], _consuming: true, _httpMessage: ServerResponse { domain: null, _events: [Object], _eventsCount: 2, _maxListeners: undefined, output: [], outputEncodings: [], outputCallbacks: [], outputSize: 0, writable: true, _last: false, upgrading: false, chunkedEncoding: false, shouldKeepAlive: true, useChunkedEncodingByDefault: true, sendDate: true, _removedHeader: {}, _contentLength: null, _hasBody: true, _trailer: '', finished: false, _headerSent: false, socket: [Circular], connection: [Circular], _header: null, _headers: [Object], _headerNames: [Object], _onPendingData: [Function: updateOutgoingData], req: [Circular], locals: {}, _startAt: undefined, _startTime: undefined, writeHead: [Function: writeHead], __onFinished: [Object] }, _peername: { address: '::ffff:192.168.88.44', family: 'IPv6', port: 64760 } }, connection: Socket { connecting: false, _hadError: false, _handle: TCP { bytesRead: 65536, _externalStream: {}, fd: 15, reading: true, owner: [Circular], onread: [Function: onread], onconnection: null, writeQueueSize: 0 }, _parent: null, _host: null, _readableState: ReadableState { objectMode: false, highWaterMark: 16384, buffer: [Object], length: 0, pipes: null, pipesCount: 0, flowing: true, ended: false, endEmitted: false, reading: true, sync: false, needReadable: true, emittedReadable: false, readableListening: false, resumeScheduled: false, defaultEncoding: 'utf8', ranOut: false, awaitDrain: 0, readingMore: false, decoder: null, encoding: null }, readable: true, domain: null, _events: { end: [Object], finish: [Function: onSocketFinish], _socketEnd: [Function: onSocketEnd], drain: [Object], timeout: [Function], error: [Object], close: [Object], data: [Function: socketOnData], resume: [Function: onSocketResume], pause: [Function: onSocketPause] }, _eventsCount: 10, _maxListeners: undefined, _writableState: WritableState { objectMode: false, highWaterMark: 16384, needDrain: false, ending: false, ended: false, finished: false, decodeStrings: false, defaultEncoding: 'utf8', length: 0, writing: false, corked: 0, sync: true, bufferProcessing: false, onwrite: [Function], writecb: null, writelen: 0, bufferedRequest: null, lastBufferedRequest: null, pendingcb: 0, prefinished: false, errorEmitted: false, bufferedRequestCount: 0, corkedRequestsFree: [Object] }, writable: true, allowHalfOpen: true, destroyed: false, _bytesDispatched: 0, _sockname: null, _pendingData: null, _pendingEncoding: '', server: Server { domain: null, _events: [Object], _eventsCount: 2, _maxListeners: undefined, _connections: 1, _handle: [Object], _usingSlaves: false, _slaves: [], _unref: false, allowHalfOpen: true, pauseOnConnect: false, httpAllowHalfOpen: false, timeout: 120000, _pendingResponseData: 0, _connectionKey: '6::::3000' }, _server: Server { domain: null, _events: [Object], _eventsCount: 2, _maxListeners: undefined, _connections: 1, _handle: [Object], _usingSlaves: false, _slaves: [], _unref: false, allowHalfOpen: true, pauseOnConnect: false, httpAllowHalfOpen: false, timeout: 120000, _pendingResponseData: 0, _connectionKey: '6::::3000' }, _idleTimeout: 120000, _idleNext: TimersList { _idleNext: [Circular], _idlePrev: [Circular], _timer: [Object], _unrefed: true, msecs: 120000 }, _idlePrev: TimersList { _idleNext: [Circular], _idlePrev: [Circular], _timer: [Object], _unrefed: true, msecs: 120000 }, _idleStart: 780267, parser: HTTPParser { '0': [Function: parserOnHeaders], '1': [Function: parserOnHeadersComplete], '2': [Function: parserOnBody], '3': [Function: parserOnMessageComplete], '4': [Function: onParserExecute], _headers: [], _url: '', _consumed: true, socket: [Circular], incoming: [Circular], outgoing: null, maxHeaderPairs: 2000, onIncoming: [Function: parserOnIncoming] }, on: [Function: socketOnWrap], _paused: false, read: [Function], _consuming: true, _httpMessage: ServerResponse { domain: null, _events: [Object], _eventsCount: 2, _maxListeners: undefined, output: [], outputEncodings: [], outputCallbacks: [], outputSize: 0, writable: true, _last: false, upgrading: false, chunkedEncoding: false, shouldKeepAlive: true, useChunkedEncodingByDefault: true, sendDate: true, _removedHeader: {}, _contentLength: null, _hasBody: true, _trailer: '', finished: false, _headerSent: false, socket: [Circular], connection: [Circular], _header: null, _headers: [Object], _headerNames: [Object], _onPendingData: [Function: updateOutgoingData], req: [Circular], locals: {}, _startAt: undefined, _startTime: undefined, writeHead: [Function: writeHead], __onFinished: [Object] }, _peername: { address: '::ffff:192.168.88.44', family: 'IPv6', port: 64760 } }, httpVersionMajor: 1, httpVersionMinor: 1, httpVersion: '1.1', complete: false, headers: { host: '192.168.88.23:3000', 'content-type': 'multipart/form-data; boundary=+++++org.apache.cordova.formBoundary', 'accept-encoding': 'gzip, deflate', connection: 'keep-alive', accept: '*/*', 'user-agent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_1_1 like Mac OS X) AppleWebKit/602.2.14 (KHTML, like Gecko) Mobile/14B100 (4660976048)', 'content-length': '65679', 'accept-language': 'en-ca', 'x-requested-with': 'XMLHttpRequest' }, rawHeaders: [ 'Host', '192.168.88.23:3000', 'Content-Type', 'multipart/form-data; boundary=+++++org.apache.cordova.formBoundary', 'Accept-Encoding', 'gzip, deflate', 'Connection', 'keep-alive', 'Accept', '*/*', 'User-Agent', 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_1_1 like Mac OS X) AppleWebKit/602.2.14 (KHTML, like Gecko) Mobile/14B100 (4660976048)', 'Content-Length', '65679', 'Accept-Language', 'en-ca', 'X-Requested-With', 'XMLHttpRequest' ], trailers: {}, rawTrailers: [], upgrade: false, url: '/image/upload', method: 'POST', statusCode: null, statusMessage: null, client: Socket { connecting: false, _hadError: false, _handle: TCP { bytesRead: 65536, _externalStream: {}, fd: 15, reading: true, owner: [Circular], onread: [Function: onread], onconnection: null, writeQueueSize: 0 }, _parent: null, _host: null, _readableState: ReadableState { objectMode: false, highWaterMark: 16384, buffer: [Object], length: 0, pipes: null, pipesCount: 0, flowing: true, ended: false, endEmitted: false, reading: true, sync: false, needReadable: true, emittedReadable: false, readableListening: false, resumeScheduled: false, defaultEncoding: 'utf8', ranOut: false, awaitDrain: 0, readingMore: false, decoder: null, encoding: null }, readable: true, domain: null, _events: { end: [Object], finish: [Function: onSocketFinish], _socketEnd: [Function: onSocketEnd], drain: [Object], timeout: [Function], error: [Object], close: [Object], data: [Function: socketOnData], resume: [Function: onSocketResume], pause: [Function: onSocketPause] }, _eventsCount: 10, _maxListeners: undefined, _writableState: WritableState { objectMode: false, highWaterMark: 16384, needDrain: false, ending: false, ended: false, finished: false, decodeStrings: false, defaultEncoding: 'utf8', length: 0, writing: false, corked: 0, sync: true, bufferProcessing: false, onwrite: [Function], writecb: null, writelen: 0, bufferedRequest: null, lastBufferedRequest: null, pendingcb: 0, prefinished: false, errorEmitted: false, bufferedRequestCount: 0, corkedRequestsFree: [Object] }, writable: true, allowHalfOpen: true, destroyed: false, _bytesDispatched: 0, _sockname: null, _pendingData: null, _pendingEncoding: '', server: Server { domain: null, _events: [Object], _eventsCount: 2, _maxListeners: undefined, _connections: 1, _handle: [Object], _usingSlaves: false, _slaves: [], _unref: false, allowHalfOpen: true, pauseOnConnect: false, httpAllowHalfOpen: false, timeout: 120000, _pendingResponseData: 0, _connectionKey: '6::::3000' }, _server: Server { domain: null, _events: [Object], _eventsCount: 2, _maxListeners: undefined, _connections: 1, _handle: [Object], _usingSlaves: false, _slaves: [], _unref: false, allowHalfOpen: true, pauseOnConnect: false, httpAllowHalfOpen: false, timeout: 120000, _pendingResponseData: 0, _connectionKey: '6::::3000' }, _idleTimeout: 120000, _idleNext: TimersList { _idleNext: [Circular], _idlePrev: [Circular], _timer: [Object], _unrefed: true, msecs: 120000 }, _idlePrev: TimersList { _idleNext: [Circular], _idlePrev: [Circular], _timer: [Object], _unrefed: true, msecs: 120000 }, _idleStart: 780267, parser: HTTPParser { '0': [Function: parserOnHeaders], '1': [Function: parserOnHeadersComplete], '2': [Function: parserOnBody], '3': [Function: parserOnMessageComplete], '4': [Function: onParserExecute], _headers: [], _url: '', _consumed: true, socket: [Circular], incoming: [Circular], outgoing: null, maxHeaderPairs: 2000, onIncoming: [Function: parserOnIncoming] }, on: [Function: socketOnWrap], _paused: false, read: [Function], _consuming: true, _httpMessage: ServerResponse { domain: null, _events: [Object], _eventsCount: 2, _maxListeners: undefined, output: [], outputEncodings: [], outputCallbacks: [], outputSize: 0, writable: true, _last: false, upgrading: false, chunkedEncoding: false, shouldKeepAlive: true, useChunkedEncodingByDefault: true, sendDate: true, _removedHeader: {}, _contentLength: null, _hasBody: true, _trailer: '', finished: false, _headerSent: false, socket: [Circular], connection: [Circular], _header: null, _headers: [Object], _headerNames: [Object], _onPendingData: [Function: updateOutgoingData], req: [Circular], locals: {}, _startAt: undefined, _startTime: undefined, writeHead: [Function: writeHead], __onFinished: [Object] }, _peername: { address: '::ffff:192.168.88.44', family: 'IPv6', port: 64760 } }, _consuming: false, _dumped: false, next: [Function: next], baseUrl: '/api', originalUrl: '/api/image/upload', _parsedUrl: Url { protocol: null, slashes: null, auth: null, host: null, port: null, hostname: null, hash: null, search: null, query: null, pathname: '/image/upload', path: '/image/upload', href: '/image/upload', _raw: '/image/upload' }, params: {}, query: {}, res: ServerResponse { domain: null, _events: { finish: [Object], end: [Function: onevent] }, _eventsCount: 2, _maxListeners: undefined, output: [], outputEncodings: [], outputCallbacks: [], outputSize: 0, writable: true, _last: false, upgrading: false, chunkedEncoding: false, shouldKeepAlive: true, useChunkedEncodingByDefault: true, sendDate: true, _removedHeader: {}, _contentLength: null, _hasBody: true, _trailer: '', finished: false, _headerSent: false, socket: Socket { connecting: false, _hadError: false, _handle: [Object], _parent: null, _host: null, _readableState: [Object], readable: true, domain: null, _events: [Object], _eventsCount: 10, _maxListeners: undefined, _writableState: [Object], writable: true, allowHalfOpen: true, destroyed: false, _bytesDispatched: 0, _sockname: null, _pendingData: null, _pendingEncoding: '', server: [Object], _server: [Object], _idleTimeout: 120000, _idleNext: [Object], _idlePrev: [Object], _idleStart: 780267, parser: [Object], on: [Function: socketOnWrap], _paused: false, read: [Function], _consuming: true, _httpMessage: [Circular], _peername: [Object] }, connection: Socket { connecting: false, _hadError: false, _handle: [Object], _parent: null, _host: null, _readableState: [Object], readable: true, domain: null, _events: [Object], _eventsCount: 10, _maxListeners: undefined, _writableState: [Object], writable: true, allowHalfOpen: true, destroyed: false, _bytesDispatched: 0, _sockname: null, _pendingData: null, _pendingEncoding: '', server: [Object], _server: [Object], _idleTimeout: 120000, _idleNext: [Object], _idlePrev: [Object], _idleStart: 780267, parser: [Object], on: [Function: socketOnWrap], _paused: false, read: [Function], _consuming: true, _httpMessage: [Circular], _peername: [Object] }, _header: null, _headers: { 'x-powered-by': 'Express', 'access-control-allow-origin': '*' }, _headerNames: { 'x-powered-by': 'X-Powered-By', 'access-control-allow-origin': 'Access-Control-Allow-Origin' }, _onPendingData: [Function: updateOutgoingData], req: [Circular], locals: {}, _startAt: undefined, _startTime: undefined, writeHead: [Function: writeHead], __onFinished: { [Function: listener] queue: [Object] } }, body: {}, _startAt: [ 1336750, 929283559 ], _startTime: 2016-12-27T17:25:22.106Z, _remoteAddress: '::ffff:192.168.88.44', route: Route { path: '/image/upload', stack: [ [Object] ], methods: { post: true } } } { fieldname: 'file', originalname: 'name.jpg', encoding: '7bit', mimetype: 'image/jpeg' }


File upload
#2

Hi,
Try req.file not req.files coz multer gives you req.file object.


#3

still undefined, I’ve looked into the request and I can’t find anything related to req.files ou req.file


#4

Somebody have an idea, a hint, something ?