Posted In: File Upload, Java Script, Spring, Spring Boot

Example – Spring Boot file upload AJAX – jQuery File Upload

jQuery File Upload plug in used in this example is available at jQuery File Upload


 

1. Using jQuery File Upload JS

 

<html lang="en">
<head>
<!-- Force latest IE rendering engine or ChromeFrame if installed -->
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<meta charset="utf-8">
<title>jQuery File Upload Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/js/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/js/jQuery-File-Upload-9.16.0/css/style.css">
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/js/jQuery-File-Upload-9.16.0/css/jquery.fileupload.css">
</head>

<body>
	<div class="container">
		<h1>jQuery File Upload Demo</h1>
		<h2 class="lead">Basic version</h2>
		<span class="btn btn-success fileinput-button"> <i
			class="glyphicon glyphicon-plus"></i> <span>Select files...</span> 
			<input id="fileupload" type="file" name="file">
		</span> <br> <br>
		<!-- The global progress bar -->
		<div id="progress" class="progress">
			<div class="progress-bar progress-bar-success"></div>
		</div>
		<!-- The container for the uploaded files -->
		<div id="files" class="files"></div>
		<br>
	</div>
	<script src="<%=request.getContextPath()%>/js/jquery-3.1.1.js"></script>
	<script
		src="<%=request.getContextPath()%>/js/jQuery-File-Upload-9.16.0/js/vendor/jquery.ui.widget.js"></script>
	<script
		src="<%=request.getContextPath()%>/js/jQuery-File-Upload-9.16.0/js/jquery.iframe-transport.js"></script>
	<script
		src="<%=request.getContextPath()%>/js/jQuery-File-Upload-9.16.0/js/jquery.fileupload.js"></script>
	<script
		src="<%=request.getContextPath()%>/js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

	<script>
$(function () {
    'use strict';
    var url = '/upload';
    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo('#files');
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
        }
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>
</body>
</html>

 

2. Spring Boot Upload Controller

	@RequestMapping(value = "/upload",
	        method = { RequestMethod.POST })
	public @ResponseBody Object upload(
	        @RequestParam("file") MultipartFile file,
	        HttpServletRequest request) {
		System.out.println("upload() called");

		if (file.isEmpty()) {
			request.setAttribute("message",
			        "Please select a file to upload");
			return "uploadStatus";
		}

		try {
			byte[] bytes = file.getBytes();
			Path path = Paths.get(UPLOADED_FOLDER
			        + file.getOriginalFilename());
			Files.write(path, bytes);

			request.setAttribute("message",
			        "You have successfully uploaded '"
			                + file.getOriginalFilename() + "'");

		} catch (IOException e) {
			e.printStackTrace();
		}

		return getSuccessMessage().toString();
	}

	private JSONObject getSuccessMessage() {
		JSONObject jsonObject = null;
		try {
			jsonObject = new JSONObject("{\"success\":true}");
		} catch (Exception e) {
			e.printStackTrace();
		}
		return jsonObject;
	}

 

Tags: ,

by , on February 10th, 2017

  • Categories