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)),
|
"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
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