10 TIPs - To Become a Good Developer/Programmer
Why Join
Become a member
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
C# Corner Home
Technologies
Monthly Leaders
ASK A QUESTION
Forum guidelines
Purini Sivakrishna
2.1k
9
399
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?