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)),
"maxSize" => ($maxSize <= 0 ? $this->getMaxFileSizePHP() : min($this->getMaxFileSizePHP(), $maxSize)),
"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(
"maxFiles" => $this->getMaxFiles(),
"maxSize" => $this->getMaxFileSizePHP()
"maxSize" => $this->getMaxFileSizePHP(),
"extensions" => ""
);
return true;

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

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

@ -13,13 +13,13 @@ export function FileBrowser(props) {
let tokenObj = props.token || { valid: false };
let onSelectFile = props.onSelectFile || 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 [alerts, setAlerts] = useState( []);
let [filesToUpload, setFilesToUpload] = useState([]);
function svgMiddle(scale=1.0) {
let width = 48 * scale;
let height = 64 * scale;
@ -323,6 +323,12 @@ export function FileBrowser(props) {
}
</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>

@ -4,7 +4,6 @@ import API from "./api";
import Icon from "./elements/icon";
import {FileBrowser} from "./elements/file-browser";
import {TokenList} from "./elements/token-list";
import {Link} from "react-router-dom";
class FileControlPanel extends React.Component {
@ -17,7 +16,8 @@ class FileControlPanel extends React.Component {
errorMessage: "",
user: { },
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.files = res.files;
newState.restrictions = res.restrictions;
} else {
newState.token.value = (newState.token.value ? "" : token);
newState.errorMessage = res.msg;
@ -159,6 +160,9 @@ class FileControlPanel extends React.Component {
if (isLoggedIn) {
this.api.listFiles().then((res) => {
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 {
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) {
let selectedIds = this.getSelectedIds();
let directories = this.getDirectories();
let tokenList = (this.api.loggedIn) ?
let tokenList = (this.api.loggedIn ?
<div className={"row"}>
<div className={"col-lg-8 col-md-10 col-sm-12 mx-auto"}>
<TokenList api={this.api} selectedFiles={selectedIds} directories={directories} />
</div>
</div> :
<></>;
</div> : <></>
);
return <>
<div className={"container mt-4"}>
<div className={"row"}>
<div className={"col-lg-8 col-md-10 col-sm-12 mx-auto"}>
<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)}
onFetchFiles={this.onFetchFiles.bind(this)}/>
</div>

10
js/files.min.js vendored

File diff suppressed because one or more lines are too long