Easy file upload module for angular 4 and next versions. Single or multiple file can upload with mime type selection control. Please read the description carefully. # Installation npm i ng4x-fileupload --save
npm install ng4x-fileuploadimport {Ng4xFileuploadModule} from 'ng4x-fileupload'
After that import the FileUploadComponent from 'ng4x-fileupload' into your component.
import {Ng4xfileuploadComponent} from 'ng4x-fileupload'
Add the ng4x-fileupload component tag into your html file.
*You should import HttpClientModule in your app.module.ts
import {HttpClientModule} from '@angular/common/http'
you should add an id for the ng4x-fileupload component tag in your html. By this tag you can access respective function of ng4x-fileupload module.You can add any id in this tag.
Now add this line in your component:
@ViewChild('ng4fileupload') ng4xfileupload:Ng4xfileuploadComponent;
For multiple file upload you need to add a input variable into tag:
'isMultiple' variable name cannot be change and it is a boolean variable. You can give 'bool_multiple' variable name and it should be boolean.So in your component:
bool_multiple:boolean=true/false
For specific file type you want to upload tag will be:
'accept_mime' variable name cannot be change and it is a accept mimetype value like image/png,application/pdf etc. You can give 'my_mime' variable name and it should a string type. So in your component:
my_mime:string='image/*'
example:
in component:
@ViewChild('ng4fileupload') ng4xfileupload:Ng4xfileuploadComponent;
let count_file=this.ng4xfileupload.getFileSelectCount()
For file upload:
fileSave(url:string,extra_param:object): For save file in your server. It takes two parameter.
1. url: your server router url for file upload. It is string type.
2. extra_param: It is an object type variable. You can send extra parameter like id, file name etc.
let extra_param={id:1,age:23}. If no extra param just send an empty object.
It returns an Observable. In server you can get this variable value by:
var extra_param=req.headers['x-custom-header']
if(typeof extra_param!=="undefined")
extra_param=JSON.parse(extra_param)
example:
in component:
@ViewChild('ng4fileupload') ng4xfileupload:Ng4xfileuploadComponent;
let url=
let extra_param={}
let count_file=this.ng4xfileupload.fileSave(url,extra_param).subscribe(todo=>{});
#Node server code example
In your node server you can use multer.
In this example how upload image and resize it. You can set your version.
var multer = require('multer');
var Jimp = require("jimp");
var filepath=__dirname.substr(0,__dirname.indexOf("operation")-1)
var storage = multer.diskStorage({ //multers disk storage settings
destination: function (req, file, cb) {
cb(null, filepath+'/public/deal_upload/');
},
filename: function (req, file, cb) {
var datetimestamp = Date.now();
var randomnumber = Math.floor(Math.random() * (9999999999 - 1111111111 + 1)) + 1111111111;
cb(null, file.fieldname + '-' + randomnumber + '.' + file.originalname.split('.')[file.originalname.split('.').length -1]);
}
});
var upload = multer({ //multer settings
storage: storage
}).single('file');
obj.ImageUpload=function(req, res) {
var fs=require('fs');
var extra_param=req.headers['x-custom-header'];
if(typeof extra_param!=="undefined")
extra_param=JSON.parse(extra_param)
upload(req,res,function(err){
Jimp.read((req.file).path).then(function (lenna) {
lenna.clone()
.quality(60)
.write((req.file).destination+"/banner/"+extra_param.id+".jpg");
lenna.resize(569, Jimp.AUTO, Jimp.RESIZE_BEZIER) // resize
.quality(60) // set JPEG quality
//.greyscale() // set greyscale
.write((req.file).destination+extra_param.id+".jpg"); // save
lenna.resize(272, Jimp.AUTO, Jimp.RESIZE_BEZIER) // resize
.quality(60) // set JPEG quality
//.greyscale() // set greyscale
.write((req.file).destination+"/small_box/"+extra_param.id+".jpg"); // save
fs.unlink((req.file).path)
}).catch(function (err) {
console.error(err);
});
if(err){
console.log(err)
res.json({error_code:1,err_desc:err});
return;
}
res.json({error_code:0,err_desc:null});
});
}
#Further support
Comming soon