How to create simple REST API using Spring Boot

Spring Boot is widely used Java framework which helps configuration etc.. so developers can focus more on Business Logic rather than configuring. Using Spring Boot Lets create simple project which we can :

1. Upload image
2. Display Image

And we gonna do this functionalities using REST(Representational state transfer) API.I will use Spring Tool Suite you can use your favorite IDE .

Step 1

First Lets create Spring Boot Project:

Here we gonna select Spring Starter Project.

Here you can change Artifact, Description, Package Java Version, Packaging, Name.
Next Step we will be adding dependencies. In this project, we necessarily don’t need a database connection but we need Spring Web and Spring Boot DevTools.

Then finish and wait Spring Tool Suite to download Dependencies for you.

Step 2

Now lets discuss general picture:

There is a lot of components here so lets start from beginning.

1. User send request to web-site
2. Dispatcher Servlet search for proper controller
3. Controller search for proper method (We will send POST request with JavaScript)
4. Then it finds that our uploadImage method is responsible for this

Step 3 (Coding part :)

In Controller which name is ImageController we will have 2 methods

1. uploadImage(ImageUploadDTO)
2. getImages

First uploadImage method will take DTO(Data Transfer Object) as a parameter.ImageUploadDTO will have 3 fields:

1. MultipartFile image
2. About
3. University

Using DTO Object we will call Service class for image uploading after uploading we will return ResponseEntity<String>

Here you can see at @POSTMapping we declare path /uploadImage its simply link for the uploadImage method.The second method returns all Image names. But here most important is how we will store images to our local computer for this we have ImageService class

@Service annotation is a specialization of @Component annotation. Spring Service annotation can be applied only to classes. It is used to mark the class as a service provider. In here saveImage method takes MultipartFile then using File.copy() we add this image to specified location. And at getImageLocation, we just get a list of all files then add it to the list and return it so simple.

But at uploadImage method we have DTO lets explore DTO :

Our DTO have 3 fields About University and most Importantly MultipartFile

So now our back-end is done lets look at front-end

You should give attention here to that we encrypt to multipart/form-date and names of fields are same with names at DTO.And form has specific id “form-id” using it we will send POST and GET Requests lets to look at now our JavaScript:

Okay its general look lets explore first Section where we send GET Request to fetch names of images and then using DOM we create elements and add it to the body

We add a method which is GET then link then parse it to the JSON formate if we don’t javaScript will treat responseText as plain old text then we iterate over this object list and create IMG element and add it to the body.

At Second we send POST request

its simple fetch which we create FormData object and sending our form as a argument then adding it to the body and that is it magic happened.

Result

Its not most pretty looking UI but..

So here I already submitted JPG and PNG files and when i refreshed page all images displayed

Thank you for reading.

Aiq Abusov