Lanka Developers Community

    Lanka Developers

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Shop

    Upload Images and save them in a database( Angular 8 + Spring boot + Mysql )

    Web Development
    angular spring boot mysql frontend backend
    4
    4
    4581
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Udith Indrakantha
      Udith Indrakantha Web Development last edited by

      0_1563374901877_27c7393e-d31b-4342-8009-59ef72023d9b-image.png
      This article is all about uploading an image through your angular project , sending it into the backend and saving it in a database.
      Not only that, the way how to query the database and viewing back the image in the frontend is also explained here.
      [As this article is written for explaining the simple mechanism of uploading an image, web page decorations are not done, only the relevant parts are designed for explanation.]

      • The frontend used is Angular 8.

      • The backend use is Spring boot

      • The database used is Mysql

      Please note that,

      Some basic knowledge about angular ,spring boot and mysql is essential.( because the way of project creating in those frameworks is not discussed as it makes this article lengthier.)
      As IDEs , VS code is used for Angular and IntelliJ IDE is used for Spring boot.

      1.0 Frontend
      First , create an angular project . ( See how )
      We need HttpClientModule for dealing with the backend. So, We
      have to import that module to the project.
      Go to src/app/app.module.ts

      • Add the following code lines in app.module.ts file as in the image
        below.

           import { HttpClientModule } from '@angular/common/http';
        

      0_1563374947508_320b5d8c-f59e-4d12-b1d4-18d2d7bb9b9d-image.png

        and, declare the module in imports array.
      
      • Go to app.component.html file and add the following code.
      <h3>Image Uploading Module</h3>
      <div>
      <input type="file" (change)="onFileChanged($event)">
      <img [src]="imgURL" height="200" *ngIf="imgURL">
      </div>
      
      <!-- upload image  -->
      
      <input type="button" (click)="onUpload()" value="upload">
      <hr />
      Received Image:
      {{ receivedImageData['pic'] | json}}
      
      <img [src]="convertedImage" >
      

      The view will be like this.
      0_1563375202159_049eedae-2833-41e0-b55a-421b67d2bf75-image.png
      In this code,
      (change)="onFileChanged($event)
      is used to listen to any file choosing event and trigger the onFileChange(event) method in .ts file.

      imgURL, convertedImage are properties in the .ts file.

      *Go to src/app/app.component.html file and write the following code snippets in it.

      0_1563375278047_63d39039-4011-4fea-98fe-769a81d45a41-image.png

      Import HttpClient class from '@angular/common/http' .
      And, inject it via the constructor of the class as in the image.

      0_1563375341351_b2712168-0322-4548-90ed-d459b6ec6a9f-image.png

      Write and complete your app.component.ts file as shown in the images.

      As the backend is running on local port 8080, posting url is also given as preferred.
      We send the image to the backend as a FormData,so that the backend can retrieve it as a multipart file.
      By,subscribing to the post method ,we have retrieved the returned image data by the backend and assigned them to the properties which are used to render in the view.

      ***You may find the code snippets here.

      app.component.ts
      app.component.html
      app.module.ts


      2.0 Spring Boot Backend

      Now,let's move to the backend part.

      0_1563375391917_bd2de260-f0c5-4914-8086-d35b77528bdf-image.png

      First , create a maven project through Spring Initializer website.

      1. Give a group name to the project
      2. Give a artifact nae to the project
        3.Add three dependencies given[Spring Web Starter, Spring Data JPA, MySQL Driver, Lombok]
      3. Genereate the project and download the zipped file of the project.

      Extract the zipped file .
      Open your IDE(Here,IntelliJ IDE is used).
      Open the extracted project by selecting the pom.xml file, through the IDE.

      This is the file structure in the project I created.

      A controller class as TestController.java [Get code]
      A model class as ImageModel.java [Get Code]
      A repository interface as ImageRepository.java [Get code]

      **ImageModel.java
      0_1563375444427_a91f492b-61be-4146-bab0-58f0bf51ba3b-image.png

      **ImageRepository.java
      0_1563375454867_09610e67-bedb-4ac4-bee1-9daf22d8dfec-image.png

      **TestController.java
      0_1563375462787_5e491490-c47c-4a19-b873-7c4f34ea88ab-image.png

      Here , in the controller file, image is captured in MulipartFile format . From the frontend, the image data is sent as a form data by appending the data to the request parameter named "myFile" .

      *You can read about MultipartFile interface here.

      *You need to edit the application.properties file , to connect to the mysql database according to your PC settings. (Read how)


      Enjoy!

      1 Reply Last reply Reply Quote 3
      • dev_lak
        dev_lak last edited by

        good post thanks

        1 Reply Last reply Reply Quote 1
        • Nubelle
          Nubelle Web Development last edited by

          wow amazing

          1 Reply Last reply Reply Quote 1
          • root
            root Linux Help last edited by

            superb bro

            1 Reply Last reply Reply Quote 0
            • 1 / 1
            • First post
              Last post

            2
            Online

            3.6k
            Users

            1.3k
            Topics

            5.3k
            Posts

            • Privacy
            • Terms & Conditions
            • Donate

            © Copyrights and All right reserved Lanka Developers Community

            Powered by Axis Technologies (PVT) Ltd

            Made with in Sri Lanka

            | |