Subir archivos junto a otros campos en Angular y NodeJS [** 100% OK **]

setup inicial:

npm install --save express body-parser multer fs path

frontend:

app.component.html

<img src="" name="img" />

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div>
    <label for="nombre">Name</label>
    <input type="text" id="nombre" placeholder="Ingrese el nombre" formControlName="nombre">
  </div>
  <div>
    <label for="foto">Foto</label>
    <input type="file" id="foto" (change)="onFileChange($event)" #fileInput>
    <button type="button" (click)="clearFile()">clear file</button>
  </div>
  <button type="submit" [disabled]="form.invalid || loading">Submit</button>
</form>

app.component.ts

import { Component, ElementRef, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClient } from "@angular/common/http";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  form: FormGroup;
  loading: boolean = false;

  @ViewChild('fileInput') fileInput: ElementRef;

  constructor(private fb: FormBuilder, private http: HttpClient) {
    this.createForm();
  }

  createForm() {
    this.form = this.fb.group({
      nombre: ['', Validators.required],
      foto: null
    });
  }

  onFileChange(event) {
    if(event.target.files.length > 0) {
      let file = event.target.files[0];
      this.form.get('foto').setValue(file);
     
      var preview = document.querySelector('img');     
      var reader  = new FileReader();
   
      reader.onloadend = function () {
        preview.src = reader.result;
      }
   
      if (file) {
        reader.readAsDataURL(file);
      } else {
        preview.src = "";
      }

    }
  }

  onSubmit() {
    let formModel = new FormData();
    formModel.append('nombre', this.form.get('nombre').value);
    formModel.append('foto', this.form.get('foto').value);
   
    this.loading = true;

    this.http.post("http://localhost:8080/upload", formModel).subscribe((datos) => {               
      console.log(datos);   
   });     
  }

  clearFile() {
    this.form.get('foto').setValue(null);
    this.fileInput.nativeElement.value = '';
  }
}

app.module.ts

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

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


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


servidor:

var express = require("express")
    app = express(),
    bodyParser = require("body-parser"),
    multer  = require('multer'),
    fs = require('fs'),
    path = require('path');

var upload  = multer({ storage: multer.memoryStorage() });

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

var router = express.Router();

app.use(function (req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With, content-type, x-access-token, Authorization');
    res.setHeader('Access-Control-Allow-Credentials', true);             

    next();
});

app.use(router);

router.post('/upload', upload.array('foto'), function(req, res) {
    console.log("archivos son........: " + req.files);
    console.log(req.files[0]);
   
    console.log("el nombre es: " + req.body.nombre);

    var buffer = req.files[0].buffer;
    var magic = buffer.toString('hex', 0, 4);
    var filename = req.files[0].fieldname + '-' + Date.now() + path.extname(req.files[0].originalname);

    fs.writeFile('/temp/' + filename, buffer, 'binary', function (err) {
        if (err) throw err
            res.end('File is uploaded')
    })

    res.send(JSON.stringify({resultado : 'ok'}));       
});

app.listen(8080, function() {
    console.log("Node server running on http://localhost:8080");
});

No hay comentarios:

Publicar un comentario