Spring Hibernate JPA @Lob – Upload/Download MultipartFile to PostgreSQL – SpringBoot + JQuery Ajax + Bootstrap 4 Example

In the tutorial, we will show you how to create a SpringBoot project to download/upload MultipartFile to PostgreSQL using Spring Hibernate JPA, JQuery Ajax, Bootstrap 4.

Related posts:
Spring Hibernate JPA – Upload/Download File/Image to PostgreSQL with @Lob

Technologies

  • Java 8
  • Maven 3.6.1
  • Spring Tool Suite: Version 3.9.4.RELEASE
  • Spring Boot: 2.0.2.RELEASE
  • JQuery Ajax
  • Bootstrap 4

Goal

We create a SpringBoot project as below:

SpringJPA-Upload-Download-MultipartFile-to-PostgreSQL-using-JQuery-Ajax-Bootstrap4-project-structure

-> Upload/Download Form:

SpringJPA-Upload-Download-MultipartFile-to-PostgreSQL-using-JQuery-Ajax-Bootstrap4-download-files

-> PostgreSQL’s records:

SpringJPA-Upload-Download-MultipartFile-to-PostgreSQL-using-JQuery-Ajax-Bootstrap4-records

Practice

We create a SpringBoot project with below dependencies:

  • spring-boot-starter-thymeleaf
  • spring-boot-starter-web
  • spring-boot-starter-data-jpa
  • postgresql

-> Details:


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


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


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



	org.postgresql
	postgresql
	runtime

FrontEnd
Upload Multipart-Form



    Upload MultipartFile
    
    
	%MINIFYHTML7227deb67f10e181cc547e1ef4a03f5e16%%MINIFYHTML7227deb67f10e181cc547e1ef4a03f5e17%%MINIFYHTML7227deb67f10e181cc547e1ef4a03f5e18%%MINIFYHTML7227deb67f10e181cc547e1ef4a03f5e19%%MINIFYHTML7227deb67f10e181cc547e1ef4a03f5e20%
 

	

Upload MultipartFile to PostgreSQL


%MINIFYHTML7227deb67f10e181cc547e1ef4a03f5e21%
Ajax Post/Get MultipartFile

– JQuery Ajax to Post MultipartFile is implemented in \src\main\resources\static\js\postrequest.js file:

$(document).ready( () => {
    $("#btnSubmit").click((event) => {
        //stop submit the form, we will post it manually.
        event.preventDefault();
        doAjax();
    });
 
});
 
function doAjax() {
 
    // Get form
    var form = $('#fileUploadForm')[0];
    var data = new FormData(form);
 
    $.ajax({
        type: "POST",
        enctype: 'multipart/form-data',
        url: "/api/file/upload",
        data: data,
        processData: false, //prevent jQuery from automatically transforming the data into a query string
        contentType: false,
        cache: false,
        success: (data) => {
            $("#listFiles").text(data);
        },
        error: (e) => {
            $("#listFiles").text(e.responseText);
        }
    });
}

– JQuery Ajax to Retrieve/Download MultipartFile is implemented in \src\main\resources\static\js\getrequest.js file:

$( document ).ready( () => {
	
	var url = window.location;
	
	// GET REQUEST
	$("#btnGetFiles").click( (event) => {
		event.preventDefault();
		ajaxGet();
	});
	
	// DO GET
	function ajaxGet(){
		$.ajax({
			type : "GET",
			dataType: "json",	
			url : "/api/file/all",
			success: (data) => {
				//clear old data
				$("#listFiles").html("");
				
				/*
					render list of files
				*/
				$("#listFiles").append('
    '); $.each(data, (index, file) => { $("#listFiles").append('
  • ' + file.name + '
  • '); }); $("#listFiles").append('
'); }, error : (err) => { $("#listFiles").html(err.responseText); } }); } })
BackEnd
Data Model

– Create a View with @JsonView in View.java file:

package com.javasampleapproach.multipartfile.model;

public class View {
	public interface FileInfo {}
}

– Create FileModel.java file:

package com.javasampleapproach.multipartfile.model;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Lob;
import javax.persistence.Table;

import com.fasterxml.jackson.annotation.JsonView;

@Entity
@Table(name="file_model")
public class FileModel {
	@Id
	@GeneratedValue(strategy = GenerationType.AUTO)
    @Column(name = "id")
	@JsonView(View.FileInfo.class)
    private Long id;
	
    @Column(name = "name")
    @JsonView(View.FileInfo.class)
	private String name;
    
    @Column(name = "mimetype")
	private String mimetype;
	
	@Lob
    @Column(name="pic")
    private byte[] pic;
	
	public FileModel(){}
	
	public FileModel(String name, String mimetype, byte[] pic){
		this.name = name;
		this.mimetype = mimetype;
		this.pic = pic;
	}
	
	public Long getId(){
		return this.id;
	}
	
	public void setId(Long id){
		this.id = id;
	}
	
	public String getName(){
		return this.name;
	}
	
	public void setName(String name){
		this.name = name;
	}
	
	public String getMimetype(){
		return this.mimetype;
	}
	
	public void setMimetype(String mimetype){
		this.mimetype = mimetype;
	}
	
	public byte[] getPic(){
		return this.pic;
	}
	
	public void setPic(byte[] pic){
		this.pic = pic;
	}
}
JPA Repository

Implement JPA repository in FileRepository file:

package com.javasampleapproach.multipartfile.repository;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.transaction.annotation.Transactional;

import com.javasampleapproach.multipartfile.model.FileModel;

@Transactional
public interface FileRepository extends JpaRepository{	
	public FileModel findByName(String name);
}

– Configure @EnableTransactionManagement in main class SpringBootUploadMultipartFile2PostgreSqlApplication:

package com.javasampleapproach.multipartfile;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.transaction.annotation.EnableTransactionManagement;

@SpringBootApplication
@EnableTransactionManagement
public class SpringBootUploadMultipartFile2PostgreSqlApplication {

	public static void main(String[] args) {
		SpringApplication.run(SpringBootUploadMultipartFile2PostgreSqlApplication.class, args);
	}
}

Index Controller

Create IndexController.java file to serve uploadfile.html form:

package com.javasampleapproach.multipartfile.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
 
@Controller
public class IndexController {
    @GetMapping("/")
    public String index() {
        return "uploadfile";
    }
}

Upload/Download RestAPIs

– Implement upload-file RestAPI in UploadFileController.java file:

package com.javasampleapproach.multipartfile.controller.rest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import com.javasampleapproach.multipartfile.model.FileModel;
import com.javasampleapproach.multipartfile.repository.FileRepository;
 
@RestController
public class UploadFileController {
	
	@Autowired
	FileRepository fileRepository;
 
    /*
     * MultipartFile Upload
     */
    @PostMapping("/api/file/upload")
    public String uploadMultipartFile(@RequestParam("uploadfile") MultipartFile file) {
    	try {
    		// save file to PostgreSQL
	    	FileModel filemode = new FileModel(file.getOriginalFilename(), file.getContentType(), file.getBytes());
	    	fileRepository.save(filemode);
	    	return "File uploaded successfully! -> filename = " + file.getOriginalFilename();
		} catch (	Exception e) {
			return "FAIL! Maybe You had uploaded the file before or the file's size > 500KB";
		}    
    }
}

– Implement download/retrieve files RestAPI
s in DownloadFileController.java file:

package com.javasampleapproach.multipartfile.controller.rest;

import java.util.List;
import java.util.Optional;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpHeaders;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;

import com.fasterxml.jackson.annotation.JsonView;
import com.javasampleapproach.multipartfile.model.FileModel;
import com.javasampleapproach.multipartfile.model.View;
import com.javasampleapproach.multipartfile.repository.FileRepository;
 
@RestController
public class DownloadFileController {
	
	@Autowired
	FileRepository fileRepository;

	/*
	 * List All Files
	 */
    @JsonView(View.FileInfo.class)
	@GetMapping("/api/file/all")
	public List getListFiles() {
		return fileRepository.findAll();
	}
	
    /*
     * Download Files
     */
	@GetMapping("/api/file/{id}")
	public ResponseEntity getFile(@PathVariable Long id) {
		Optional fileOptional = fileRepository.findById(id);
		
		if(fileOptional.isPresent()) {
			FileModel file = fileOptional.get();
			return ResponseEntity.ok()
					.header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + file.getName() + "\"")
					.body(file.getPic());	
		}
		
		return ResponseEntity.status(404).body(null);
	}
}

PostgreSQL Connection

– Add setting in application.properties file:

spring.datasource.url=jdbc:postgresql://localhost/test
spring.datasource.username=postgres
spring.datasource.password=123
spring.jpa.generate-ddl=true
spring.jpa.properties.hibernate.temp.use_jdbc_metadata_defaults=false
spring.jpa.hibernate.ddl-auto=create-drop
Run & Check Results

Run the SpringBoot project, then makes upload/download requests ->

Upload Files

SpringJPA-Upload-Download-MultipartFile-to-PostgreSQL-using-JQuery-Ajax-Bootstrap4-upload-file-successfully

-> Browser Network logs:

SpringJPA-Upload-Download-MultipartFile-to-PostgreSQL-using-JQuery-Ajax-Bootstrap4-upload-file

-> PostgreSQL records:

SpringJPA-Upload-Download-MultipartFile-to-PostgreSQL-using-JQuery-Ajax-Bootstrap4-records

Retrieve Files

SpringJPA-Upload-Download-MultipartFile-to-PostgreSQL-using-JQuery-Ajax-Bootstrap4-get-all-files-views

-> Browser Network logs:

SpringJPA-Upload-Download-MultipartFile-to-PostgreSQL-using-JQuery-Ajax-Bootstrap4-get-all-files

Download Files

SpringJPA-Upload-Download-MultipartFile-to-PostgreSQL-using-JQuery-Ajax-Bootstrap4-download-files

-> Browser Network logs:

SpringJPA-Upload-Download-MultipartFile-to-PostgreSQL-using-JQuery-Ajax-Bootstrap4-download-files-network-logs

SourceCode

SpringBootUploadMultipartFile2PostgreSQL



By grokonez | May 30, 2018.


Related Posts


1 thought on “Spring Hibernate JPA @Lob – Upload/Download MultipartFile to PostgreSQL – SpringBoot + JQuery Ajax + Bootstrap 4 Example”

Got Something To Say:

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

*