añade proto back

front/src/app/upload-image-form/upload-image-form.ts

@@ -0,0 +1,58 @@
+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);
+		}
+	}
+}