59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
import { Component, EventEmitter, Output } from '@angular/core';
|
|
import { FormsModule } from '@angular/forms';
|
|
import axios from 'axios';
|
|
import { PhotoFormModel } from './photo';
|
|
|
|
@Component({
|
|
selector: 'upload-image-form',
|
|
imports: [FormsModule],
|
|
templateUrl: './upload-image-form.html',
|
|
styleUrl: './upload-image-form.scss',
|
|
})
|
|
export class UploadImageForm {
|
|
@Output() close = new EventEmitter<void>();
|
|
|
|
photo = new PhotoFormModel();
|
|
|
|
selectedFile: File | null = null;
|
|
|
|
cancelUpload() {
|
|
this.close.emit();
|
|
}
|
|
|
|
uploadImage() {
|
|
if (this.selectedFile) {
|
|
const formData = new FormData();
|
|
formData.append('image', this.selectedFile);
|
|
formData.append('title', this.photo.imageTitle);
|
|
formData.append('description', this.photo.imageDescription);
|
|
formData.append('tags', this.photo.imageTags);
|
|
formData.append('people', this.photo.imagePeople);
|
|
// Here you would typically send the formData to your backend API
|
|
|
|
axios
|
|
.post('https://localhost:7273/api/photo', formData, {
|
|
headers: {},
|
|
validateStatus: (status) => status == 201,
|
|
})
|
|
.then((response) => {
|
|
console.log('Upload successful:', response.data);
|
|
})
|
|
.catch((error) => {
|
|
console.error('Upload failed:', error);
|
|
});
|
|
|
|
this.close.emit();
|
|
}
|
|
}
|
|
|
|
thumbnailUrl: string | null = null;
|
|
onImageSelected(event: Event): void {
|
|
const input = event.target as HTMLInputElement;
|
|
if (input.files && input.files.length > 0) {
|
|
this.selectedFile = input.files[0];
|
|
console.log('Selected image:', this.selectedFile);
|
|
this.thumbnailUrl = URL.createObjectURL(this.selectedFile);
|
|
}
|
|
}
|
|
}
|