Upload file with Sails JS and Vue JS - vue.js

Question

I want to upload a file with Parasails. But I have a error :
<- POST /api/v1/admin/create-article (3ms 400)
| no file attached
| No file was attached.
°
I suppose to my syntaxe is not good.
My html code :
<div class="form-group">
<label for="imgFile">Image:</label>
<input class="form-control-file" id="imgFile" type="file" :class="[formErrors.imgFile ? 'is-invalid' : '']" autocomplete="imgFile">
<div class="invalid-feedback" v-if="formErrors.imgFile">S'il vous plaît, entrez une image valide.</div>
</div>
My action 2 :
module.exports = {
files: ['imgFile'],
friendlyName: 'Create article',
description: '',
inputs: {
imgFile: {
description: 'Upstream for an incoming file upload.',
type: 'ref'
},
titre: {
type: 'string',
required: true,
},
description: {
type: 'string',
required: true,
},
contenue: {
type: 'string',
required: true,
},
postDate:{
type: 'string',
required: false,
},
etiquette:{
type: 'number',
required: false,
},
sharingLink:{
type: 'string',
required: false,
}
},
exits: {
success: {
outputDescription: 'The newly created `Thing`.',
outputExample: {}
},
noFileAttached: {
description: 'No file was attached.',
responseType: 'badRequest'
},
tooBig: {
description: 'The file is too big.',
responseType: 'badRequest'
},
},
fn: async function (inputs, exits) {
var util = require('util');
// Upload the image.
var info = await sails.uploadOne(inputs.imgFile, {
maxBytes: 3000000
})
// Note: E_EXCEEDS_UPLOAD_LIMIT is the error code for exceeding
// `maxBytes` for both skipper-disk and skipper-s3.
.intercept('E_EXCEEDS_UPLOAD_LIMIT', 'tooBig')
.intercept((err)=>new Error('The photo upload failed: '+util.inspect(err)));
if(!info) {
throw 'noFileAttached';
}
var unurl = await sails.helpers.convertUrl(inputs.titre);
await Article.create({titre:inputs.titre, description:inputs.description, contenue:inputs.contenue ,postDate:inputs.postDate ,sharingLink:inputs.sharingLink,url:unurl, etiquette:inputs.etiquette}).fetch();
return exits.success();
}
};
My Root :
'POST /api/v1/admin/create-article': { action: 'admin/create-article' },
I have add this package on my project : sails-hook-uploads
I'm new to Sails and I do not understand this error.
Thanks!
How to upload a file using the new controller actions format in sails.js

Answer 1

Thanks you for your answers !
I think it's a front-end problem. When I make a "console.log" on "inputs" in my action:
{ imgFile:
Upstream {
_fatalErrors: [],
isNoop: true,
_files: [],
timeouts: { untilFirstFileTimer: [Object], untilMaxBufferTimer: [Object] },
_readableState:
ReadableState {
objectMode: true,
highWaterMark: 16,
buffer: [Object],
length: 0,
pipes: null,
pipesCount: 0,
flowing: null,
ended: false,
endEmitted: false,
reading: false,
sync: true,
needReadable: false,
emittedReadable: false,
readableListening: false,
resumeScheduled: false,
destroyed: false,
defaultEncoding: 'utf8',
awaitDrain: 0,
readingMore: false,
decoder: null,
encoding: null },
readable: true,
domain: null,
_events: { error: [Function] },
_eventsCount: 1,
_maxListeners: undefined,
fieldName: 'NOOP_imgFile' },
titre: 'inputs inputs inputs inputs',
description: 'inputs inputs inputs',
contenue: 'inputs inputs inputs',
postDate: '2019-12-21T09:13',
etiquette: 1 }
On the Chrome dev tool :
response of the tool
I think is not a websocket request is XMLHttpRequest (type;xhr).

Answer 2

module.exports = {
friendlyName: 'Update profile avatar',
description: '',
inputs: {
},
exits: {
success: {
responseType: 'redirect'
},
failure: {
responseType: 'redirect'
},
unhandleError: {
responseType: 'redirect',
}
},
fn: async function (inputs, exits) {
let req = this.req;
let res = this.res;
req.file('avatar').upload({
saveAs: fileName,
dirname: require('path').resolve(sails.config.appPath,
'assets/uploads')
}, function whenDone(err, uploadedFile) {
// your code here
});
}
};
This is my code in controller when using req.file('file-name').upload() function. No need to define file in inputs because using req