Bootstrap Image + MongoDB GridFsTemplate + SpringBoot RestAPI

In the tutorial, JavaSampleApproach will show you how to show images on web from MongoDB by Bootstrap Image + MongoDB GridFsTemplate + SpringBoot RestAPI.

Related posts:
SpringData MongoDB GridFsTemplate to save, retrieve, delete binary files (Image, Text files)
Bootstrap Image with SpringBoot RestAPI
Bootstrap Carousel with SpringBoot RestAPI
Angular 4 + Spring Boot + MongoDB CRUD example

I. Technologies

– Java 1.8
– Maven 3.6.1
– Spring Tool Suite – Version 3.9.0.RELEASE
– Spring Boot – 1.5.7.RELEASE
– MongoDB: version v3.4.9
– Bootstrap
– Jquery

II. Goal

1. BootStrap Image & MongoDB GridFsTemplate

In the tutorial, We create a Spring Boot project to show image from MongoDB on web with below structure:

Bootstrap Image + MongoDB GridFS Image + SpringBoot RestAPI - project structure

– For working with MongoDB files (images), We use GridFsTemplate bean:

Then exploring a Get RestAPI:

>>> Refer at: SpringData MongoDB GridFsTemplate to save, retrieve, delete binary files (Image, Text files)

To display image on web, We use Bootstrap Image.

>>> Refer at: Bootstrap Image with SpringBoot RestAPI

2. Run & Check result
2.1 Add files to MongoDB

– Start MongoDB server by commandline: .\mongodb\bin>mongod.exe
– Add image to MongoDB by using mongofiles.exe:

Bootstrap Image + MongoDB GridFS Image + SpringBoot RestAPI - add file to mongodb

– Run MongoDB shell by commandline: .\mongodb\3.4\bin>mongo.exe. Then check adding image:

Bootstrap Image + MongoDB GridFS Image + SpringBoot RestAPI - explore adding file

2.2 Result

Build and run the SpringBoot project, result:

Bootstrap Image + MongoDB GridFS Image + SpringBoot RestAPI - log from request

Bootstrap Image + MongoDB GridFS Image + SpringBoot RestAPI - results on view

III. Practice

Step to do:
– Create SpringBoot project
– Configure MongoDB GridFsTemplate
– Create Web Controller
– Create RestAPI
– Create index.html
– Create Jquery to manipulate image

1. Create SpringBoot project

Using Spring Tool Suite to create a Spring Starter Project with needed dependencies:

2. Configure MongoDB GridFsTemplate

Open application.properties file, add mongoDB configuration:

Create MongoGridFsTemplate:

3. Create Web Controller

4. Create RestAPI

5. Create index.html

6. Create Jquery to manipulate image

IV. Sourcecode

SpringMongoDbBootstrapImage

By grokonez | November 25, 2017.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*