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");
});
