Spring Boot FileUpload Ajax Example

By | 2018-08-04T17:45:08+05:30 April 30th, 2017|Spring Boot|

In this tutorials, we are going to see how to work with Spring Boot Fileupload using Jquery Ajax.

Spring Boot FileUpload :

We can upload all types of files like text, pdf, img and videos in spring using MultipartFile interface. The MultipartFile is a representation of an uploaded file received in a multipart request.

Technologies Used :

  • Spring Boot 1.3.5.RELEASE
  • Maven 3
  • Java 8

Project Structure :

Spring Boot FileUpload

Dependencies for Spring Boot FileUpload :


<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"     xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>org.springframework.samples.service.service</groupId>
    <artifactId>SpringBoot_FileUpload</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>
    <properties>
        <!-- Generic properties -->
        <java.version>1.8</java.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    </properties>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.3.5.RELEASE</version>
        <relativePath /> <!-- lookup parent from repository -->
    </parent>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

Application.properties

This file represents the global configurations for the application. Here I have mentioned my local path to save the uploaded document and given the maximum file size as 3Mb in fact it is a default file size.


onlinetutorialspoint.file.paths = /home/chandrashekhar/Desktop/Upload
multipart.maxFileSize = 3Mb

Create Form :

This form represents the details about the user. It expecting the name, city and upload document. Since this example is Spring boot Fileupload with AJAX, we have used the AJAX from JQuery.

Recommended : JQuery Tutorials


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spring Boot FileUpload Examle</title>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2F%2Fcode.jquery.com%2Fjquery-1.11.2.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%C2%A0%C2%A0%20%C2%A0%24(document).ready(function()%20%7B%0A%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%24(%22%23submit%22).on(%22click%22%2C%20uploadFile)%3B%0A%C2%A0%C2%A0%20%C2%A0%7D)%3B%0A%C2%A0%C2%A0%20%C2%A0function%20uploadFile()%20%7B%0A%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%24.ajax(%7B%0A%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0url%20%3A%20%22%2FuploadFile%22%2C%0A%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0type%20%3A%20%22POST%22%2C%0A%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0data%20%3A%20new%20FormData(%24(%22%23detailsForm%22)%5B0%5D)%2C%0A%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0enctype%20%3A%20'multipart%2Fform-data'%2C%0A%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0processData%20%3A%20false%2C%0A%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0contentType%20%3A%20false%2C%0A%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0cache%20%3A%20false%2C%0A%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0success%20%3A%20function()%20%7B%0A%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%24(%22%23msg%22).css(%22color%22%2C%22green%22)%0A%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%24(%22%23msg%22).text(%22Details%20Saved%20Successfully%22)%3B%0A%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%7D%2C%0A%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0error%20%3A%20function()%20%7B%0A%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%24(%22%23msg%22).css(%22color%22%2C%22red%22)%0A%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%24(%22%23msg%22).text(%0A%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%22Error%20while%20Upload%20your%20details%22)%3B%0A%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%7D%0A%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%7D)%3B%0A%C2%A0%C2%A0%20%C2%A0%7D%20%2F%2F%20function%20uploadFile%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

</head>
<body>
    
<form id="detailsForm">
        
<table>
        
<tr>
                
<td colspan="2">
<h2>Enter your Details Here </h2>
</td>

            </tr>

            
<tr>
                
<td>Name</td>

                
<td><input type="text" name="name" /></td>

            </tr>

            
<tr>
                
<td>City</td>

                
<td><input type="text" name="city" /></td>

            </tr>

            
<tr>
                
<td>Upload Document</td>

                
<td><input id="uploadFile" type="file" name="uploadfile" accept="*"/></td>

            </tr>

            
<tr>
                
<td colspan="2"></td>

            </tr>

            
<tr>
                
<td colspan="2"><input id="submit" type="button" value="submit your details"    ></td>

            </tr>

        </table>

 
        <span id="msg"></span>
    </form>

</body>
</html>

Define Spring Controller :

DetailsController.java

It is a typical Spring controller, as we discussed in the Basic Spring MVC Login Form Example. It has a method t0 handling the File upload functionality.


package com.onlinetutorialspoint.controller;

import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.nio.file.Paths;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.env.Environment;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

@Controller
public class DetailsController {
  
  @Autowired
  private Environment env;
  
  @RequestMapping("/")
  public String index() {
    return "index.jsp";
  }
  
  @RequestMapping(value = "/uploadFile", method = RequestMethod.POST)
  @ResponseBody
  public ResponseEntity<?> uploadFile(
      @RequestParam("uploadfile") MultipartFile uploadfile) {
    
    try {
      String file = uploadfile.getOriginalFilename();
      String directory = env.getProperty("onlinetutorialspoint.file.paths");
      String filepath = Paths.get(directory, file).toString();
      
      BufferedOutputStream stream =
          new BufferedOutputStream(new FileOutputStream(new File(filepath)));
      stream.write(uploadfile.getBytes());
      stream.close();
    }
    catch (Exception e) {
      System.out.println(e.getMessage());
      return new ResponseEntity<>(HttpStatus.BAD_REQUEST);
    }
    
    return new ResponseEntity<>(HttpStatus.OK);
  } 

}

Run it :

Application.java

It is a typical spring boot start up class as we have discussed the Simple Spring Boot Example.


package com.onlinetutorialspoint;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Application {

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

}

Output :

You can access the application by accessing the url (After running the application in your local):  http://localhost:8080/

Spring Boot FileUpload Output

By clicking the submit your details button. If every thing went well you can see the below success screen and you can find your uploaded file at given path (specified in application.properties).

Spring Boot FileUpload Success

Happy Learning 🙂

About the Author:

Hi Folks, you have reach this so far, that shows you like what you are learning. Then why don't you support us to improve for bettor tutorials by leaving your valuable comments and why not you keep in touch with us for latest updates on your favorite blog @ facebook , twitter , Or Google+ ,

Leave A Comment