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.
Join the DZone community and get the full member experience.Join For Free
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.
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.
We can check the Angular CLI version:
Next, we will create a new Angular project using the Angular CLI as follows:
To get the Angular CLI project started use the following command. We must go inside the ImageUpload folder and then use it.
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.
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:
Next, modify the app component typescript file.
Modify app.module.ts to include the required modules i.e HttpClientModule and FormsModule-
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.
Create a model class named
Create the JPARepository for storing and retrieving images:
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.
Create the application.properties file where we specify the database properties:
Finally, create the bootstrap class using SpringBoot annotation:
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.
Opinions expressed by DZone contributors are their own.