TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
Purini Sivakrishna
NA
9
698
csv file upload database using php, file uploaded but httperroresponse
Jan 19 2021 10:11 AM
<h1>Angular File Upload</h1>
<div>
<form [formGroup] =
"uploadForm"
(ngSubmit)=
"onSubmit()"
>
<div>
<input type=
"file"
name=
"profile"
(change)=
"onFileSelect($event)"
/>
</div>
<div>
<button type=
"submit"
>Upload</button>
</div>
</form>
</div>
import { Component, OnInit } from
'@angular/core'
;
import { FormBuilder, FormGroup } from
'@angular/forms'
;
import { HttpClient } from
'@angular/common/http'
;
import {UploadService} from
'./upload.service'
;
@Component({
selector:
'app-root'
,
templateUrl:
'./app.component.html'
,
styleUrls: [
'./app.component.css'
]
})
export
class
AppComponent
implements
OnInit {
uploadForm: FormGroup;
form: FormGroup;
uploadResponse;
SERVER_URL=
"http://localhost/web_api/employee2.php"
;
constructor(
private
formBuilder: FormBuilder,
private
httpClient: HttpClient,
private
UploadService: UploadService) { }
ngOnInit() {
this.uploadForm = this.formBuilder.group({
profile: [
''
]
});
}
onFileSelect(event) {
if
(event.target.files.length > 0) {
const
file = event.target.files[0];
this.uploadForm.get(
'profile'
).setValue(file);
}
}
onSubmit() {
const
formData =
new
FormData();
formData.append(
'file'
, this.uploadForm.get(
'profile'
).value);
// this.httpClient.post<any>(this.SERVER_URL, formData).subscribe(((response) => response.json())
this.UploadService.uploadFile(formData).subscribe(
(policy) => console.log(policy),
(err) => console.log(err)
);
}
}
import { Injectable } from
'@angular/core'
;
import { HttpClient, HttpEvent, HttpErrorResponse, HttpEventType } from
'@angular/common/http'
;
import { Observable, throwError } from
'rxjs'
;
import { catchError, retry } from
'rxjs/operators'
;
import { map } from
'rxjs/operators'
;
@Injectable({
providedIn:
'root'
})
export
class
UploadService {
SERVER_URL: string =
"http://localhost/web_api"
;
constructor(
private
httpClient: HttpClient) { }
public
uploadFile(formData) {
console.log(formData);
let uploadURL = `${this.SERVER_URL}/employee2.php`;
return
this.httpClient.post<any>(uploadURL, formData)
.pipe(
retry(1),
catchError(this.handleError)
);
}
handleError(error) {
let errorMessage =
''
;
if
(error.error instanceof ErrorEvent) {
// client-side error
errorMessage = `Error: ${error.error.message}`;
}
else
{
// server-side error
errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
}
window.alert(errorMessage);
return
throwError(errorMessage);
}
}
Reply
Answers (
0
)
Keep me sign in concept in angular using ASP DOT NET CORE
How can I prevent Form Replay Attack in an Angular 8 application?