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.

Contents

I. Technologies
II. Goal
- - 1. BootStrap Image & MongoDB GridFsTemplate
  - 2. Run & Check result
    - 2.1 Add files to MongoDB
    - 2.2 Result
III. Practice
IV. Sourcecode

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:

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

@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<InputStreamResource> 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()));
}

@Autowired

GridFsOperations gridOperations;

@GetMapping(value = "/api/image")

public ResponseEntity<InputStreamResource> 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:

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:

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-data-mongodb</artifactId>
</dependency>
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-web</artifactId>
</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-data-mongodb</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-web</artifactId>

</dependency>

2. Configure MongoDB GridFsTemplate

Open application.properties file, add mongoDB configuration:

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

1 2	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);
	}
}

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";
    }
}

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<InputStreamResource> 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()));
    }
}

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

<!DOCTYPE HTML>
 
<html>
<head>
	  <title>Bootstrap Image - SpringBoot RestAPI- MongoDb</title>
	  <meta charset="utf-8" />
	  <meta name="viewport" content="width=device-width, initial-scale=1" />
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	  <script src="/js/jquery.js"></script>
</head>
<body class="container">
 
<h1 style="text-decoration: underline; color:#283E84">1. Bootstrap Image - SpringBoot RestAPI - MongoDB</h1>
<div>
	<div id="loadImageBootstrapStyleDiv">
		<a href="/api/image?name=jsa_about">
	        <img src="/api/image?name=jsa_about" id="jsaAboutImageId" class="img-rounded img-responsive" alt="JSA-About Image" />
	        <div class="caption">
	          <p>JSA-About Image</p>
	        </div>
	    </a>
	</div>
	<div class="btn-group">
  		<button id="roundedCornersBtn" type="button" class="btn btn-primary">Rounded Corners</button>
  		<button id="circleBtn" type="button" class="btn btn-primary">Circle</button>
  		<button id="thumbnailBtn" type="button" class="btn btn-primary">Thumbnail</button>
	</div>
</div>
<h1 style="text-decoration: underline; color:#283E84">2. Bootstrap Image Gallery</h1>
<div class="row">
  <div class="col-md-4">
    <div class="thumbnail">
      <a href="/api/image?name=jsa_about">
        <img src="/api/image?name=jsa_about" class="img-rounded" alt="JSA-About img-rounded" style="width:100%" />
        <div class="caption">
          <p>JSA-About img-rounded</p>
        </div>
      </a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail">
      <a href="/api/image?name=jsa_about">
        <img src="/api/image?name=jsa_about" class="img-circle" alt="JSA-About img-circle" style="width:100%" />
        <div class="caption">
          <p>JSA-About img-circle</p>
        </div>
      </a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail">
      <a href="/api/image?name=jsa_about">
        <img src="/api/image?name=jsa_about" class="img-thumbnail" alt="JSA-About img-thumbnail" style="width:100%" />
        <div class="caption">
          <p>JSA-About img-thumbnail</p>
        </div>
      </a>
    </div>
  </div>
</div>
 
</body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<title>Bootstrap Image - SpringBoot RestAPI- MongoDb</title>

</head>

<h1 style="text-decoration: underline; color:#283E84">1. Bootstrap Image - SpringBoot RestAPI - MongoDB</h1>

<div>

<p>JSA-About Image</p>

</div>

</a>

</div>

<button id="roundedCornersBtn" type="button" class="btn btn-primary">Rounded Corners</button>

<button id="circleBtn" type="button" class="btn btn-primary">Circle</button>

<button id="thumbnailBtn" type="button" class="btn btn-primary">Thumbnail</button>

</div>

<h1 style="text-decoration: underline; color:#283E84">2. Bootstrap Image Gallery</h1>

<p>JSA-About img-rounded</p>

</div>

</a>

</div>

<p>JSA-About img-circle</p>

</div>

</a>

</div>

<p>JSA-About img-thumbnail</p>

</div>

</a>

</div>

</body>

</html>

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');
	});
})

$( 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

By grokonez | November 25, 2017.

Bootstrap Image + MongoDB GridFsTemplate + SpringBoot RestAPI

I. Technologies

II. Goal

1. BootStrap Image & MongoDB GridFsTemplate

2. Run & Check result

2.1 Add files to MongoDB

2.2 Result

III. Practice

1. Create SpringBoot project

2. Configure MongoDB GridFsTemplate

3. Create Web Controller

4. Create RestAPI

5. Create index.html

6. Create Jquery to manipulate image

IV. Sourcecode

Post Tags

Got Something To Say: Cancel reply

I. Technologies

II. Goal

1. BootStrap Image & MongoDB GridFsTemplate

2. Run & Check result

2.1 Add files to MongoDB

2.2 Result

III. Practice

1. Create SpringBoot project

2. Configure MongoDB GridFsTemplate

3. Create Web Controller

4. Create RestAPI

5. Create index.html

6. Create Jquery to manipulate image

IV. Sourcecode

Related Posts

Post Tags

Got Something To Say: Cancel reply