https://i.sstatic.net/VQcAd.png
After successfully creating a CRUD app with Angular using Json server and the HttpClient module, I saved contact objects in a JSON file named db.json.
{"contact": [
{
"name": "",
"email": "",
"phone": "",
"image": "",
"id": 1
},
{
"name": "",
"email": "",
"phone": "",
"image": "",
"id": 2}]}
However, I am facing an issue on how to upload an image file from an input tag in Angular. The ContactCreateComponent allows me to create a contact object by importing data from restApiService.
import { Component, OnInit, Input } from '@angular/core';
import { Router } from '@angular/router';
import { RestApiService } from "../shared/rest-api.service";
@Component({
selector: 'app-contact-create',
templateUrl: './contact-create.component.html',
styleUrls: ['./contact-create.component.css']
})
export class ContactCreateComponent implements OnInit {
@Input() contactDetails = { name: '', email: '', phone:"",image:"" }
constructor( public restApi: RestApiService,
public router: Router,) {
}
ngOnInit() {
}
addContact(dataContact) {
this.restApi.createContact(this.contactDetails).subscribe((data: {}) => {
this.router.navigate(['/contact-list'])
})
}
}Here is the source code for my restApiService:
import { Injectable } from '@angular/core';
import { HttpClient,HttpHeaders } from '@angular/common/http';
import { Contact } from '../shared/contact';
import { Observable,throwError } from 'rxjs';
import { retry, catchError } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class RestApiService {
apiURL ="http://localhost:3000"
constructor(private http:HttpClient) { }
httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
}
getContacts(): Observable<Contact> {
return this.http.get<Contact>(this.apiURL + '/contact')
.pipe(
retry(1),
catchError(this.handleError)
)
}
getContact(id): Observable<Contact> {
return this.http.get<Contact>(this.apiURL + '/contact/' + id)
.pipe(
retry(1),
catchError(this.handleError)
)
}
createContact(Contact): Observable<Contact> {
return this.http.post<Contact>(this.apiURL + '/contact', JSON.stringify(Contact), this.httpOptions)
.pipe(
retry(1),
catchError(this.handleError)
)
}
updateContact(id, Contact): Observable<Contact> {
return this.http.put<Contact>(this.apiURL + '/contact/' + id, JSON.stringify(Contact), this.httpOptions)
.pipe(
retry(1),
catchError(this.handleError)
)
}
deleteContact(id){
return this.http.delete<Contact>(this.apiURL + '/contact/' + id, this.httpOptions)
.pipe(
retry(1),
catchError(this.handleError)
)
}
handleError(error) {
let errorMessage = '';
if(error.error instanceof ErrorEvent) {
// Get client-side error
errorMessage = error.error.message;
} else {
// Get server-side error
errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
}
window.alert(errorMessage);
return throwError(errorMessage);
}
}Thank you for your assistance.