Can't retrieve uploaded file meta-data using Angular 2 and Node.js -
i'm trying upload file disk storage , save path in content model. i'm having hard time retrieving file metadata on frontend using angular 2 in order add file path const content in content-input.component.ts , save in database using service.
i tried overwriting uploader.oncompleteitem() function issues on git-hub proposed no use. in terminal, server printing metadata (check app.js), i'm not sure how response multer frontend.
it's first time me try implementing file upload, if have advice or maybe other methods clearer please let me know.
here relevant files:
content-input.component.html:
<style> .my-drop-zone { border: dotted 3px lightgray; } .nv-file-over { border: dotted 3px red; } /* default class applied drop zones on over */ .another-file-over-class { border: dotted 3px green; } html, body { height: 100%; } </style> <div class="col-md-8 col-md-offset-2"> <form (ngsubmit)="onsubmit(f)" #f="ngform"> <div class="form-group"> <label for="name">name</label> <input type="text" class="form-control" id="name" name="name" [ngmodel]="content?.name" /> </div> <div class="form-group"> <label for="tags">tags</label> <input type="text" class="form-control" id="tags" name="tags" [ngmodel]="content?.tags" /> </div> <div class="form-group"> <label for="file">file</label> <input type="file" id="file" name="file" [ngmodel]="content?.file" ng2fileselect [uploader]="uploader" /> </div> <button type="button" class="btn btn-danger" (click)="onclear(f)">clear</button> <button class="btn btn-success" type="submit">save</button> </form> </div> content-input.component.ts:
import { component, oninit } '@angular/core'; import { contentservice } './content.service'; import { content } './content.model'; import { ngform } '@angular/forms'; import { fileuploader } "ng2-file-upload"; const url = 'http://localhost:3001/upload'; @component({ selector: 'app-content-input', templateurl: './content-input.component.html', }) export class contentinputcomponent implements oninit { content: content; public uploader:fileuploader = new fileuploader({url: url}); constructor(private contentservice: contentservice) {} onsubmit(form: ngform) { if (this.content) { // edit this.content.name = form.value.name; this.contentservice.updatemessage(this.content) .subscribe( result => console.log(result) ); this.content = null; } else { const content = new content(form.value.name, 'yehia'); this.uploader.uploadall(); this.uploader.oncompleteitem = (item: any, response: any, status: any, headers: any) => { console.log(response);// url in response }; this.contentservice.addmessage(content) .subscribe( data => console.log(data), error => console.log(error) ); } form.resetform(); } onclear(form: ngform) { this.content = null; form.resetform(); this.uploader.clearqueue(); } ngoninit() { this.contentservice.contentisedit.subscribe( (content: content) => this.content = content ); } } content.service.ts:
import { http, response, headers } "@angular/http"; import { injectable, eventemitter } "@angular/core"; import 'rxjs/rx'; import { observable } 'rxjs/rx'; import { content } "./content.model"; import { errorservice } "../errors/error.service"; @injectable() export class contentservice { private contents: content[] = []; contentisedit = new eventemitter<content>(); constructor(private http: http, private errorservice: errorservice){} addmessage(message: content) { const body = json.stringify(message); const headers = new headers({'content-type': 'application/json'}); const token = localstorage.getitem('token') ? '?token=' + localstorage.getitem('token') : ''; return this.http.post('http://localhost:3000/content' + token, body, {headers: headers}) .map((response: response) => { const result = response.json(); const date = new date(); const month = date.getutcmonth() + 1; //months 1-12 const day = date.getutcdate(); const year = date.getutcfullyear(); const newdate = year + "/" + month + "/" + day; const content = new content( result.obj.name, result.obj.user.firstname, result.obj._id, result.obj.user._id, ); this.contents.push(content); return content; }) .catch((error: response) => { this.errorservice.handleerror(error.json()); return observable.throw(error.json()); }); } getmessages() { return this.http.get('http://localhost:3000/content') .map((response: response) => { const contents = response.json().obj; let transformedcontents: content[] = []; (let content of contents) { transformedcontents.push(new content( content.name, content.user.firstname, content._id, content.user._id )); } this.contents = transformedcontents; return transformedcontents; }) .catch((error: response) => { this.errorservice.handleerror(error.json()); return observable.throw(error.json()); }); } updatemessage(content: content) { const body = json.stringify(content); const headers = new headers({'content-type': 'application/json'}); const token = localstorage.getitem('token') ? '?token=' + localstorage.getitem('token') : ''; return this.http.patch('http://localhost:3000/content/' + content.contentid + token, body, {headers: headers}) .map((response: response) => response.json()) .catch((error: response) => { this.errorservice.handleerror(error.json()); return observable.throw(error.json()); }); } editmessage(content: content) { this.contentisedit.emit(content); } deletemessage(content: content) { this.contents.splice(this.contents.indexof(content), 1); const token = localstorage.getitem('token') ? '?token=' + localstorage.getitem('token') : ''; return this.http.delete('http://localhost:3000/content/' + content.contentid + token) .map((response: response) => response.json()) .catch((error: response) => { this.errorservice.handleerror(error.json()); return observable.throw(error.json()); }); } } app.js:
var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieparser = require('cookie-parser'); var bodyparser = require('body-parser'); var mongoose = require('mongoose'); var multer = require('multer'); var userroutes = require('./routes/user'); var contentroutes = require('./routes/content'); var approutes = require('./routes/app'); var app = express(); mongoose.connect('localhost:27017/node-angular'); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'hbs'); // setting port app.set('port', 3001); // uncomment after placing favicon in /public //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); app.use(logger('dev')); app.use(bodyparser.json()); app.use(bodyparser.urlencoded({extended: false})); app.use(cookieparser()); app.use(express.static(path.join(__dirname, 'public'))); app.use(function (req, res, next) { res.setheader('access-control-allow-origin', 'http://localhost:3000'); res.setheader('access-control-allow-headers', 'origin, x-requested-with, content-type, accept'); res.setheader('access-control-allow-methods', 'post, get, patch, delete, options'); res.setheader("access-control-allow-credentials", true); next(); }); var storage = multer.diskstorage({ //multers disk storage settings destination: function (req, file, cb) { cb(null, './uploads/'); }, filename: function (req, file, cb) { var datetimestamp = date.now(); cb(null, file.fieldname + '-' + datetimestamp + '.' + file.originalname.split('.')[file.originalname.split('.').length -1]); } }); var upload = multer({ //multer settings storage: storage }).single('file'); // api path upload files app.post('/upload', function(req, res) { upload(req,res,function(err){ console.log(req.file); if(err){ res.json({error_code:1,err_desc:err}); return; } res.json({error_code:0,err_desc:null}); }); }); var server = app.listen(app.get('port'), function(){ var port = server.address().port; console.log('running on port ' + port); }); app.use('/user', userroutes) app.use('/content', contentroutes); app.use('/', approutes); // catch 404 , forward error handler app.use(function (req, res, next) { return res.render('index'); }); module.exports = app;
Comments
Post a Comment