How to integrate it with reactive form #936

New Issue

2017-11-30T13:30:33Z

TarnjeetSomal commented

2017-11-30 13:30:33 +00:00

(Migrated from github.com)

On my app I have a profile form where I upload profile pic for user, how can I integrate this plugin with my form and submit image data to upload with form data?

I am using REST API to update profile details.

On my app I have a profile form where I upload profile pic for user, how can I integrate this plugin with my form and submit image data to upload with form data? I am using REST API to update profile details.

👍 4

mattmcsparran commented

2017-12-20 15:47:31 +00:00

(Migrated from github.com)

If you're using node on your backend:

const multer = require('multer');
const path = require('path');
const storage = multer.diskStorage({
  destination: (req, file, callback) => {
    callback(null, './public/uploads');
  },
  filename: (req, file, callback) => {
    callback(null, Date.now().toString() + path.extname(file.originalname));
  }
});
const upload = multer({storage: storage}).single('avatar');
let service = {};
service.uploadAvatar = (req, res, next) => {
  console.log('upload initiated');
  User.findById(req.user._id, (err, user) => {
    if(err) {
      res.send(err);
    }
    upload(req, res, function(err) {
      if(err) {
        return res.send(err);
      }
      console.log(req.file.filename)
        user.avatar = 'uploads/' + req.file.filename;
        user.save();
        console.log(req.file)
        res.sendStatus(200);
    });
  })

}

on your frontend upload component:

import { Component, OnInit } from '@angular/core';
import {  FileUploader } from 'ng2-file-upload/ng2-file-upload';

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.css']
})
export class UploadComponent implements OnInit {

  constructor(
            ) {
            }
            public uploader: FileUploader = new FileUploader({
              url: 'http://localhost:3000/api/upload/avatar',
              itemAlias: 'avatar',});
  ngOnInit() {
    this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; };
    this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {
            console.log('ImageUpload:uploaded:' , item, status, response);
          };
        }
}

in your html template:

<input type="file" name="avatar" ng2FileSelect [uploader]="uploader" />
<button type="button" class="btn btn-success btn-s" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
upload
</button>

If you're using node on your backend: ``` const multer = require('multer'); const path = require('path'); const storage = multer.diskStorage({ destination: (req, file, callback) => { callback(null, './public/uploads'); }, filename: (req, file, callback) => { callback(null, Date.now().toString() + path.extname(file.originalname)); } }); const upload = multer({storage: storage}).single('avatar'); let service = {}; service.uploadAvatar = (req, res, next) => { console.log('upload initiated'); User.findById(req.user._id, (err, user) => { if(err) { res.send(err); } upload(req, res, function(err) { if(err) { return res.send(err); } console.log(req.file.filename) user.avatar = 'uploads/' + req.file.filename; user.save(); console.log(req.file) res.sendStatus(200); }); }) } ``` on your frontend upload component: ``` import { Component, OnInit } from '@angular/core'; import { FileUploader } from 'ng2-file-upload/ng2-file-upload'; @Component({ selector: 'app-upload', templateUrl: './upload.component.html', styleUrls: ['./upload.component.css'] }) export class UploadComponent implements OnInit { constructor( ) { } public uploader: FileUploader = new FileUploader({ url: 'http://localhost:3000/api/upload/avatar', itemAlias: 'avatar',}); ngOnInit() { this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; }; this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => { console.log('ImageUpload:uploaded:' , item, status, response); }; } } ``` in your html template: ``` <input type="file" name="avatar" ng2FileSelect [uploader]="uploader" /> <button type="button" class="btn btn-success btn-s" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length"> upload </button> ```

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#936