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:

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

@Bean
public GridFsTemplate gridFsTemplate() throws Exception {
    return new GridFsTemplate(mongoDbFactory(), mappingMongoConverter());
}

Then exploring a Get RestAPI:

 
@Autowired
GridFsOperations gridOperations;

@GetMapping(value = "/api/image")
public ResponseEntity getImage(@RequestParam("name") String imageName) throws IOException {
	// get file from MongoDB
	GridFSDBFile imageFile = gridOperations.findOne(new Query(Criteria.where("filename").is(imageName)));
		
	return ResponseEntity
			.ok()
			.contentType(MediaType.valueOf(imageFile.getContentType()))
			.body(new InputStreamResource(imageFile.getInputStream()));
}

>>> 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:

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

2.2 Result

Build and run the SpringBoot project, result:

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:

	org.springframework.boot
	spring-boot-starter-data-mongodb


	org.springframework.boot
	spring-boot-starter-thymeleaf


	org.springframework.boot
	spring-boot-starter-web

2. Configure MongoDB GridFsTemplate

Open application.properties file, add mongoDB configuration:

jsa.mongo.address=127.0.0.1
jsa.mongo.database=jsa_db

Create MongoGridFsTemplate:

package com.javasampleapproach.mongodb.config;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.data.mongodb.config.AbstractMongoConfiguration;
import org.springframework.data.mongodb.gridfs.GridFsTemplate;
 
import com.mongodb.Mongo;
import com.mongodb.MongoClient;
 
@Configuration
public class MongoGridFsTemplate  extends AbstractMongoConfiguration{
	
	@Value("${jsa.mongo.address}")
	private String mongoAddress; 
	
	@Value("${jsa.mongo.database}")
	private String mongoDatabase;
	
	@Bean
	public GridFsTemplate gridFsTemplate() throws Exception {
	    return new GridFsTemplate(mongoDbFactory(), mappingMongoConverter());
	}
	
	@Override
	protected String getDatabaseName() {
		return mongoDatabase;
	}
 
	@Override
	public Mongo mongo() throws Exception {
		return new MongoClient(mongoAddress);
	}
}

3. Create Web Controller

package com.javasampleapproach.mongodb.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
 
@Controller
public class WebController {
	@GetMapping(value="/")
    public String homepage(){
        return "index";
    }
}

4. Create RestAPI

package com.javasampleapproach.mongodb.controller;

import java.io.IOException;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.io.InputStreamResource;
import org.springframework.data.mongodb.core.query.Criteria;
import org.springframework.data.mongodb.core.query.Query;
import org.springframework.data.mongodb.gridfs.GridFsOperations;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import com.mongodb.gridfs.GridFSDBFile;
 
@RestController
public class RestControllerAPIs {
 
	@Autowired
	GridFsOperations gridOperations;
 
	@GetMapping(value = "/api/image")
    public ResponseEntity getImage(@RequestParam("name") String imageName) throws IOException {
		// get file from MongoDB
		GridFSDBFile imageFile = gridOperations.findOne(new Query(Criteria.where("filename").is(imageName)));
			
        return ResponseEntity
                .ok()
                .contentType(MediaType.valueOf(imageFile.getContentType()))
                .body(new InputStreamResource(imageFile.getInputStream()));
    }
}

5. Create index.html

 


	  
	  
	  
	  %MINIFYHTML52eacea28c325eef66af1d54ee0c074616%%MINIFYHTML52eacea28c325eef66af1d54ee0c074617%%MINIFYHTML52eacea28c325eef66af1d54ee0c074618%

 
1. Bootstrap Image - SpringBoot RestAPI - MongoDB

	

		
	        
	        

	          
JSA-About Image
	        
	    
	
	

  		Rounded Corners
  		Circle
  		Thumbnail
	

2. Bootstrap Image Gallery

  

    

      
        
        

          
JSA-About img-rounded
        
      
    
  
  

    

      
        
        

          
JSA-About img-circle
        
      
    
  
  

    

      
        
        

          
JSA-About img-thumbnail
        
      
    
  
%MINIFYHTML52eacea28c325eef66af1d54ee0c074619%

6. Create Jquery to manipulate image

$( document ).ready(function() {
	$("#roundedCornersBtn").on( "click", function() {
		  $("#jsaAboutImageId").removeClass().addClass('img-rounded img-responsive');
	});
	
	$("#circleBtn").on( "click", function() {
		  $("#jsaAboutImageId").removeClass().addClass('img-circle img-responsive');
	});
	
	$("#thumbnailBtn").on( "click", function() {
		  $("#jsaAboutImageId").removeClass().addClass('img-thumbnail img-responsive');
	});
})

IV. Sourcecode

SpringMongoDbBootstrapImage