From dd5ab38c4035f935e0804ee63f1264ba43dd36b0 Mon Sep 17 00:00:00 2001
From: Anton Romanov <romanov73@gmail.com>
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<String> upload(@RequestBody MultipartFile multipartFile) throws IOException {
+    public Response<String> 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 = $("<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);
+    }
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/default.html b/src/main/resources/templates/default.html
index 6983ef0..7a36a83 100644
--- a/src/main/resources/templates/default.html
+++ b/src/main/resources/templates/default.html
@@ -85,6 +85,7 @@
 
 <!-- Custom scripts for this template -->
 <script src="/js/agency.js"></script>
+<script src="/js/core.js"></script>
 
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/load.html b/src/main/resources/templates/load.html
new file mode 100644
index 0000000..70c6314
--- /dev/null
+++ b/src/main/resources/templates/load.html
@@ -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>
\ No newline at end of file
diff --git a/src/main/resources/templates/papers/papers.html b/src/main/resources/templates/papers/papers.html
index 5a77e98..a7eeda2 100644
--- a/src/main/resources/templates/papers/papers.html
+++ b/src/main/resources/templates/papers/papers.html
@@ -19,7 +19,6 @@
         </div>
     </section>
 
-    <script src="/js/core.js"></script>
     <script src="/js/papers.js"></script>
     <script>
         $( document ).ready(function() {