add example for file uploading

This commit is contained in:
Anton Romanov 2018-10-01 13:54:11 +04:00
parent a9f4e51558
commit dd5ab38c40
6 changed files with 182 additions and 4 deletions

View File

@ -3,7 +3,12 @@ package ru.ulstu.file;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import ru.ulstu.configuration.Constants;
import ru.ulstu.core.model.response.Response;
@ -13,7 +18,6 @@ import ru.ulstu.file.service.FileService;
import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;
import java.nio.charset.StandardCharsets;
import static java.nio.charset.StandardCharsets.UTF_8;
import static ru.ulstu.paper.controller.PaperController.URL;
@ -47,7 +51,7 @@ public class FileController {
}
@PostMapping("/uploadTmpFile")
public Response<String> upload(@RequestBody MultipartFile multipartFile) throws IOException {
public Response<String> upload(@RequestParam("file") MultipartFile multipartFile) throws IOException {
return new Response(fileService.uploadToTmpDir(multipartFile));
}
}

View File

@ -1,6 +1,8 @@
// from config.js
/* global urlVersions */
var urlFileUpload = "https://localhost:8443/api/1.0/papers/uploadTmpFile";
/* exported MessageTypesEnum */
var MessageTypesEnum = {
INFO: "info",

View File

@ -0,0 +1,130 @@
// form core.js
/* global isEmpty, errorHandler, showFeedbackMessage, MessageTypesEnum */
/* exported FileLoader */
function FileLoader(args) {
var MAX_FILE_SIZE_MB = 20;
var SIZE_TO_MB = 1048576;
var CHOOSE_FILE_TEXT = "Выберите файл";
var ALERT_CHOOSE_FILE = "Необходимо выбрать файл";
var ALERT_UNKNOWN_FILE_EXT = "Неизвестный тип файлов";
var ALERT_MAX_FILE = "Файл превышает разрешенный размер";
var ALERT_EMPTY_FILE = "Файл пуст";
var ERROR = "Ошибка загрузки файла";
if (isEmpty(args)) {
throw "Empty arguments";
}
var divId = args.div;
if (isEmpty(divId)) {
throw "Div id parameter is not set";
}
var url = args.url;
if (isEmpty(url)) {
throw "URL parameter is not set";
}
var callback = args.callback;
var maxFileSize = args.maxSize;
MAX_FILE_SIZE_MB = Math.min((isEmpty(maxFileSize) ? MAX_FILE_SIZE_MB : maxFileSize), MAX_FILE_SIZE_MB);
var fileExtensions = args.extensions;
fileExtensions = isEmpty(fileExtensions) ? [] : fileExtensions;
var div = $("#" + divId).addClass("input-group");
if (isEmpty(div)) {
throw "Div with id " + divId + " is not found";
}
var fileLabel = $("<input>")
.attr("type", "text")
.attr("placeholder", CHOOSE_FILE_TEXT)
.attr("disabled", true)
.addClass("form-control");
div.append(fileLabel);
var fileInput = $("<input>")
.attr("type", "file")
.hide();
fileInput.change(function () {
var files = $(this).prop("files");
if (isEmpty(files)) {
return;
}
fileLabel.val(files[0].name);
});
div.append(fileInput);
var buttonGroup = $("<div>")
.addClass("input-group-btn");
div.append(buttonGroup);
var chooseButton = $("<button>")
.attr("type", "button")
.addClass("btn btn-default")
.append($("<i>").addClass("fa fa-ellipsis-h"));
chooseButton.click(function () {
fileInput.click();
});
buttonGroup.append(chooseButton);
var uploadButton = $("<button>")
.attr("type", "button")
.addClass("btn btn-default")
.append($("<i>").addClass("fa fa-upload"));
uploadButton.click(function () {
var files = fileInput.prop("files");
if (isEmpty(files)) {
showFeedbackMessage(ALERT_CHOOSE_FILE, MessageTypesEnum.DANGER);
return;
}
var currentFile = files[0];
if (!isEmpty(fileExtensions) && fileExtensions.indexOf(getFileExt(currentFile)) === -1) {
showFeedbackMessage(ALERT_UNKNOWN_FILE_EXT, MessageTypesEnum.DANGER);
return;
}
if (currentFile.size === 0) {
showFeedbackMessage(ALERT_EMPTY_FILE, MessageTypesEnum.DANGER);
return;
}
if (currentFile.size / SIZE_TO_MB > MAX_FILE_SIZE_MB) {
showFeedbackMessage(ALERT_MAX_FILE + " " + MAX_FILE_SIZE_MB + "Mb", MessageTypesEnum.DANGER);
return;
}
upload(currentFile);
});
buttonGroup.append(uploadButton);
var progressDiv = $("<div>")
.addClass("progress margined-top-10");
progressDiv.insertAfter(div);
var progressBar = $("<div>")
.addClass("progress-bar")
.attr("role", "progressbar")
.css("width", "0%");
progressDiv.append(progressBar);
function getFileExt(file) {
return file.name.slice((Math.max(0, file.name.lastIndexOf(".")) || Infinity) + 1);
}
function upload(file) {
progressBar.css("width", "0%");
var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function (event) {
var curProgress = Math.floor(event.loaded / event.total * 100) + "%";
progressBar
.css("width", curProgress)
.text(curProgress);
};
xhr.onload = xhr.onerror = function () {
if (this.status === 200) {
errorHandler(JSON.parse(this.responseText), callback);
} else {
showFeedbackMessage(ERROR, MessageTypesEnum.DANGER);
console.error("error " + this.status);
}
};
xhr.open("POST", url, true);
var formData = new FormData();
formData.append("file", file);
xhr.send(formData);
}
}

View File

@ -85,6 +85,7 @@
<!-- Custom scripts for this template -->
<script src="/js/agency.js"></script>
<script src="/js/core.js"></script>
</body>
</html>

View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="default">
<head>
</head>
<body>
<div class="container" layout:fragment="content">
<section id="load">
<div class="container">
<div class="row" id="paper-list">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Статьи</h2>
<div id="loader">
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="/js/file-loader.js"></script>
<script>
/*<![CDATA[*/
$(document).ready(function () {
new FileLoader({
div: "loader",
url: urlFileUpload,
maxSize: 1.5,
extensions: ["xls", "jpg", "pdf", "txt", "png"],
callback: function (response) {
showFeedbackMessage("Файл успешно загружен");
console.debug(response);
}
});
});
/*]]>*/
</script>
</div>
</body>
</html>

View File

@ -19,7 +19,6 @@
</div>
</section>
<script src="/js/core.js"></script>
<script src="/js/papers.js"></script>
<script>
$( document ).ready(function() {