1

I want to save image inside mysql database. How I can do that using php and angular??

Im using add-style.component.ts to upload image

imageUploadEvent(event){
    let imageFile = event.target;
    if(imageFile.files.length > 0){
      console.log(imageFile.files[0]);
      let formData = new FormData();
      formData.append('file',imageFile.files[0]);
      this._databaseService.insertImageData(formData).subscribe((msg) => {
        console.log(msg);
      },(error) =>{
        console.log("Get Some Error");
        console.log(error);
      });
    }
  }

I use add-style.html as following

<div class="container">
  <div class="row">
    <div class="col s8 offset-2">
      <div class="card-panel teal lighten-2">
        <h4>Image Uploading</h4>
      </div>
      <form #imageform ="ngForm">
        <input type="file" class="form-file-control" (change)="imageUploadEvent($event)"> 
        <button type="submit" class="btn-lg btn-submit form-control" (click)="saveFormData()" >submit</button>
      </form>
    </div>
  </div>
</div>

I use database.service.ts to call php 

insertImageData(value){
    return this._http.get("http://localhost/jeleena-api/test-img.php",value).pipe(map(res => {
      console.log(res);
    }));
  }

Following is my php code

<?php

//Create Database Connection
include "db-connection.php";
if(!empty($_FILES['file'])){
    $ext = pathinfo($_FILES['file']['name'],PATHINFO_EXTENSION);
    $image = time().'.'.$ext;
    if(move_uploaded_file($_FILES["file"]["tmp_name"],$image)){
        $sql = "INSERT INTO test(img) VALUES('".$image."')";
        $conn->query($sql);
        echo "successfully uploaded";
    }
    else{
        echo ' error ';
    }

    }
?>
shehan96
  • 328
  • 1
  • 3
  • 20

1 Answers1

0

Ok bear with me. You can use ngStyle for this. https://angular.io/api/common/NgStyle You need to install the commonsmodule in your ngModule.

Now in your template you can do the following to show the image:

<div [ngStyle]="background-image: url('./assets/images/youImage.jpg');">

Now you are able to show your image based on a url. So what you can do is instead of saving the image to the sql just simple save the ./assets/images/youImage.jpg.

<div [ngStyle]="background-image: url(yourObject.image)>

And to show the image, you can make an object give it a property image and assign the string from the sql.

Swoox
  • 3,707
  • 2
  • 21
  • 32
  • how to save image in a folder EX -> ./assets/images/youImage.jpg – shehan96 Dec 14 '18 at 08:07
  • You can just add the image to your assets of your angular project. like `C:/angularProject/src/assets/icons` or images. – Swoox Dec 14 '18 at 08:08
  • How to upload image to folder? I mean i want to browse the image from front end and save it in the folder – shehan96 Dec 14 '18 at 08:10
  • You not upload it the cli of angular will include it in your project when you at it in that folder. For example if you use `ng serve`. it will add the file to `http://localhost:4200/assets/images/yourImage.jpg`. Same if you build it will be include where you host it. `https://yourHost.com/assets/images/yourImage.jpg` – Swoox Dec 14 '18 at 08:13
  • When i click the upload button i want to put image inside of the assets folder. how can i do that?? – shehan96 Dec 14 '18 at 08:20
  • Ok ignore my answer this is impossible if you upload a image to Angular. If you want to upload a image to sql this seems to be impossible to. You can maybe use the blob functionality but if the images is to big it will be to slow. read more on: https://stackoverflow.com/questions/5613898/storing-images-in-sql-server you also maybe want to read https://stackoverflow.com/questions/47936183/angular-file-upload – Swoox Dec 14 '18 at 08:28