im working on a angular php project and im working on admin view where he will be able to add image of the project and i want to save the url in the database so i can show it in the client side how can i do that ?
this is my html code snippet for the image
<div class="row">
<div class="col-md-6 div">Image <span style="color:red;">* </span> </div>
<div class="col-md-6">
<input id="imageInput" type="file" class="form-control" formControlName="image_url"
name="image_url" accept="image/*" required="" (change)="setPhoto($event)">
</div>
</div>
and this is my ts file
import { ElementRef, OnInit, ViewChild } from '@angular/core';
import { Component } from '@angular/core';
import { ApiService } from '../service/api.service';
import { Router } from '@angular/router';
import { FormArray, FormBuilder, FormControl, Validators, AbstractControl, ValidationErrors } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { countries } from '../countries_data';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'app-addprojects',
templateUrl: './addprojects.component.html',
styleUrls: ['./addprojects.component.css']
})
export class AddprojectsComponent implements OnInit {
addForm: any;
projectCategories: any[] | undefined;
imageUrl = null;
photo?: Blob;
public countries: any = countries
selectedFile: any;
constructor(
private formbuilder: FormBuilder,
private router: Router,
private projectservice: ApiService,
private toastr: ToastrService
) {
this.addForm = this.formbuilder.group({
// project_id: ['', [Validators.required, Validators.min(1), Validators.pattern("^[0-9]+$")]],
title: ['', [Validators.required, Validators.maxLength(255), Validators.pattern("^[a-zA-Z]+$")]],
description: ['', [Validators.required, Validators.maxLength(255), Validators.pattern("^[a-zA-Z]+$")]],
start_date: ['', [Validators.required]],
end_date: ['', [Validators.required]],
code_cat: ['', [Validators.required, Validators.min(1), Validators.pattern("^[0-9]+$")]],
project_country: ['', [Validators.required,]],
project_holder: ['', Validators.required],
image_url: ['', Validators.required]
},
{ validator: this.endDateValidator }
)
}
endDateValidator(group: AbstractControl): ValidationErrors | null {
const startDate = group.get('start_date')?.value;
const endDate = group.get('end_date')?.value;
if (startDate && endDate && startDate > endDate) {
return { endDateInvalid: true };
}
return null;
}
setPhoto(event: any) {
if (event.target.files && event.target.files.length > 0) {
this.photo = event.target.files[0];
}
}
onSubmit() {
if (this.addForm.valid && this.photo) {
const formData = new FormData();
formData.append('image_url', this.photo);
console.log(formData)
this.projectservice.createProjects(this.addForm.value).subscribe({
next: (data: any) => {
this.toastr.success('Project created successfully', 'Success');
setTimeout(() => {
this.router.navigate(['/view']);
}, 1500);
},
error: (error: any) => {
console.log(error);
this.toastr.error('Project ID exists already', 'Error');
}
});
}
else {
this.toastr.error('Please Fill the form correctly ', 'Error');
}
}
get id() {
return this.addForm.get('project_id')
}
ngOnInit() {
this.projectservice.getCategory().subscribe(
(result: any) => {
this.projectCategories = result.data;
console.log(this.projectCategories);
},
error => {
// Handle error
}
);
}
}
and this is my service
createProjects(project: FormData) {
let headers = new HttpHeaders({
'Content-Type': 'application/json'
});
// let data = JSON.stringify(project);
// console.log(project)
console.log(project)
return this.http.post(this.baseUrl + 'addproject.php', project, { headers });
}
im just now trying to get the image in the formdata and it gives me null everytime in the console.log
