I'm using ng2-file-upload and multer to upload images in my application. The upload itself works fine apart from an error message I get after every upload.
{ Error: ENOENT: no such file or directory, unlink 'C:\Users\afram\projects\qs4\public\assets\img\file-2-1516970214633.jpeg'
at Error (native)
at Object.fs.unlinkSync (fs.js:1089:18)
at deleteImg (C:\Users\afram\projects\qs4\logic\post\roomRequest.js:64:16)
at response (C:\Users\afram\projects\qs4\logic\post\roomRequest.js:37:21)
at changeReturn (C:\Users\afram\projects\qs4\logic\database\databaseHandler.js:701:7)
at Query._callback (C:\Users\afram\projects\qs4\logic\database\databaseHandler.js:483:7)
at Query.Sequence.end (C:\Users\afram\projects\qs4\node_modules\mysql\lib\protocol\sequences\Sequence.js:88:24)
at Query._handleFinalResultPacket (C:\Users\afram\projects\qs4\node_modules\mysql\lib\protocol\sequences\Query.js:139:8)
at Query.OkPacket (C:\Users\afram\projects\qs4\node_modules\mysql\lib\protocol\sequences\Query.js:72:10)
at Protocol._parsePacket (C:\Users\afram\projects\qs4\node_modules\mysql\lib\protocol\Protocol.js:279:23)
errno: -4058,
code: 'ENOENT',
syscall: 'unlink',
path: 'C:\\Users\\afram\\projects\\qs4\\public\\assets\\img\\file-2-1516970214633.jpeg'
The problem is that after I upload the image I can't view it until I rebuild my application.
Here's the express/multer code.
// File upload config Declaring Diskstorage for use with Multer. Sets destination and filename on server
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './src/assets/img/')
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + file.originalname + '.' + file.mimetype.split('/')[1]);
}
});
//upload variable is a Multer object. Uses a diskstorage and sets additional paramaters. Defines filesize and upload type
var upload = multer({ storage: storage, limits: { fileSize: 524288 } }).single('file');
/** API path that will upload the files */
router.post('/upload', function (req, res) {
upload(req, res, function (err) {
console.log(req.file);
if (err) {
res.json({ error_code: 1, err_desc: err });
return;
}
res.json({ error_code: 0, err_desc: null });
})
});
Angular 4 code
...
uploader = new FileUploader({url: '/api/uploadTest'});
...
this.uploader.onAfterAddingFile = f => {
f.file.name = data.room.number + '-' + new Date().getTime();
if (this.uploader.queue.length > 1) {
this.uploader.removeFromQueue(this.uploader.queue[0]);
}
}
...
if(this.uploader.queue.length > 0) {
this.uploader.queue[0].upload();
}
...
template
<div ng2FileDrop [uploader]="uploader">
<input type="file" ng2FileSelect [uploader]="uploader" accept="image/*">
</div>
<img height="100%" width="100%" *ngIf="uploader.queue.length == 0" [src]="'../../../..' + data.room.imgLink">
<div *ngFor="let item of uploader.queue;">
<img height="100%" width="100%" src="" imgPreview [image]="item?._file"/>
</div>
