From dd5ab38c4035f935e0804ee63f1264ba43dd36b0 Mon Sep 17 00:00:00 2001 From: Anton Romanov Date: Mon, 1 Oct 2018 13:54:11 +0400 Subject: [PATCH] add example for file uploading --- .../java/ru/ulstu/file/FileController.java | 10 +- src/main/resources/public/js/core.js | 2 + src/main/resources/public/js/file-loader.js | 130 ++++++++++++++++++ src/main/resources/templates/default.html | 1 + src/main/resources/templates/load.html | 42 ++++++ .../resources/templates/papers/papers.html | 1 - 6 files changed, 182 insertions(+), 4 deletions(-) create mode 100644 src/main/resources/public/js/file-loader.js create mode 100644 src/main/resources/templates/load.html diff --git a/src/main/java/ru/ulstu/file/FileController.java b/src/main/java/ru/ulstu/file/FileController.java index cb3d91c..c372910 100644 --- a/src/main/java/ru/ulstu/file/FileController.java +++ b/src/main/java/ru/ulstu/file/FileController.java @@ -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 upload(@RequestBody MultipartFile multipartFile) throws IOException { + public Response upload(@RequestParam("file") MultipartFile multipartFile) throws IOException { return new Response(fileService.uploadToTmpDir(multipartFile)); } } diff --git a/src/main/resources/public/js/core.js b/src/main/resources/public/js/core.js index 6755ab7..5022c96 100644 --- a/src/main/resources/public/js/core.js +++ b/src/main/resources/public/js/core.js @@ -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", diff --git a/src/main/resources/public/js/file-loader.js b/src/main/resources/public/js/file-loader.js new file mode 100644 index 0000000..0989012 --- /dev/null +++ b/src/main/resources/public/js/file-loader.js @@ -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 = $("") + .attr("type", "text") + .attr("placeholder", CHOOSE_FILE_TEXT) + .attr("disabled", true) + .addClass("form-control"); + div.append(fileLabel); + var fileInput = $("") + .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 = $("
") + .addClass("input-group-btn"); + div.append(buttonGroup); + + var chooseButton = $("