Nourishing Pizza Microservice

    ng4x-fileupload
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.4 • Public • Published

    Description

    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
    

    How to use

    After installation import it into your app.module.ts

     import {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.

     <ng4x-fileupload #ng4fileupload></ng4x-fileupload>
    

    *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:

     <ng4x-fileupload #ng4fileupload [isMultiple]="bool_multiple"></ng4x-fileupload>
    

    '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:

    <ng4x-fileupload #ng4fileupload [isMultiple]="bool_multiple" [accept_mime]="my_mime">

    '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/*'

    Function Description

    For validation: getFileSelectCount() : It return file count selected by user.

    example: <ng4x-fileupload #ng4fileupload [isMultiple]="bool_multiple" [accept_mime]="my_mime"> 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:
    <ng4x-fileupload #ng4fileupload [isMultiple]="bool_multiple" [accept_mime]="my_mime">

    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

    Install

    npm i ng4x-fileupload

    DownloadsWeekly Downloads

    7

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    61.6 kB

    Total Files

    17

    Last publish

    Collaborators

    • anupam2018