can not upload file in angular 2 when using ng-fullstack
See original GitHub issueI use this library : https://github.com/valor-software/ng2-file-upload
but application console log bad request 400 .
and then I follow this tutorial
https://www.thepolyglotdeveloper.com/2016/02/upload-files-to-node-js-using-angular-2/
and It still console log bad request 400 .
Why ? I can’t use xhr to upload file ? or I can’t use ng2-file-upload to upload file to server .
This is my code now .
media.ts
import {
Component,
Inject,
OnInit,
ElementRef
} from '@angular/core';
import { Http, Response,HTTP_PROVIDERS, Headers,RequestOptions } from '@angular/http';
import { FormBuilder, ControlGroup, Control } from '@angular/common';
import { AuthService } from '../dashboard/services/auth-services';
import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgStyle} from '@angular/common';
import {FILE_UPLOAD_DIRECTIVES, FileUploader} from 'ng2-file-upload';
import { Media } from '../dashboard/interface/media';
import {MediaService} from "../dashboard/services/media-service";
import {Observable} from 'rxjs/Rx';
const URL = '/api/media';
@Component({
selector: 'demo',
templateUrl: 'client/dev/demo/demo.html',// indicate html page
directives: [FILE_UPLOAD_DIRECTIVES, NgClass, NgStyle, CORE_DIRECTIVES, FORM_DIRECTIVES],
providers:[
HTTP_PROVIDERS,
AuthService,
MediaService]
})
export class DemoComponent implements OnInit{
user:string;
pathLocal:string="";
filesWUpload:File;
uploader:FileUploader = new FileUploader({url: URL});
filesToUpload: Array<File>;
constructor(private _elRef:ElementRef,private _authService: AuthService,private mediaService:MediaService ,private _http: Http ){
this.filesToUpload = [];
}
upload() {
this.makeFileRequest("/api/media", [], this.filesToUpload).then((result) => {
console.log(result);
}, (error) => {
console.log(error);
});
}
fileChangeEvent(fileInput: any){
this.filesToUpload = <Array<File>> fileInput.target.files;
}
makeFileRequest(url: string, params: Array<string>, files: Array<File>) {
return new Promise((resolve, reject) => {
var formData: any = new FormData();
var xhr = new XMLHttpRequest();
for(var i = 0; i < files.length; i++) {
formData.append("uploads[]", files[i], files[i].name);
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
resolve(JSON.parse(xhr.response));
} else {
reject(xhr.response);
}
}
}
var cd = "form-data,name='imageUpload'";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Disposition", cd);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
});
}
ngOnInit() {
}
}
media.html
<input type="file" name="imageUpload" (change)="fileChangeEvent($event)" placeholder="Upload file..." />
<button type="button" (click)="upload()">Upload</button>
Issue Analytics
- State:
- Created 7 years ago
- Comments:9 (4 by maintainers)
Top Results From Across the Web
File Upload In Angular? - Stack Overflow
Angular 2 provides good support for uploading files. No third party library is required. <input type="file" (change)="fileChange($event)" ...
Read more >Angular File Upload - Complete Guide
In this post, we will cover the following topics: How to upload files in a browser; Building the user interface of a file...
Read more >File uploads come to AngularFire. Cloud Storage for Firebase ...
Get ready, uploading files from your Angular app just got a lot easier. AngularFire, meet Cloud Storage. If you're not familiar with AngularFire...
Read more >Kendo UI for Angular Upload Overview - Telerik
The Kendo UI for Angular Upload component helps users to send files from their file systems to dedicated server handlers which are configured...
Read more >valor-software/ng2-file-upload: Easy to use Angular ... - GitHub
Quick start. A recommended way to install ng2-file-upload is through npm package manager using the following command: npm i ng2- ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
👍
@ericmdantas thanks you so much 💃