fetch => axios, some nice upload ux
This commit is contained in:
parent
fb91b9e879
commit
5a169488af
@ -469,8 +469,10 @@ namespace Api\File {
|
||||
return $this->success;
|
||||
}
|
||||
|
||||
$fileKeys = array_keys($_FILES);
|
||||
$numFilesUploaded = count($fileKeys);
|
||||
$numFilesUploaded = array_sum(array_map(function($fileEntry) {
|
||||
return is_array($fileEntry["name"]) ? count($fileEntry["name"]) : 1;
|
||||
}, $_FILES
|
||||
));
|
||||
|
||||
if (!is_null($token)) {
|
||||
|
||||
@ -511,30 +513,43 @@ namespace Api\File {
|
||||
}
|
||||
|
||||
$count = $res[0]["count"];
|
||||
if ($maxFiles > 0 && $numFilesUploaded > 0 && $numFilesUploaded + $count > $maxFiles) {
|
||||
return $this->createError("File limit exceeded. Currently uploaded $count / $maxFiles files");
|
||||
}
|
||||
|
||||
if ($maxSize > 0 || !empty($extensions)) {
|
||||
foreach ($_FILES as $file) {
|
||||
$name = $file["name"];
|
||||
if ($maxSize > 0 && $file["size"] > $maxSize) {
|
||||
return $this->createError("File Size limit of $maxSize bytes exceeded for file $name");
|
||||
}
|
||||
|
||||
$dotPos = strrpos($name, ".");
|
||||
$ext = ($dotPos !== false ? strtolower(substr($name, $dotPos + 1)) : false);
|
||||
if (!empty($extensions) && $ext !== false && !in_array($ext, $extensions)) {
|
||||
return $this->createError("File '$name' has prohibited extension. Allowed extensions: " . implode(",", $extensions));
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
$userId = $this->user->getId();
|
||||
$maxSize = 0;
|
||||
$count = 0;
|
||||
$maxFiles = 0;
|
||||
$extensions = array();
|
||||
}
|
||||
|
||||
$maxSize = ($maxSize <= 0 ? $this->getMaxFileSizePHP() : min($maxSize, $this->getMaxFileSizePHP()));
|
||||
$maxFiles = ($maxFiles <= 0 ? $this->getMaxFiles() : min($maxFiles, $this->getMaxFiles()));
|
||||
|
||||
if ($numFilesUploaded === 0) {
|
||||
return $this->createError("No file uploaded");
|
||||
} else if($numFilesUploaded > 1) {
|
||||
return $this->createError("You can only upload one file at once");
|
||||
}
|
||||
|
||||
if ($maxFiles > 0 && $count + 1 > $maxFiles) {
|
||||
return $this->createError("File upload limit exceeded. Currently uploaded $count / $maxFiles files");
|
||||
}
|
||||
|
||||
$fileObject = array_shift($_FILES);
|
||||
$fileName = (is_array($fileObject["name"]) ? $fileObject["name"][0] : $fileObject["name"]);
|
||||
$fileSize = (is_array($fileObject["size"]) ? $fileObject["size"][0] : $fileObject["size"]);
|
||||
$tmpPath = (is_array($fileObject["tmp_name"]) ? $fileObject["tmp_name"][0] : $fileObject["tmp_name"]);
|
||||
$fileError = (is_array($fileObject["error"]) ? $fileObject["error"][0] : $fileObject["error"]);
|
||||
|
||||
if ($maxSize > 0 || !empty($extensions)) {
|
||||
if ($maxSize > 0 && $fileSize > $maxSize) {
|
||||
return $this->createError("File Size limit of $maxSize bytes exceeded for file $fileName");
|
||||
}
|
||||
|
||||
$dotPos = strrpos($fileName, ".");
|
||||
$ext = ($dotPos !== false ? strtolower(substr($fileName, $dotPos + 1)) : false);
|
||||
if (!empty($extensions) && $ext !== false && !in_array($ext, $extensions)) {
|
||||
return $this->createError("File '$fileName' has prohibited extension. Allowed extensions: " . implode(",", $extensions));
|
||||
}
|
||||
}
|
||||
|
||||
$uploadDir = realpath($_SERVER["DOCUMENT_ROOT"] . "/files/uploaded/");
|
||||
@ -542,47 +557,40 @@ namespace Api\File {
|
||||
return $this->createError("Upload directory is not writable");
|
||||
}
|
||||
|
||||
$fileIds = array();
|
||||
foreach ($_FILES as $key => $file) {
|
||||
$fileName = $file["name"];
|
||||
$tmpPath = $file["tmp_name"];
|
||||
if (!$tmpPath) {
|
||||
return $this->createError("Error uploading file: $fileName");
|
||||
}
|
||||
if (!$tmpPath) {
|
||||
return $this->createError("Error uploading file: $fileError");
|
||||
}
|
||||
|
||||
$md5Hash = @hash_file('md5', $tmpPath);
|
||||
$sha1Hash = @hash_file('sha1', $tmpPath);
|
||||
$filePath = $uploadDir . "/" . $md5Hash . $sha1Hash;
|
||||
if (move_uploaded_file($tmpPath, $filePath)) {
|
||||
$md5Hash = @hash_file('md5', $tmpPath);
|
||||
$sha1Hash = @hash_file('sha1', $tmpPath);
|
||||
$filePath = $uploadDir . "/" . $md5Hash . $sha1Hash;
|
||||
if (file_exists($filePath) || move_uploaded_file($tmpPath, $filePath)) {
|
||||
$res = $sql->insert("UserFile", array("name", "directory", "path", "user_id", "parent_id"))
|
||||
->addRow($fileName, false, $filePath, $userId, $parentId)
|
||||
->returning("uid")
|
||||
->execute();
|
||||
|
||||
$res = $sql->insert("UserFile", array("name", "directory", "path", "user_id", "parent_id"))
|
||||
->addRow($fileName, false, $filePath, $userId, $parentId)
|
||||
->returning("uid")
|
||||
->execute();
|
||||
|
||||
if ($res === false) {
|
||||
$this->lastError = $sql->getLastError();
|
||||
$this->success = false;
|
||||
return false;
|
||||
} else {
|
||||
$fileIds[] = $sql->getLastInsertId();
|
||||
}
|
||||
if ($res === false) {
|
||||
$this->lastError = $sql->getLastError();
|
||||
$this->success = false;
|
||||
return false;
|
||||
} else {
|
||||
return $this->createError("Could not create file: " . $fileName);
|
||||
$fileId = $sql->getLastInsertId();
|
||||
}
|
||||
} else {
|
||||
return $this->createError("Could not create file: $fileName");
|
||||
}
|
||||
|
||||
if (!is_null($token)) {
|
||||
$query = $sql->insert("UserFileTokenFile", array("file_id", "token_id"));
|
||||
foreach ($fileIds as $fileId) {
|
||||
$query->addRow($fileId, $tokenId);
|
||||
}
|
||||
$res = $sql->insert("UserFileTokenFile", array("file_id", "token_id"))
|
||||
->addRow($fileId, $tokenId)
|
||||
->execute();
|
||||
|
||||
$res = $query->execute();
|
||||
$this->success = ($res !== false);
|
||||
$this->lastError = $sql->getLastError();
|
||||
}
|
||||
|
||||
$this->result["fileId"] = $fileId;
|
||||
return $this->success;
|
||||
}
|
||||
}
|
||||
@ -651,6 +659,7 @@ namespace Api\File {
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: delete permanently from filesystem
|
||||
class Delete extends FileAPI {
|
||||
|
||||
public function __construct(User $user, bool $externalCall = false) {
|
||||
|
||||
17023
fileControlPanel/package-lock.json
generated
17023
fileControlPanel/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -3,6 +3,7 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"axios": "^0.21.1",
|
||||
"moment": "^2.26.0",
|
||||
"react": "^16.13.1",
|
||||
"react-collapse": "^5.0.1",
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import 'babel-polyfill';
|
||||
import axios from "axios";
|
||||
|
||||
export default class API {
|
||||
|
||||
@ -13,24 +14,18 @@ export default class API {
|
||||
|
||||
async apiCall(method, params) {
|
||||
params = params || { };
|
||||
|
||||
const csrf_token = this.csrfToken();
|
||||
if (csrf_token) params.csrf_token = csrf_token;
|
||||
let response = await fetch("/api/" + method, {
|
||||
method: 'post',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify(params)
|
||||
});
|
||||
|
||||
return await response.json();
|
||||
let response = await axios.post("/api/" + method, params);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
async fetchUser() {
|
||||
let response = await fetch("/api/user/info");
|
||||
let data = await response.json();
|
||||
let response = await axios.get("/api/user/info");
|
||||
let data = response.data;
|
||||
this.user = data["user"];
|
||||
this.loggedIn = data["loggedIn"];
|
||||
return data && data.success && data.loggedIn;
|
||||
return data && data["success"] && data["loggedIn"];
|
||||
}
|
||||
|
||||
async logout() {
|
||||
@ -73,24 +68,20 @@ export default class API {
|
||||
return this.apiCall("file/getRestrictions");
|
||||
}
|
||||
|
||||
async upload(files, token = null, parentId = null) {
|
||||
async upload(file, token = null, parentId = null, onUploadProgress = null) {
|
||||
const csrf_token = this.csrfToken();
|
||||
|
||||
const fd = new FormData();
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
fd.append('file' + i, files[i]);
|
||||
}
|
||||
|
||||
fd.append("file", file);
|
||||
if (csrf_token) fd.append("csrf_token", csrf_token);
|
||||
if (token) fd.append("token", token);
|
||||
if (parentId) fd.append("parentId", parentId);
|
||||
|
||||
// send `POST` request
|
||||
let response = await fetch('/api/file/upload', {
|
||||
method: 'POST',
|
||||
body: fd
|
||||
let response = await axios.post('/api/file/upload', fd, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
onUploadProgress: onUploadProgress || function () { }
|
||||
});
|
||||
|
||||
return response.json();
|
||||
return response.data;
|
||||
}
|
||||
};
|
||||
@ -40,8 +40,7 @@
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.uploaded-file > i:nth-child(3) {
|
||||
color: red;
|
||||
.uploaded-file > .status-icon {
|
||||
position: absolute;
|
||||
top: -9px;
|
||||
right: 25px;
|
||||
|
||||
@ -4,62 +4,64 @@ import Dropzone from "react-dropzone";
|
||||
import Icon from "./icon";
|
||||
import Alert from "./alert";
|
||||
import {Popup} from "./popup";
|
||||
import {useState} from "react";
|
||||
import {useEffect, useState} from "react";
|
||||
|
||||
export function FileBrowser(props) {
|
||||
|
||||
let files = props.files || { };
|
||||
let files = props.files || {};
|
||||
let api = props.api;
|
||||
let tokenObj = props.token || { valid: false };
|
||||
let onSelectFile = props.onSelectFile || function() { };
|
||||
let onFetchFiles = props.onFetchFiles || function() { };
|
||||
let directories = props.directories || {};
|
||||
let restrictions = props.restrictions || { maxFiles: 0, maxSize: 0, extensions: "" };
|
||||
let tokenObj = props.token || {valid: false};
|
||||
let onSelectFile = props.onSelectFile || function () { };
|
||||
let onFetchFiles = props.onFetchFiles || function () { };
|
||||
let directories = props.directories || {};
|
||||
let restrictions = props.restrictions || {maxFiles: 0, maxSize: 0, extensions: ""};
|
||||
|
||||
let [popup, setPopup] = useState({ visible: false, directoryName: "", directory: 0, type: "upload" });
|
||||
let [alerts, setAlerts] = useState( []);
|
||||
let [popup, setPopup] = useState({visible: false, directoryName: "", directory: 0, type: "upload"});
|
||||
let [alerts, setAlerts] = useState([]);
|
||||
let [filesToUpload, setFilesToUpload] = useState([]);
|
||||
|
||||
function svgMiddle(scale=1.0) {
|
||||
function svgMiddle(key, scale = 1.0) {
|
||||
let width = 48 * scale;
|
||||
let height = 64 * scale;
|
||||
|
||||
return <svg width={width} height={height} xmlns="http://www.w3.org/2000/svg">
|
||||
return <svg key={key} width={width} height={height} xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<line y2="0" x2={width/2} y1={height} x1={width/2} strokeWidth="1.5" stroke="#000" fill="none"/>
|
||||
<line y2={height/2} x2={width} y1={height/2} x1={width/2} strokeWidth="1.5" stroke="#000" fill="none"/>
|
||||
<line y2="0" x2={width / 2} y1={height} x1={width / 2} strokeWidth="1.5" stroke="#000" fill="none"/>
|
||||
<line y2={height / 2} x2={width} y1={height / 2} x1={width / 2} strokeWidth="1.5" stroke="#000"
|
||||
fill="none"/>
|
||||
</g>
|
||||
</svg>;
|
||||
}
|
||||
|
||||
function svgEnd(scale=1.0) {
|
||||
function svgEnd(key, scale = 1.0) {
|
||||
let width = 48 * scale;
|
||||
let height = 64 * scale;
|
||||
|
||||
return <svg width={width} height={height} xmlns="http://www.w3.org/2000/svg">
|
||||
return <svg key={key} width={width} height={height} xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
{ /* vertical line */}
|
||||
<line y2="0" x2={width/2} y1={height/2} x1={width/2} strokeWidth="1.5" stroke="#000" fill="none"/>
|
||||
<line y2="0" x2={width / 2} y1={height / 2} x1={width / 2} strokeWidth="1.5" stroke="#000" fill="none"/>
|
||||
{ /* horizontal line */}
|
||||
<line y2={height/2} x2={width} y1={height/2} x1={width/2} strokeWidth="1.5" stroke="#000" fill="none"/>
|
||||
<line y2={height / 2} x2={width} y1={height / 2} x1={width / 2} strokeWidth="1.5" stroke="#000"
|
||||
fill="none"/>
|
||||
</g>
|
||||
</svg>;
|
||||
}
|
||||
|
||||
function svgLeft(scale=1.0) {
|
||||
function svgLeft(key, scale = 1.0) {
|
||||
let width = 48 * scale;
|
||||
let height = 64 * scale;
|
||||
return <svg width={width} height={height} xmlns="http://www.w3.org/2000/svg" style={{}}>
|
||||
return <svg key={key} width={width} height={height} xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
{ /* vertical line */}
|
||||
<line y2="0" x2={width/2} y1={height} x1={width/2} strokeWidth="1.5" stroke="#000" fill="none"/>
|
||||
<line y2="0" x2={width / 2} y1={height} x1={width / 2} strokeWidth="1.5" stroke="#000" fill="none"/>
|
||||
</g>
|
||||
</svg>;
|
||||
}
|
||||
|
||||
function createFileIcon(mimeType, size="2x") {
|
||||
function createFileIcon(mimeType, size = "2x") {
|
||||
let icon = "";
|
||||
if (mimeType !== null) {
|
||||
if (mimeType) {
|
||||
mimeType = mimeType.toLowerCase().trim();
|
||||
let types = ["image", "text", "audio", "video"];
|
||||
let languages = ["php", "java", "python", "cpp"];
|
||||
@ -92,11 +94,11 @@ export function FileBrowser(props) {
|
||||
icon = "file" + (icon ? ("-" + icon) : icon);
|
||||
}
|
||||
|
||||
return <Icon icon={icon} type={"far"} className={"p-1 align-middle fa-" + size} />
|
||||
return <Icon icon={icon} type={"far"} className={"p-1 align-middle fa-" + size}/>
|
||||
}
|
||||
|
||||
function formatSize(size) {
|
||||
const suffixes = ["B","KiB","MiB","GiB","TiB"];
|
||||
const suffixes = ["B", "KiB", "MiB", "GiB", "TiB"];
|
||||
let i = 0;
|
||||
for (; i < suffixes.length && size >= 1024; i++) {
|
||||
size /= 1024.0;
|
||||
@ -109,14 +111,32 @@ export function FileBrowser(props) {
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
let newFiles = filesToUpload.slice();
|
||||
for (let fileIndex = 0; fileIndex < newFiles.length; fileIndex++) {
|
||||
if (typeof newFiles[fileIndex].progress === 'undefined') {
|
||||
onUpload(fileIndex);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}, [filesToUpload]);
|
||||
|
||||
function canUpload() {
|
||||
return api.loggedIn || (tokenObj.valid && tokenObj.type === "upload");
|
||||
}
|
||||
|
||||
function onAddUploadFiles(acceptedFiles) {
|
||||
let files = filesToUpload.slice();
|
||||
files.push(...acceptedFiles);
|
||||
setFilesToUpload(files);
|
||||
function onAddUploadFiles(acceptedFiles, rejectedFiles) {
|
||||
|
||||
if (rejectedFiles && rejectedFiles.length > 0) {
|
||||
const filenames = rejectedFiles.map(f => f.file.name).join(", ");
|
||||
pushAlert({msg: "The following files could not be uploaded due to given restrictions: " + filenames }, "Cannot upload file");
|
||||
}
|
||||
|
||||
if (acceptedFiles && acceptedFiles.length > 0) {
|
||||
let files = filesToUpload.slice();
|
||||
files.push(...acceptedFiles);
|
||||
setFilesToUpload(files);
|
||||
}
|
||||
}
|
||||
|
||||
function getSelectedIds(items = null, recursive = true) {
|
||||
@ -158,9 +178,9 @@ export function FileBrowser(props) {
|
||||
}
|
||||
}
|
||||
|
||||
function createFileList(elements, indentation=0) {
|
||||
function createFileList(elements, indentation = 0) {
|
||||
let rows = [];
|
||||
let i = 0;
|
||||
let rowIndex = 0;
|
||||
|
||||
const scale = 0.45;
|
||||
const iconSize = "lg";
|
||||
@ -168,7 +188,7 @@ export function FileBrowser(props) {
|
||||
const values = Object.values(elements);
|
||||
for (const fileElement of values) {
|
||||
let name = fileElement.name;
|
||||
let uid = fileElement.uid;
|
||||
let uid = fileElement.uid;
|
||||
let type = (fileElement.isDirectory ? "Directory" : fileElement.mimeType);
|
||||
let size = (fileElement.isDirectory ? "" : formatSize(fileElement.size));
|
||||
let mimeType = (fileElement.isDirectory ? "application/x-directory" : fileElement.mimeType);
|
||||
@ -176,21 +196,21 @@ export function FileBrowser(props) {
|
||||
let svg = [];
|
||||
if (indentation > 0) {
|
||||
for (let i = 0; i < indentation - 1; i++) {
|
||||
svg.push(svgLeft(scale));
|
||||
svg.push(svgLeft(rowIndex + "-" + i, scale));
|
||||
}
|
||||
|
||||
if (i === values.length - 1) {
|
||||
svg.push(svgEnd(scale));
|
||||
if (rowIndex === values.length - 1) {
|
||||
svg.push(svgEnd(rowIndex + "-end", scale));
|
||||
} else {
|
||||
svg.push(svgMiddle(scale));
|
||||
svg.push(svgMiddle(rowIndex + "-middle", scale));
|
||||
}
|
||||
}
|
||||
|
||||
rows.push(
|
||||
<tr key={"file-" + uid} data-id={uid} className={"file-row"}>
|
||||
<td>
|
||||
{ svg }
|
||||
{ createFileIcon(mimeType, iconSize) }
|
||||
{svg}
|
||||
{createFileIcon(mimeType, iconSize)}
|
||||
</td>
|
||||
<td>
|
||||
{fileElement.isDirectory ? name :
|
||||
@ -210,156 +230,190 @@ export function FileBrowser(props) {
|
||||
if (fileElement.isDirectory) {
|
||||
rows.push(...createFileList(fileElement.items, indentation + 1));
|
||||
}
|
||||
i++;
|
||||
rowIndex++;
|
||||
}
|
||||
return rows;
|
||||
}
|
||||
|
||||
let rows = createFileList(files);
|
||||
let selectedIds = getSelectedIds();
|
||||
let selectedCount = selectedIds.length;
|
||||
let uploadZone = <></>;
|
||||
let writePermissions = canUpload();
|
||||
let uploadedFiles = [];
|
||||
let alertElements = [];
|
||||
let rows = createFileList(files);
|
||||
let selectedIds = getSelectedIds();
|
||||
let selectedCount = selectedIds.length;
|
||||
let uploadZone = <></>;
|
||||
let writePermissions = canUpload();
|
||||
let uploadedFiles = [];
|
||||
let alertElements = [];
|
||||
|
||||
for (let i = 0; i < alerts.length; i++) {
|
||||
const alert = alerts[i];
|
||||
alertElements.push(
|
||||
<Alert key={"alert-" + i} {...alert} onClose={() => removeAlert(i)} />
|
||||
for (let i = 0; i < alerts.length; i++) {
|
||||
const alert = alerts[i];
|
||||
alertElements.push(
|
||||
<Alert key={"alert-" + i} {...alert} onClose={() => removeAlert(i)}/>
|
||||
);
|
||||
}
|
||||
|
||||
let options = [];
|
||||
for (const [uid, dir] of Object.entries(directories)) {
|
||||
options.push(
|
||||
<option key={"option-" + dir} value={uid}>{dir}</option>
|
||||
);
|
||||
}
|
||||
|
||||
function getAllowedExtensions() {
|
||||
let extensions = restrictions.extensions || "";
|
||||
return extensions.split(",")
|
||||
.map(ext => ext.trim())
|
||||
.map(ext => !ext.startsWith(".") && ext.length > 0 ? "." + ext : ext)
|
||||
.join(",");
|
||||
}
|
||||
|
||||
function getRestrictions() {
|
||||
return {
|
||||
accept: getAllowedExtensions(),
|
||||
maxFiles: restrictions.maxFiles,
|
||||
maxSize: restrictions.maxSize
|
||||
};
|
||||
}
|
||||
|
||||
if (writePermissions) {
|
||||
|
||||
for (let i = 0; i < filesToUpload.length; i++) {
|
||||
const file = filesToUpload[i];
|
||||
const progress = Math.round((file.progress ?? 0) * 100);
|
||||
const done = progress >= 100;
|
||||
uploadedFiles.push(
|
||||
<span className={"uploaded-file"} key={i}>
|
||||
{createFileIcon(file.type, "3x")}
|
||||
<span>{file.name}</span>
|
||||
{!done ?
|
||||
<div className={"progress border border-primary"}>
|
||||
<div className={"progress-bar progress-bar-striped progress-bar-animated"} role={"progressbar"}
|
||||
aria-valuenow={progress} aria-valuemin={"0"} aria-valuemax={"100"}
|
||||
style={{width: progress + "%"}}>
|
||||
{ progress + "%" }
|
||||
</div>
|
||||
</div> : <></>
|
||||
}
|
||||
<Icon icon={done ? "check" : "spinner"} className={"status-icon " + (done ? "text-success" : "text-secondary")} />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
let options = [];
|
||||
for (const [uid, dir] of Object.entries(directories)) {
|
||||
options.push(
|
||||
<option key={"option-" + dir} value={uid}>{dir}</option>
|
||||
);
|
||||
}
|
||||
|
||||
if (writePermissions) {
|
||||
|
||||
for(let i = 0; i < filesToUpload.length; i++) {
|
||||
const file = filesToUpload[i];
|
||||
uploadedFiles.push(
|
||||
<span className={"uploaded-file"} key={i}>
|
||||
{ createFileIcon(file.type, "3x") }
|
||||
<span>{file.name}</span>
|
||||
<Icon icon={"times"} onClick={(e) => onRemoveUploadedFile(e, i)}/>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
uploadZone = <><Dropzone onDrop={onAddUploadFiles}>
|
||||
uploadZone = <>
|
||||
<div className={"p-3"}>
|
||||
<label><b>Destination Directory:</b></label>
|
||||
<select value={popup.directory} className={"form-control"}
|
||||
onChange={(e) => onPopupChange(e, "directory")}>
|
||||
{options}
|
||||
</select>
|
||||
</div>
|
||||
<Dropzone onDrop={onAddUploadFiles} {...getRestrictions()} >
|
||||
{({getRootProps, getInputProps}) => (
|
||||
<section className={"file-upload-container"}>
|
||||
<div {...getRootProps()}>
|
||||
<input {...getInputProps()} />
|
||||
<p>Drag 'n' drop some files here, or click to select files</p>
|
||||
{ uploadedFiles.length === 0 ?
|
||||
{uploadedFiles.length === 0 ?
|
||||
<Icon className={"mx-auto fa-3x text-black-50"} icon={"upload"}/> :
|
||||
<div>{uploadedFiles}</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</Dropzone>
|
||||
</>;
|
||||
}
|
||||
|
||||
return <>
|
||||
<h4>
|
||||
<Icon icon={"sync"} className={"mx-3 clickable small"} onClick={fetchFiles}/>
|
||||
File Browser
|
||||
</h4>
|
||||
<table className={"table data-table file-table"}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th/>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Size</th>
|
||||
<th/>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ rows.length > 0 ? rows :
|
||||
<tr>
|
||||
<td colSpan={4} className={"text-center text-black-50"}>
|
||||
No files uploaded yet
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className={"file-control-buttons"}>
|
||||
<button type={"button"} className={"btn btn-success"} disabled={selectedCount === 0}
|
||||
onClick={() => onDownload(selectedIds)}>
|
||||
<Icon icon={"download"} className={"mr-1"}/>
|
||||
Download Selected Files ({selectedCount})
|
||||
</button>
|
||||
{ api.loggedIn ?
|
||||
<button type={"button"} className={"btn btn-info"} onClick={(e) => onPopupOpen("createDirectory")}>
|
||||
<Icon icon={"plus"} className={"mr-1"}/>
|
||||
Create Directory
|
||||
</button> :
|
||||
<></>
|
||||
}
|
||||
{
|
||||
writePermissions ?
|
||||
<>
|
||||
<button type={"button"} className={"btn btn-primary"} disabled={uploadedFiles.length === 0}
|
||||
onClick={(e) => api.loggedIn ? onPopupOpen("upload") : onUpload()}>
|
||||
<Icon icon={"upload"} className={"mr-1"}/>
|
||||
Upload
|
||||
</button>
|
||||
<button type={"button"} className={"btn btn-danger"} disabled={selectedCount === 0}
|
||||
onClick={() => deleteFiles(selectedIds)}>
|
||||
<Icon icon={"trash"} className={"mr-1"}/>
|
||||
Delete Selected Files ({selectedCount})
|
||||
</button>
|
||||
</>
|
||||
: <></>
|
||||
}
|
||||
</div>
|
||||
{ uploadZone }
|
||||
<div className={"file-browser-restrictions px-4 mb-4"}>
|
||||
<b>Restrictions:</b>
|
||||
<span>Max. Files: { restrictions.maxFiles }</span>
|
||||
<span>Max. Filesize: { formatSize(restrictions.maxSize) }</span>
|
||||
<span>{ restrictions.extensions ? "Allowed extensions: " + restrictions.extensions : "All extensions allowed" }</span>
|
||||
</div>
|
||||
<div>
|
||||
{ alertElements }
|
||||
</div>
|
||||
<Popup title={"Create Directory"} visible={popup.visible} buttons={["Ok","Cancel"]} onClose={onPopupClose} onClick={onPopupButton}>
|
||||
<div className={"form-group"}>
|
||||
<label>Destination Directory:</label>
|
||||
<select value={popup.directory} className={"form-control"}
|
||||
onChange={(e) => onPopupChange(e, "directory")}>
|
||||
{ options }
|
||||
</select>
|
||||
</div>
|
||||
{ popup.type !== "upload" ?
|
||||
<div className={"form-group"}>
|
||||
<label>Directory Name</label>
|
||||
<input type={"text"} className={"form-control"} value={popup.directoryName} maxLength={32} placeholder={"Enter name…"}
|
||||
onChange={(e) => onPopupChange(e, "directoryName")}/>
|
||||
</div> : <></>
|
||||
}
|
||||
</Popup>
|
||||
)}
|
||||
</Dropzone>
|
||||
</>;
|
||||
}
|
||||
|
||||
return <>
|
||||
<h4>
|
||||
<Icon icon={"sync"} className={"mx-3 clickable small"} onClick={fetchFiles}/>
|
||||
File Browser
|
||||
</h4>
|
||||
<table className={"table data-table file-table"}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th/>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Size</th>
|
||||
<th/>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.length > 0 ? rows :
|
||||
<tr>
|
||||
<td colSpan={4} className={"text-center text-black-50"}>
|
||||
No files uploaded yet
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className={"file-control-buttons"}>
|
||||
<button type={"button"} className={"btn btn-success"} disabled={selectedCount === 0}
|
||||
onClick={() => onDownload(selectedIds)}>
|
||||
<Icon icon={"download"} className={"mr-1"}/>
|
||||
Download Selected Files ({selectedCount})
|
||||
</button>
|
||||
<span/>
|
||||
{
|
||||
writePermissions ?
|
||||
<>
|
||||
<button type={"button"} className={"btn btn-danger"} disabled={selectedCount === 0}
|
||||
onClick={() => deleteFiles(selectedIds)}>
|
||||
<Icon icon={"trash"} className={"mr-1"}/>
|
||||
Delete Selected Files ({selectedCount})
|
||||
</button>
|
||||
{api.loggedIn ?
|
||||
<button type={"button"} className={"btn btn-info"}
|
||||
onClick={(e) => onPopupOpen("createDirectory")}>
|
||||
<Icon icon={"plus"} className={"mr-1"}/>
|
||||
Create Directory
|
||||
</button> :
|
||||
<></>
|
||||
}
|
||||
</>
|
||||
: <></>
|
||||
}
|
||||
</div>
|
||||
{uploadZone}
|
||||
<div className={"file-browser-restrictions px-4 mb-4"}>
|
||||
<b>Restrictions:</b>
|
||||
<span>Max. Files: {restrictions.maxFiles}</span>
|
||||
<span>Max. Filesize: {formatSize(restrictions.maxSize)}</span>
|
||||
<span>{restrictions.extensions ? "Allowed extensions: " + restrictions.extensions : "All extensions allowed"}</span>
|
||||
</div>
|
||||
<div>
|
||||
{alertElements}
|
||||
</div>
|
||||
<Popup title={"Create Directory"} visible={popup.visible} buttons={["Ok", "Cancel"]} onClose={onPopupClose}
|
||||
onClick={onPopupButton}>
|
||||
<div className={"form-group"}>
|
||||
<label>Destination Directory:</label>
|
||||
<select value={popup.directory} className={"form-control"}
|
||||
onChange={(e) => onPopupChange(e, "directory")}>
|
||||
{options}
|
||||
</select>
|
||||
</div>
|
||||
{popup.type !== "upload" ?
|
||||
<div className={"form-group"}>
|
||||
<label>Directory Name</label>
|
||||
<input type={"text"} className={"form-control"} value={popup.directoryName} maxLength={32}
|
||||
placeholder={"Enter name…"}
|
||||
onChange={(e) => onPopupChange(e, "directoryName")}/>
|
||||
</div> : <></>
|
||||
}
|
||||
</Popup>
|
||||
</>;
|
||||
|
||||
function onPopupOpen(type) {
|
||||
setPopup({ ...popup, visible: true, type: type });
|
||||
setPopup({...popup, visible: true, type: type});
|
||||
}
|
||||
|
||||
function onPopupClose() {
|
||||
setPopup({ ...popup, visible: false });
|
||||
setPopup({...popup, visible: false});
|
||||
}
|
||||
|
||||
function onPopupChange(e, key) {
|
||||
setPopup({ ...popup, [key]: e.target.value });
|
||||
setPopup({...popup, [key]: e.target.value});
|
||||
}
|
||||
|
||||
function onPopupButton(btn) {
|
||||
@ -374,34 +428,40 @@ export function FileBrowser(props) {
|
||||
fetchFiles();
|
||||
}
|
||||
});
|
||||
} else if (popup.type === "upload") {
|
||||
onUpload();
|
||||
}
|
||||
}
|
||||
|
||||
onPopupClose();
|
||||
}
|
||||
|
||||
function fetchFiles() {
|
||||
if (tokenObj.valid) {
|
||||
api.validateToken(tokenObj.value).then((res) => {
|
||||
if (res) {
|
||||
onFetchFiles(res.files);
|
||||
} else {
|
||||
pushAlert(res);
|
||||
}
|
||||
});
|
||||
} else if (api.loggedIn) {
|
||||
api.listFiles().then((res) => {
|
||||
if (res) {
|
||||
onFetchFiles(res.files);
|
||||
} else {
|
||||
pushAlert(res);
|
||||
}
|
||||
});
|
||||
function removeUploadedFiles() {
|
||||
let newFiles = filesToUpload.filter(file => !file.progress || file.progress < 1.0);
|
||||
if (newFiles.length !== filesToUpload.length) {
|
||||
setFilesToUpload(newFiles);
|
||||
}
|
||||
}
|
||||
|
||||
function fetchFiles() {
|
||||
let promise;
|
||||
|
||||
if (tokenObj.valid) {
|
||||
promise = api.validateToken(tokenObj.value);
|
||||
} else if (api.loggedIn) {
|
||||
promise = api.listFiles()
|
||||
} else {
|
||||
return; // should never happen
|
||||
}
|
||||
|
||||
promise.then((res) => {
|
||||
if (res) {
|
||||
onFetchFiles(res.files);
|
||||
removeUploadedFiles();
|
||||
} else {
|
||||
pushAlert(res);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onRemoveUploadedFile(e, i) {
|
||||
e.stopPropagation();
|
||||
let files = filesToUpload.slice();
|
||||
@ -411,7 +471,7 @@ export function FileBrowser(props) {
|
||||
|
||||
function pushAlert(res, title) {
|
||||
let newAlerts = alerts.slice();
|
||||
newAlerts.push({ type: "danger", message: res.msg, title: title });
|
||||
newAlerts.push({type: "danger", message: res.msg, title: title});
|
||||
setAlerts(newAlerts);
|
||||
}
|
||||
|
||||
@ -427,21 +487,30 @@ export function FileBrowser(props) {
|
||||
if (selectedIds && selectedIds.length > 0) {
|
||||
let token = (api.loggedIn ? null : tokenObj.value);
|
||||
api.delete(selectedIds, token).then((res) => {
|
||||
if (res.success) {
|
||||
fetchFiles();
|
||||
} else {
|
||||
pushAlert(res);
|
||||
}
|
||||
if (res.success) {
|
||||
fetchFiles();
|
||||
} else {
|
||||
pushAlert(res);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function onUpload() {
|
||||
function onUploadProgress(event, fileIndex) {
|
||||
if (fileIndex < filesToUpload.length) {
|
||||
let files = filesToUpload.slice();
|
||||
files[fileIndex].progress = event.loaded >= event.total ? 1 : event.loaded / event.total;
|
||||
setFilesToUpload(files);
|
||||
}
|
||||
}
|
||||
|
||||
function onUpload(fileIndex) {
|
||||
let token = (api.loggedIn ? null : tokenObj.value);
|
||||
let parentId = ((!api.loggedIn || popup.directory === 0) ? null : popup.directory);
|
||||
api.upload(filesToUpload, token, parentId).then((res) => {
|
||||
const file = filesToUpload[fileIndex];
|
||||
api.upload(file, token, parentId, (e) => onUploadProgress(e, fileIndex)).then((res) => {
|
||||
if (res.success) {
|
||||
setFilesToUpload([]);
|
||||
// setFilesToUpload([]);
|
||||
fetchFiles();
|
||||
} else {
|
||||
pushAlert(res);
|
||||
|
||||
14
js/files.min.js
vendored
14
js/files.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user