Upload and Retrieve Files/Images Using Spring Boot, Angular, and MySQL

This article demonstrates how you can select an image using the Angular 8 UI, send it to the Spring backend, and retrieve it later from MySQL.

Rida Shaikh

Feb. 26, 20 · Tutorial

Likes (6)

Comment

Save

127.2K Views

In this tutorial, we will be selecting an image using Angular 8 UI. This image will then be sent to the Spring Boot backend by making a REST call. Later this image will be stored in a MySQL database. We will also later retrieve the saved image and display it using Angular.

Store Image in MYSQL Using Spring Boot and Angular 8

Retrieve Image From MYSQL using Spring Boot and Angular 8

This tutorial is explained in the below Youtube Video.

Angular Setup

We will be installing npm and Angular CLI 8

Install NodeJS by downloading the installable from Install NodeJS. Install the Angular CLI using the following command. It will get us the latest version of Angular CLI.

     Shell 
   
xxxxxxxxxx
 
npm install -g @angular/cli

Shell

  
         x 
        
npm install -g @angular/cli

We can check the Angular CLI version:

     Shell 
   
          x 
         
ng version

Next, we will create a new Angular project using the Angular CLI as follows:

     Shell 
   
xxxxxxxxxx
 
ng new ImageUpload

To get the Angular CLI project started use the following command. We must go inside the ImageUpload folder and then use it.

     Shell 
   
xxxxxxxxxx
 
ng serve

Go to localhost:4200.

I will be using the Microsoft Visual Studio Code IDE for Angular to import the project we developed earlier in Microsoft Visual Studio Code IDE.

Our final Angular project will be as follows:

For this project, I will be making use of Bootstrap CSS. So in the index.html, add the URL for the bootstrap CSS.

     CSS 
   
xxxxxxxxxx
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ImageUpload</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
 integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Angular Component to Send and Retrieve Image Using MySQL

We will be not be creating any new components and instead modify the existing app components.

Modify the app.component.html. Add the File Selector section and also a section to show the retrieved image:

     Java 
   
          x 
         
<div class="container row">
    <div class="col-md-12">
        <h1>Upload Image</h1>
    </div>
</div>
<div class="container row">
    <div class="col-md-6">
        <input type="file" (change)="onFileChanged($event)">
    </div>
    <div class="col-md-6">
        <input type="button" (click)="onUpload()" value="upload">
    </div>
</div>
<hr />
<div class="container row">
    <div class="col-md-12">
        <div *ngIf=message>{{message}}</div>
    </div>
</div>
<div class="container row">
    <div class="col-md-6">
        <input type="text" class="form-control" id="name" placeholder="image name" [(ngModel)]="imageName"
            name="name" />
    </div>
    <div class="col-md-6">
        <input type="button" (click)="getImage()" value="Get Image">
    </div>
</div>
<div class="container row">
    <div class="col-md-12">
        <div *ngIf=retrievedImage>
            <img [src]="retrievedImage">
        </div>
    </div>
</div>

Next, modify the app component typescript file.

     Java 
   
 
  
    
 
      
 
     
 
      
 
     
 
     
 
    
xxxxxxxxxx
 
          
 
         
 
          
 
         

              
          
import { HttpClient, HttpEventType } from '@angular/common/http';
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(private httpClient: HttpClient) { }
  selectedFile: File;
  retrievedImage: any;
  base64Data: any;
  retrieveResonse: any;
  message: string;
  imageName: any;
  //Gets called when the user selects an image
  public onFileChanged(event) {
    //Select File
    this.selectedFile = event.target.files[0];
  }
  //Gets called when the user clicks on submit to upload the image
  onUpload() {
    console.log(this.selectedFile);
    //FormData API provides methods and properties to allow us easily prepare form data to be sent with POST HTTP requests.
    const uploadImageData = new FormData();
    uploadImageData.append('imageFile', this.selectedFile, this.selectedFile.name);
    //Make a call to the Spring Boot Application to save the image
    this.httpClient.post('http://localhost:8080/image/upload', uploadImageData, { observe: 'response' })
      .subscribe((response) => {
        if (response.status === 200) {
          this.message = 'Image uploaded successfully';
        } else {
          this.message = 'Image not uploaded successfully';
        }
      }
      );
  }
    //Gets called when the user clicks on retieve image button to get the image from back end
    getImage() {
    //Make a call to Sprinf Boot to get the Image Bytes.
    this.httpClient.get('http://localhost:8080/image/get/' + this.imageName)
      .subscribe(
        res => {
          this.retrieveResonse = res;
          this.base64Data = this.retrieveResonse.picByte;
          this.retrievedImage = 'data:image/jpeg;base64,' + this.base64Data;
        }
      );
  }
}
 
      
 
     

Modify app.module.ts to include the required modules i.e HttpClientModule and FormsModule-

     Java 
   
xxxxxxxxxx
 
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Spring Boot Module To Save and Retrieve Images Using MySQL

The Maven project will be as follows:

The pom.xml will contain the Spring web and data dependencies.

     XML 
   
 
  
    
 
      
 
     
 
      
 
     
 
     
 
    
xxxxxxxxxx
 
          
 
         
 
          
 
         

              
          
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.javainuse</groupId>
    <artifactId>boot-image-upload</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>
    <name>boot-jdbc</name>
    <description>Demo project for Spring Boot</description>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.1.RELEASE</version>
        <relativePath /> <!-- lookup parent from repository -->
    </parent>
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
           <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>
 
      
 
     

Create a model class named ImageModel :

     Java 
   
 
  
    
 
      
 
     
 
      
 
     
 
     
 
    
xxxxxxxxxx
 
          
 
         
 
          
 
         

              
          
package com.javainuse.model;
import javax.persistence.*;
@Entity
@Table(name = "image_table")
public class ImageModel {
  public ImageModel() {
        super();
    }
   public ImageModel(String name, String type, byte[] picByte) {
        this.name = name;
        this.type = type;
        this.picByte = picByte;
    }
    @Id
    @Column(name = "id")
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    @Column(name = "name")
    private String name;
    @Column(name = "type")
    private String type;
    //image bytes can have large lengths so we specify a value
    //which is more than the default length for picByte column
    @Column(name = "picByte", length = 1000)
    private byte[] picByte;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getType() {
        return type;
    }
   public void setType(String type) {
        this.type = type;
    }
    public byte[] getPicByte() {
        return picByte;
    }
    public void setPicByte(byte[] picByte) {
       this.picByte = picByte;
    }
}
 
      
 
     

Create the JPARepository for storing and retrieving images:

     Java 
   
x
 
package com.javainuse.db;
import java.util.Optional;
import org.springframework.data.jpa.repository.JpaRepository;
import com.javainuse.model.ImageModel;
public interface ImageRepository extends JpaRepository<ImageModel, Long> {
    Optional<ImageModel> findByName(String name);
}

Create the controller class:

Expose a POST API for receiving the Multipart file and storing the bytes for the same in MySQL using the JPA repository. Multipart originates from MIME, an Internet standard that extends the format of emails. It is what browsers use to upload files through HTML forms.
Expose a GET API for retrieving the image bytes from MySQL using the JPA repository and returning it.
As the image bytes are large, we make use of the compression and decompression algorithms.

     Java 
   
 
  
    
 
      
 
     
 
      
 
     
 
     
 
    
xxxxxxxxxx
 
          
 
         
 
          
 
         

              
          
package com.javainuse.controller;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.Optional;
import java.util.zip.DataFormatException;
import java.util.zip.Deflater;
import java.util.zip.Inflater;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.http.ResponseEntity.BodyBuilder;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import com.javainuse.db.ImageRepository;
import com.javainuse.model.ImageModel;
@RestController
@CrossOrigin(origins = "http://localhost:4200")
@RequestMapping(path = "image")
public class ImageUploadController {
  @Autowired
    ImageRepository imageRepository;
    @PostMapping("/upload")
    public BodyBuilder uplaodImage(@RequestParam("imageFile") MultipartFile file) throws IOException {
        System.out.println("Original Image Byte Size - " + file.getBytes().length);
        ImageModel img = new ImageModel(file.getOriginalFilename(), file.getContentType(),
                compressBytes(file.getBytes()));
        imageRepository.save(img);
        return ResponseEntity.status(HttpStatus.OK);
    }
    @GetMapping(path = { "/get/{imageName}" })
    public ImageModel getImage(@PathVariable("imageName") String imageName) throws IOException {
        final Optional<ImageModel> retrievedImage = imageRepository.findByName(imageName);
        ImageModel img = new ImageModel(retrievedImage.get().getName(), retrievedImage.get().getType(),
                decompressBytes(retrievedImage.get().getPicByte()));
        return img;
    }
    // compress the image bytes before storing it in the database
    public static byte[] compressBytes(byte[] data) {
        Deflater deflater = new Deflater();
        deflater.setInput(data);
        deflater.finish();
        ByteArrayOutputStream outputStream = new ByteArrayOutputStream(data.length);
        byte[] buffer = new byte[1024];
        while (!deflater.finished()) {
            int count = deflater.deflate(buffer);
            outputStream.write(buffer, 0, count);
        }
        try {
            outputStream.close();
        } catch (IOException e) {
        }
        System.out.println("Compressed Image Byte Size - " + outputStream.toByteArray().length);
        return outputStream.toByteArray();
    }
    // uncompress the image bytes before returning it to the angular application
    public static byte[] decompressBytes(byte[] data) {
        Inflater inflater = new Inflater();
        inflater.setInput(data);
        ByteArrayOutputStream outputStream = new ByteArrayOutputStream(data.length);
        byte[] buffer = new byte[1024];
        try {
            while (!inflater.finished()) {
                int count = inflater.inflate(buffer);
                outputStream.write(buffer, 0, count);
            }
            outputStream.close();
        } catch (IOException ioe) {
        } catch (DataFormatException e) {
        }
        return outputStream.toByteArray();
    }
}
 
      
 
     

Create the application.properties file where we specify the database properties:

     Java 
   
xxxxxxxxxx
 
spring.datasource.url=jdbc:mysql://localhost/bootdb?createDatabaseIfNotExist=true&autoReconnect=true&useSSL=false
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.platform=mysql
spring.datasource.initialization-mode=always
spring.jpa.hibernate.ddl-auto=update

Finally, create the bootstrap class using SpringBoot annotation:

     Java 
   
x
 
package com.javainuse;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class ImageUploadApplication {
  public static void main(String[] args) {
        SpringApplication.run(ImageUploadApplication.class, args);
    }
}

Start the Spring Boot Application

Go to localhost:4200, select the image to be uploaded and click on upload button. If the image is uploaded successfully, then we will display the message that the image has been uploaded successfully. In the Spring Boot console, we can see the size of the image received. Also in MySQL, we can see the image saved as bytes in the tabled named image_model. For retrieving the image, enter the name of the image to be retrieved and click on the Get Image button.

Upload and Retrieve Files/Images Using Spring Boot, Angular, and MySQL

This article demonstrates how you can select an image using the Angular 8 UI, send it to the Spring backend, and retrieve it later from MySQL.

Store Image in MYSQL Using Spring Boot and Angular 8

Retrieve Image From MYSQL using Spring Boot and Angular 8

Angular Setup

Angular Component to Send and Retrieve Image Using MySQL

Spring Boot Module To Save and Retrieve Images Using MySQL

Start the Spring Boot Application

Further Reading

Partner Resources

Related

Trending

Upload and Retrieve Files/Images Using Spring Boot, Angular, and MySQL

This article demonstrates how you can select an image using the Angular 8 UI, send it to the Spring backend, and retrieve it later from MySQL.

Store Image in MYSQL Using Spring Boot and Angular 8

Retrieve Image From MYSQL using Spring Boot and Angular 8

Angular Setup

Angular Component to Send and Retrieve Image Using MySQL

Spring Boot Module To Save and Retrieve Images Using MySQL

Start the Spring Boot Application

Further Reading

Related

Partner Resources