diff --git a/fileControlPanel/src/api.js b/fileControlPanel/src/api.js
index f0e291c..e12a5c0 100644
--- a/fileControlPanel/src/api.js
+++ b/fileControlPanel/src/api.js
@@ -68,7 +68,7 @@ export default class API {
return this.apiCall("file/getRestrictions");
}
- async upload(file, token = null, parentId = null, onUploadProgress = null) {
+ async upload(file, token = null, parentId = null, cancelToken = null, onUploadProgress = null) {
const csrf_token = this.csrfToken();
const fd = new FormData();
@@ -79,7 +79,8 @@ export default class API {
let response = await axios.post('/api/file/upload', fd, {
headers: { 'Content-Type': 'multipart/form-data' },
- onUploadProgress: onUploadProgress || function () { }
+ onUploadProgress: onUploadProgress || function () { },
+ cancelToken : cancelToken.token
});
return response.data;
diff --git a/fileControlPanel/src/elements/file-browser.css b/fileControlPanel/src/elements/file-browser.css
index cafe008..e9035ac 100644
--- a/fileControlPanel/src/elements/file-browser.css
+++ b/fileControlPanel/src/elements/file-browser.css
@@ -47,6 +47,23 @@
cursor: pointer;
}
+.uploaded-file > .cancel-button {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 15px;
+ bottom: 0;
+ opacity: 0;
+}
+
+.uploaded-file:hover > .file-icon {
+ opacity: 0.5;
+}
+
+.uploaded-file:hover > .cancel-button {
+ opacity: 1.0;
+}
+
.clickable { cursor: pointer; }
.token-revoked td { text-decoration: line-through; }
diff --git a/fileControlPanel/src/elements/file-browser.js b/fileControlPanel/src/elements/file-browser.js
index 0111277..fa7e9ab 100644
--- a/fileControlPanel/src/elements/file-browser.js
+++ b/fileControlPanel/src/elements/file-browser.js
@@ -5,6 +5,7 @@ import Icon from "./icon";
import Alert from "./alert";
import {Popup} from "./popup";
import {useEffect, useState} from "react";
+import axios from "axios";
export function FileBrowser(props) {
@@ -94,7 +95,7 @@ export function FileBrowser(props) {
icon = "file" + (icon ? ("-" + icon) : icon);
}
- return