How to upload file in angular 8 with Nodejs Web api ? – Project

1. First you should need to create component for typeing follwing cmd
ng g c addblog
2. Then Add the form field with file upload image.
3. Then you can add file trigger event in input type file liket this
<input type=”file” name=”image” (change)=”onSelectedFile($event)”>

4. Then you can create onselect file function addblog type script file like this

onSelectedFile(event){
		if(event.target.files.length > 0){
			const file = event.target.files[0];
			this.addblogform.get('image').setValue(file);
		}
	}

5. Now you can send the image and other data useing web api services and stores image in localhost data base.

Server – Nodejs

1. Package.json


{
  "name": "serverfileupload",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "express-fileupload": "^1.1.6"
  }
}

2.app.js

var express = require('express');
var bodyParser = require('body-parser');
var fileUpload = require('express-fileupload');
const app = express();

app.use(fileUpload());
app.use(bodyParser.json());

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
  });

app.get('/', (req, res, next) => {
    //res.status(200).send('I am from get');
    res.sendFile(__dirname + "/index.html");
})

app.post('/upload', (req, res, next) => {

    const user = req.body;
    console.log('Request Body : ', user);
    
    const file = req.files.image;
    console.log(file);
    console.log("File Name: ", file.name);

    file.mv("./Uploads/"+file.name, (err, result) => {
        if (err) {
            //throw err.message
            res.send({
                Error : "true",
                message: err.message
            })
        }
        res.send({
            success: 'true',
            message: "Single File Uploaded !"
        });
    })

    //If the req.files contains [] ,then it will multipfile upload
    // if (req.files) {        
    //     const file = req.files.image;
    //     console.log(`Multip File Upload - Total no files ${file.length}`)
    //     for (let i = 0; i < file.length; i++) {
    //         file[i].mv('./uploads/' + file[i].name, function (err) {
    //             if (err) {
    //                 res.send(err);
    //             }
    //         })
    //     }
    //     res.send({
    //         success: 'true',
    //         message: "Multip File Uploaded !"
    //     });
    // }
})


app.listen('3000', () => {
    console.log('Server Start Port : 3000');
})

Note : Create “Uploads” Folder in the project file

Client – Angular8

app.component.html

<form [formGroup]="addblogform" (ngSubmit)="addblogsubmit()">
  <div class="row padform">
    <div class="form-group">
      <label>Programing Title</label>
      <input type="text" class="form-control" formControlName="blog_title" placeholder="Enter blog title">
      <div *ngIf="blog_title.invalid && (blog_title.dirty || blog_title.touched)" class="error loginerror">
        <div class="bg-danger" *ngIf="blog_title.errors.required">
          Username is required.
        </div>
      </div>
    </div>

    <div class="form-group">
      <label> Programing Category</label>
      <input type="text" class="form-control" formControlName="blog_cat" placeholder="Enter blog Category">
      <div *ngIf="blog_cat.invalid && (blog_cat.dirty || blog_cat.touched)" class="error loginerror">
        <div class="bg-danger" *ngIf="blog_cat.errors.required">
          Blog Category is required
        </div>
      </div>
    </div>

    <div class="form-group">
      <label>Programming Content</label>
      <textarea class="form-control" formControlName="blog_content"></textarea>
      <div *ngIf="blog_content.invalid && (blog_content.dirty || blog_content.touched)" class="error loginerror">
        <div class="bg-danger" *ngIf="blog_content.errors.required">
          blog content is required
        </div>
      </div>

    </div>

    <div class="form-group form-row">
      <label>Programming Image</label>
      <input type="file" id="image" (change)="onSelectedFile($event)" />
    </div>

    <div class="form-group">
      <button type="submit" [disabled]="!addblogform.valid" class="btn btn-primary">Submit</button>
    </div>

    <div class="alert alert-info" *ngIf="done">
      <strong>{{message}}</strong>
    </div>
  </div>
</form>

app.component.ts


import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Client';
  addblogform: FormGroup;

  constructor(private fb: FormBuilder, private http: HttpClient) { }

  ngOnInit() {
    this.addblogform = this.fb.group({
      blog_title: ['', Validators.required],
      blog_cat: ['', Validators.required],
      blog_content: ['', Validators.required],
      image: ['']
    })
  }

  onSelectedFile(event) {
    if (event.target.files.length > 0) {
      const file = event.target.files[0];
      this.addblogform.get('image').setValue(file);
    }
  }

  get blog_title() { return this.addblogform.get('blog_title'); }
  get blog_cat() { return this.addblogform.get('blog_cat'); }
  get blog_content() { return this.addblogform.get('blog_content'); }

  addblogsubmit() {
    var formData = new FormData();
    formData.append('blog_title', this.addblogform.get('blog_title').value);
    formData.append('blog_cat', this.addblogform.get('blog_cat').value);
    formData.append('blog_content', this.addblogform.get('blog_content').value);
    formData.append('image', this.addblogform.get('image').value);

    console.log('FormData : ', JSON.stringify(formData));
    formData.forEach((value, key) => {
      console.log(key + " " + value)
    });

    this.http.post('http://localhost:3000/upload', formData).subscribe(
      (response) => console.log(response),
      (error) => console.log(error)
    )
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent    
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Reference

Post Views: 14

Server – Nodejs

Client – Angular8

Reference

Leave a Reply Cancel reply