frontend display upload restrictions

core/Api/FileAPI.class.php

@@ -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;

fileControlPanel/src/api.js

@@ -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();
 

fileControlPanel/src/elements/file-browser.css

@@ -62,3 +62,8 @@
 .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);
+}

fileControlPanel/src/elements/file-browser.js

@@ -14,12 +14,12 @@ export function FileBrowser(props) {
     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 [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>

fileControlPanel/src/index.js

@@ -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>