frontend display upload restrictions
This commit is contained in:
parent
c847650b1f
commit
fb91b9e879
@ -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
10
js/files.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user