Upload and show image in Angular

Question

I hope somebody can help me on this: For a private project I am using Angular 13 with php and mysql as the database. Now I was already able to make them all communicate with each other, which means I can upload recipe information to the database. How I fail when it comes to uploading a picture of the recipe. I know that there are 2 ways to do that: Upload the image in the database as a BLOB file or to just save the path of the image. I would prefer to 2nd way. I am able to display the image when the path is saved in the database but I cannot save it there (by letting the user select the image) and not me pasting it in manually.

I posted my code here as requested. Hope this helps. My question is still how to save the path of an image that the user selects into the database. Thanks for any adivse/help.

recipe-new.component.html









            


            

    
        Allgemeine Angaben


            

            
                Name
            
            


            
                Kurzbeschreibung
            
            


            
                Zubereitungsdauer
            
            


            
                Schwierigkeitsgrad
                
            


            
                Kategorie
                
             


             
                Rating
                
             



           
                Image
            
            


            
    

    
    
        

    
        Zubereitungsschritte und Zutaten


        
            
                
                    
  
                    Schritt 1

                
                
            
            
                
                    

                    Schritt 2

                
                
            
            
                
                    

                    Schritt 3

                
                


            
        
    
        
         

        
           
            
            
                

                Zutaten

Rezept-neu.component.html

import { Component } from '@angular/core';
import { RezepteService } from '../rezepte.service';
import { RezepteSammlung } from '../rezepte-sammlung';

@Component({
  selector: 'app-rezept-neu',
  templateUrl: './rezept-neu.component.html',
  styleUrls: ['./rezept-neu.component.css']
})
export class RezeptNeuComponent {

  rezeptesammlung = new RezepteSammlung('', '', '', '', '', '', '', '', '', '', '', '', '');

  constructor(private Rezept: RezepteService) { }

  onSubmit() {
   this.Rezept.make(this.rezeptesammlung).subscribe(rezepte => console.log('Erfolgreich gepspeichert', rezepte));

  }

}

recipe.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { RezepteSammlung } from './rezepte-sammlung';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class RezepteService {
  //REST-API
  private api1 = 'http://localhost/kochen/angular1.php';
  private api2 = 'http://localhost/kochen/angular2.php';

  constructor(private http: HttpClient) { }

  //get-Methode, damit werden die Daten vom Server ausgelesen
  loadRezepte(): Observable {
    return this.http.get(this.api1);
  }
  //Damit sendet man die Daten zum Server.
  make(rezepte: RezepteSammlung) {
    console.log(rezepte);
    return this.http.post(this.api2, rezepte);
  }

}

php

connect_error) {
    echo "Fehler bei der Verbindung: " . mysqli_connect_error();
    exit();
    }

if (!$con->set_charset("utf8")){
echo "Fehler bei utf8" . $con->error;
}

$essen = [];
$sql = "SELECT * FROM rezepte";
$result = mysqli_query($con, $sql);
$nr = 0; //damit er weiterzählt
while($row = mysqli_fetch_assoc($result))

{
    $essen[$nr]['rezeptid'] = $row['rezeptid'];
    $essen[$nr]['name'] = $row['name'];
    $essen[$nr]['textkurz'] = $row['textkurz'];
    $essen[$nr]['dauer'] = $row['dauer'];
    $essen[$nr]['schwierigkeitsgrad'] = $row['schwierigkeitsgrad'];
    $essen[$nr]['speicherung'] = $row['speicherung'];
    $essen[$nr]['category'] = $row['category'];
    $essen[$nr]['zubereitung_1'] = $row['zubereitung_1'];
    $essen[$nr]['zubereitung_2'] = $row['zubereitung_2'];
    $essen[$nr]['zubereitung_3'] = $row['zubereitung_3'];
    $essen[$nr]['rating'] = $row['rating'];
    $essen[$nr]['zutaten'] = $row['zutaten'];
    $essen[$nr]['image'] = $row['image'];
    $nr++;
}


echo json_encode($essen);
?>

Here is the api2 - php file:

name));
$textkurz = mysqli_real_escape_string($connect, ($request->textkurz));
$dauer = mysqli_real_escape_string($connect, ($request->dauer));
$schwierigkeitsgrad = mysqli_real_escape_string($connect, ($request->schwierigkeitsgrad));
$category = mysqli_real_escape_string($connect, ($request->category));
$zubereitung_1 = mysqli_real_escape_string($connect, ($request->zubereitung_1));
$zubereitung_2 = mysqli_real_escape_string($connect, ($request->zubereitung_2));
$zubereitung_3 = mysqli_real_escape_string($connect, ($request->zubereitung_3));
$rating = mysqli_real_escape_string($connect, ($request->rating));
$zutaten = mysqli_real_escape_string($connect, ($request->zutaten));
$image = mysqli_real_escape_string($connect, ($request->image));

$sql = "INSERT INTO rezepte (name, textkurz, dauer, schwierigkeitsgrad, category, zubereitung_1, zubereitung_2, zubereitung_3, rating, zutaten, image)
VALUES ('{$name}', '{$textkurz}', '{$dauer}', '{$schwierigkeitsgrad}', '{$category}', '{$zubereitung_1}', '{$zubereitung_2}', '{$zubereitung_3}', '{$rating}', '{$zutaten}', '{$image}');";

mysqli_query($connect, $sql);

?>

user_12513926 · Answer

If it's just for a local experiment then you could try store the images in the assets folder of your angular project and then reference them in your component. In that way you can still select them in your frontend, however this will not allow you to add images after you have deployed your app on a server. Then the only way is to upload images and store them (either in a database or blob storage or server folder where you have access)

Upload and show image in Angular

1 Answers