File Upload Spring MVC - Maven - JQuery - JavaScript - Ajax

Description

It is very simple to write a program for File Upload Spring MVC JQuery and Ajax call. In this tutorial we will follow all required steps like POM.xml dependency entry, Bean entry in application context, Multipart file entry in controller, JSP with JQuery and Ajax call.

File Upload Spring MVC

In this video tutorial, We will focus main points of File Upload Spring MVC step by step. Before getting started you must be familiar of previous post SPRING MVC CONFIGURATION WITH HIBERNATE, because it contains all basic information for starting spring mvc project for beginners.

Dependency entry for file upload spring mvc in POM.xml.
New Bean entry for file upload spring mvc in application context.
A new file upload controller.
A new JSP file for file upload through JQuery and Ajax call.

1. Dependency entry for file upload spring mvc in POM.xml

There are two dependencies required specially for file upload spring mvc, commons-fileupload dependency also dependent on commons-io dependency that mean you must put commons-io with commons-fileupload

Filename: POM.xml

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.2</version>
</dependency>

<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.4</version>
</dependency>

2. New Bean entry for file upload spring mvc in application context.

It is required a Multi part Resolver bean in application context file.

Filename:applicationContext.xml

<bean id="multipartResolver"  class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />

3. A new file upload controller.

This file contains all logic for getting jsp file page and upload file method logic

Filename: FileuploadController.java

package com.controllers;

import java.io.FileOutputStream;
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.servlet.ModelAndView;

@Controller
@RequestMapping("/fileuploadController")
public class FileuploadController {
	@Autowired
	ServletContext context;
	
	@RequestMapping(value="/", method = RequestMethod.GET)
	public ModelAndView getPage(){
		ModelAndView view =new ModelAndView("fileUpload");
		return view;
	}
	
	@RequestMapping(value="/fileUpload", method = RequestMethod.POST)
	public @ResponseBody Map<String,Object> fileUpload(MultipartHttpServletRequest request, HttpServletResponse response){
		Map<String,Object> map = new HashMap<String,Object>();
		List<String> fileUploadedList = new ArrayList<String>();
		Iterator<String> itr =  request.getFileNames();
		MultipartFile mpf = null;
		
		while(itr.hasNext()){
			mpf = request.getFile(itr.next()); 
			try{
//				FileCopyUtils.copy(mpf.getBytes(), new FileOutputStream(context.getRealPath("/resources")+"/"+mpf.getOriginalFilename().replace(" ", "-")));
				FileCopyUtils.copy(mpf.getBytes(), new FileOutputStream("D:"+"/"+mpf.getOriginalFilename().replace(" ", "-")));
				fileUploadedList.add(mpf.getOriginalFilename().replace(" ", "-"));
			}catch(IOException e){
				e.printStackTrace();
			}
		}
		
		map.put("Status", 200);
		map.put("SucessfulList", fileUploadedList);
		return map;
	}
	
}

4. A new JSP file for file upload through JQuery and Ajax call.

A JSP file where HTML and JavaScript code for uploading file to the File Upload Controller

Filename: fileUpload.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>File Upload</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>

	<h1> File Upload </h1>
			<form id='fileUpload' onsubmit="return false;">
				File <input type='file' id='file' multiple="multiple">
				<button onclick="uplaod();">Upload</button>
			</form>
			
	<script type="text/javascript">
	
	uplaod = function(){
		
		var data = new FormData();
		jQuery.each(jQuery('#file')[0].files, function(i, file) {
		    data.append('file-'+i, file);
		});
		
		$.ajax({
			url:'fileUpload',
			data: data,
		    cache: false,
		    contentType: false,
		    processData: false,
			type:'POST',
			success: function(response){
				if(response.Status == 200){
					alert(response.SucessfulList);
				}else{
					alert('Error');
				}
			
					
			}				
		});
		
	}
	</script>
</body>
</html>

Latest Tutorials

English Sindhi Grammar