frontend display upload restrictions

This commit is contained in:
Roman 2021-03-30 23:12:10 +02:00
parent c847650b1f
commit fb91b9e879
6 changed files with 36 additions and 15 deletions

@ -237,7 +237,7 @@ namespace Api\File {
"maxFiles" => ($maxFiles <= 0 ? $this->getMaxFiles() : min($this->getMaxFiles(), $maxFiles)), "maxFiles" => ($maxFiles <= 0 ? $this->getMaxFiles() : min($this->getMaxFiles(), $maxFiles)),
"maxSize" => ($maxSize <= 0 ? $this->getMaxFileSizePHP() : min($this->getMaxFileSizePHP(), $maxSize)), "maxSize" => ($maxSize <= 0 ? $this->getMaxFileSizePHP() : min($this->getMaxFileSizePHP(), $maxSize)),
"extensions" => $row["extensions"] ?? "", "extensions" => $row["extensions"] ?? "",
"parentId" => $row["parentId"] ?? 0 // "parentId" => $row["parentId"] ?? 0 // not sure, why we need to tell the parentId?
); );
} }
} }
@ -261,7 +261,8 @@ namespace Api\File {
$this->result["restrictions"] = array( $this->result["restrictions"] = array(
"maxFiles" => $this->getMaxFiles(), "maxFiles" => $this->getMaxFiles(),
"maxSize" => $this->getMaxFileSizePHP() "maxSize" => $this->getMaxFileSizePHP(),
"extensions" => ""
); );
return true; return true;

@ -69,6 +69,10 @@ export default class API {
return this.apiCall("file/createDirectory", { name: name, parentId: parentId }); return this.apiCall("file/createDirectory", { name: name, parentId: parentId });
} }
getRestrictions() {
return this.apiCall("file/getRestrictions");
}
async upload(files, token = null, parentId = null) { async upload(files, token = null, parentId = null) {
const csrf_token = this.csrfToken(); const csrf_token = this.csrfToken();

@ -62,3 +62,8 @@
.file-table td:nth-child(n+3), .file-table th:nth-child(n+3) { .file-table td:nth-child(n+3), .file-table th:nth-child(n+3) {
text-align: center; text-align: center;
} }
.file-browser-restrictions {
display: grid;
grid-template-columns: repeat(4, auto);
}

@ -14,12 +14,12 @@ export function FileBrowser(props) {
let onSelectFile = props.onSelectFile || function() { }; let onSelectFile = props.onSelectFile || function() { };
let onFetchFiles = props.onFetchFiles || function() { }; let onFetchFiles = props.onFetchFiles || function() { };
let directories = props.directories || {}; 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 [popup, setPopup] = useState({ visible: false, directoryName: "", directory: 0, type: "upload" });
let [alerts, setAlerts] = useState( []); let [alerts, setAlerts] = useState( []);
let [filesToUpload, setFilesToUpload] = useState([]); let [filesToUpload, setFilesToUpload] = useState([]);
function svgMiddle(scale=1.0) { function svgMiddle(scale=1.0) {
let width = 48 * scale; let width = 48 * scale;
let height = 64 * scale; let height = 64 * scale;
@ -323,6 +323,12 @@ export function FileBrowser(props) {
} }
</div> </div>
{ uploadZone } { 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> <div>
{ alertElements } { alertElements }
</div> </div>

@ -4,7 +4,6 @@ import API from "./api";
import Icon from "./elements/icon"; import Icon from "./elements/icon";
import {FileBrowser} from "./elements/file-browser"; import {FileBrowser} from "./elements/file-browser";
import {TokenList} from "./elements/token-list"; import {TokenList} from "./elements/token-list";
import {Link} from "react-router-dom";
class FileControlPanel extends React.Component { class FileControlPanel extends React.Component {
@ -17,7 +16,8 @@ class FileControlPanel extends React.Component {
errorMessage: "", errorMessage: "",
user: { }, user: { },
token: { valid: false, value: "", validUntil: null, type: null }, token: { valid: false, value: "", validUntil: null, type: null },
files: {} files: {},
restrictions: { maxFiles: 0, maxSize: 0, extensions: "" }
}; };
} }
@ -118,6 +118,7 @@ class FileControlPanel extends React.Component {
newState.token.value = token; newState.token.value = token;
} }
newState.files = res.files; newState.files = res.files;
newState.restrictions = res.restrictions;
} else { } else {
newState.token.value = (newState.token.value ? "" : token); newState.token.value = (newState.token.value ? "" : token);
newState.errorMessage = res.msg; newState.errorMessage = res.msg;
@ -159,6 +160,9 @@ class FileControlPanel extends React.Component {
if (isLoggedIn) { if (isLoggedIn) {
this.api.listFiles().then((res) => { this.api.listFiles().then((res) => {
this.setState({ ...this.state, loaded: true, user: this.api.user, files: res.files }); this.setState({ ...this.state, loaded: true, user: this.api.user, files: res.files });
this.api.getRestrictions().then((res) => {
this.setState({ ...this.state, restrictions: res.restrictions });
})
}); });
} else { } else {
this.setState({ ...this.state, loaded: true, user: this.api.user }); this.setState({ ...this.state, loaded: true, user: this.api.user });
@ -172,20 +176,21 @@ class FileControlPanel extends React.Component {
else if (this.api.loggedIn || this.state.token.valid) { else if (this.api.loggedIn || this.state.token.valid) {
let selectedIds = this.getSelectedIds(); let selectedIds = this.getSelectedIds();
let directories = this.getDirectories(); let directories = this.getDirectories();
let tokenList = (this.api.loggedIn) ? let tokenList = (this.api.loggedIn ?
<div className={"row"}> <div className={"row"}>
<div className={"col-lg-8 col-md-10 col-sm-12 mx-auto"}> <div className={"col-lg-8 col-md-10 col-sm-12 mx-auto"}>
<TokenList api={this.api} selectedFiles={selectedIds} directories={directories} /> <TokenList api={this.api} selectedFiles={selectedIds} directories={directories} />
</div> </div>
</div> : </div> : <></>
<></>; );
return <> return <>
<div className={"container mt-4"}> <div className={"container mt-4"}>
<div className={"row"}> <div className={"row"}>
<div className={"col-lg-8 col-md-10 col-sm-12 mx-auto"}> <div className={"col-lg-8 col-md-10 col-sm-12 mx-auto"}>
<h2>File Control Panel</h2> <h2>File Control Panel</h2>
<FileBrowser files={this.state.files} token={this.state.token} api={this.api} directories={directories} <FileBrowser files={this.state.files} token={this.state.token} api={this.api}
restrictions={this.state.restrictions} directories={directories}
onSelectFile={this.onSelectFile.bind(this)} onSelectFile={this.onSelectFile.bind(this)}
onFetchFiles={this.onFetchFiles.bind(this)}/> onFetchFiles={this.onFetchFiles.bind(this)}/>
</div> </div>

10
js/files.min.js vendored

File diff suppressed because one or more lines are too long