fetch => axios, some nice upload ux

core/Api/FileAPI.class.php

@@ -469,8 +469,10 @@ namespace Api\File {
         return $this->success;
       }
 
-      $fileKeys = array_keys($_FILES);
+      $numFilesUploaded = array_sum(array_map(function($fileEntry) {
-      $numFilesUploaded = count($fileKeys);
+          return is_array($fileEntry["name"]) ? count($fileEntry["name"]) : 1;
+        }, $_FILES
+      ));
 
       if (!is_null($token)) {
 
@@ -511,30 +513,43 @@ namespace Api\File {
         }
 
         $count = $res[0]["count"];
-        if ($maxFiles > 0 && $numFilesUploaded > 0 && $numFilesUploaded + $count > $maxFiles) {
-          return $this->createError("File limit exceeded. Currently uploaded $count / $maxFiles files");
-        }
-
-        if ($maxSize > 0 || !empty($extensions)) {
-          foreach ($_FILES as $file) {
-            $name = $file["name"];
-            if ($maxSize > 0 && $file["size"] > $maxSize) {
-              return $this->createError("File Size limit of $maxSize bytes exceeded for file $name");
-            }
-
-            $dotPos = strrpos($name, ".");
-            $ext = ($dotPos !== false ? strtolower(substr($name, $dotPos + 1)) : false);
-            if (!empty($extensions) && $ext !== false && !in_array($ext, $extensions)) {
-              return $this->createError("File '$name' has prohibited extension. Allowed extensions: " . implode(",", $extensions));
-            }
-          }
-        }
       } else {
         $userId = $this->user->getId();
+        $maxSize = 0;
+        $count = 0;
+        $maxFiles = 0;
+        $extensions = array();
       }
 
+      $maxSize = ($maxSize <= 0 ? $this->getMaxFileSizePHP() : min($maxSize, $this->getMaxFileSizePHP()));
+      $maxFiles = ($maxFiles <= 0 ? $this->getMaxFiles() : min($maxFiles, $this->getMaxFiles()));
+
       if ($numFilesUploaded === 0) {
         return $this->createError("No file uploaded");
+      } else if($numFilesUploaded > 1) {
+        return $this->createError("You can only upload one file at once");
+      }
+
+      if ($maxFiles > 0 && $count + 1 > $maxFiles) {
+        return $this->createError("File upload limit exceeded. Currently uploaded $count / $maxFiles files");
+      }
+
+      $fileObject = array_shift($_FILES);
+      $fileName  = (is_array($fileObject["name"]) ? $fileObject["name"][0] : $fileObject["name"]);
+      $fileSize  = (is_array($fileObject["size"]) ? $fileObject["size"][0] : $fileObject["size"]);
+      $tmpPath   = (is_array($fileObject["tmp_name"]) ? $fileObject["tmp_name"][0] : $fileObject["tmp_name"]);
+      $fileError = (is_array($fileObject["error"]) ? $fileObject["error"][0] : $fileObject["error"]);
+
+      if ($maxSize > 0 || !empty($extensions)) {
+        if ($maxSize > 0 && $fileSize > $maxSize) {
+          return $this->createError("File Size limit of $maxSize bytes exceeded for file $fileName");
+        }
+
+        $dotPos = strrpos($fileName, ".");
+        $ext = ($dotPos !== false ? strtolower(substr($fileName, $dotPos + 1)) : false);
+        if (!empty($extensions) && $ext !== false && !in_array($ext, $extensions)) {
+          return $this->createError("File '$fileName' has prohibited extension. Allowed extensions: " . implode(",", $extensions));
+        }
       }
 
       $uploadDir = realpath($_SERVER["DOCUMENT_ROOT"] . "/files/uploaded/");
@@ -542,19 +557,14 @@ namespace Api\File {
         return $this->createError("Upload directory is not writable");
       }
 
-      $fileIds = array();
-      foreach ($_FILES as $key => $file) {
-        $fileName = $file["name"];
-        $tmpPath = $file["tmp_name"];
       if (!$tmpPath) {
-          return $this->createError("Error uploading file: $fileName");
+        return $this->createError("Error uploading file: $fileError");
       }
 
       $md5Hash = @hash_file('md5', $tmpPath);
       $sha1Hash = @hash_file('sha1', $tmpPath);
       $filePath =  $uploadDir . "/" . $md5Hash . $sha1Hash;
-        if (move_uploaded_file($tmpPath, $filePath)) {
+      if (file_exists($filePath) || move_uploaded_file($tmpPath, $filePath)) {
-
         $res = $sql->insert("UserFile", array("name", "directory", "path", "user_id", "parent_id"))
           ->addRow($fileName, false, $filePath, $userId, $parentId)
           ->returning("uid")
@@ -565,24 +575,22 @@ namespace Api\File {
           $this->success = false;
           return false;
         } else {
-            $fileIds[] = $sql->getLastInsertId();
+          $fileId = $sql->getLastInsertId();
         }
       } else {
-          return $this->createError("Could not create file: " . $fileName);
+        return $this->createError("Could not create file: $fileName");
-        }
       }
 
       if (!is_null($token)) {
-        $query = $sql->insert("UserFileTokenFile", array("file_id", "token_id"));
+        $res = $sql->insert("UserFileTokenFile", array("file_id", "token_id"))
-        foreach ($fileIds as $fileId) {
+          ->addRow($fileId, $tokenId)
-          $query->addRow($fileId, $tokenId);
+          ->execute();
-        }
 
-        $res = $query->execute();
         $this->success = ($res !== false);
         $this->lastError = $sql->getLastError();
       }
 
+      $this->result["fileId"] = $fileId;
       return $this->success;
     }
   }
@@ -651,6 +659,7 @@ namespace Api\File {
     }
   }
 
+  // TODO: delete permanently from filesystem
   class Delete extends FileAPI {
 
     public function __construct(User $user, bool $externalCall = false) {

fileControlPanel/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.21.1",
     "moment": "^2.26.0",
     "react": "^16.13.1",
     "react-collapse": "^5.0.1",

fileControlPanel/src/api.js

@@ -1,4 +1,5 @@
 import 'babel-polyfill';
+import axios from "axios";
 
 export default class API {
 
@@ -13,24 +14,18 @@ export default class API {
 
     async apiCall(method, params) {
         params = params || { };
-
         const csrf_token = this.csrfToken();
         if (csrf_token) params.csrf_token = csrf_token;
-        let response = await fetch("/api/" + method, {
+        let response = await axios.post("/api/" + method, params);
-            method: 'post',
+        return response.data;
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify(params)
-        });
-
-        return await response.json();
     }
 
     async fetchUser() {
-        let response = await fetch("/api/user/info");
+        let response = await axios.get("/api/user/info");
-        let data = await response.json();
+        let data = response.data;
         this.user = data["user"];
         this.loggedIn = data["loggedIn"];
-        return data && data.success && data.loggedIn;
+        return data && data["success"] && data["loggedIn"];
     }
 
     async logout() {
@@ -73,24 +68,20 @@ export default class API {
         return this.apiCall("file/getRestrictions");
     }
 
-    async upload(files, token = null, parentId = null) {
+    async upload(file, token = null, parentId = null, onUploadProgress = null) {
         const csrf_token = this.csrfToken();
 
         const fd = new FormData();
-        for (let i = 0; i < files.length; i++) {
+        fd.append("file", file);
-            fd.append('file' + i, files[i]);
-        }
-
         if (csrf_token) fd.append("csrf_token", csrf_token);
         if (token) fd.append("token", token);
         if (parentId) fd.append("parentId", parentId);
 
-        // send `POST` request
+        let response = await axios.post('/api/file/upload', fd, {
-        let response = await fetch('/api/file/upload', {
+            headers: { 'Content-Type': 'multipart/form-data' },
-            method: 'POST',
+            onUploadProgress: onUploadProgress || function () { }
-            body: fd
         });
 
-        return response.json();
+        return response.data;
     }
 };

fileControlPanel/src/elements/file-browser.css

@@ -40,8 +40,7 @@
     word-wrap: break-word;
 }
 
-.uploaded-file > i:nth-child(3) {
+.uploaded-file > .status-icon {
-    color: red;
     position: absolute;
     top: -9px;
     right: 25px;

fileControlPanel/src/elements/file-browser.js

@@ -4,7 +4,7 @@ import Dropzone from "react-dropzone";
 import Icon from "./icon";
 import Alert from "./alert";
 import {Popup} from "./popup";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 
 export function FileBrowser(props) {
 
@@ -20,36 +20,38 @@ export function FileBrowser(props) {
     let [alerts, setAlerts] = useState([]);
     let [filesToUpload, setFilesToUpload] = useState([]);
 
-    function svgMiddle(scale=1.0) {
+    function svgMiddle(key, scale = 1.0) {
         let width = 48 * scale;
         let height = 64 * scale;
 
-        return <svg width={width} height={height} xmlns="http://www.w3.org/2000/svg">
+        return <svg key={key} width={width} height={height} xmlns="http://www.w3.org/2000/svg">
             <g>
                 <line y2="0" x2={width / 2} y1={height} x1={width / 2} strokeWidth="1.5" stroke="#000" fill="none"/>
-                <line y2={height/2} x2={width} y1={height/2} x1={width/2} strokeWidth="1.5" stroke="#000" fill="none"/>
+                <line y2={height / 2} x2={width} y1={height / 2} x1={width / 2} strokeWidth="1.5" stroke="#000"
+                      fill="none"/>
             </g>
         </svg>;
     }
 
-    function svgEnd(scale=1.0) {
+    function svgEnd(key, scale = 1.0) {
         let width = 48 * scale;
         let height = 64 * scale;
 
-        return <svg width={width} height={height} xmlns="http://www.w3.org/2000/svg">
+        return <svg key={key} width={width} height={height} xmlns="http://www.w3.org/2000/svg">
             <g>
                 { /* vertical line */}
                 <line y2="0" x2={width / 2} y1={height / 2} x1={width / 2} strokeWidth="1.5" stroke="#000" fill="none"/>
                 { /* horizontal line */}
-                <line y2={height/2} x2={width} y1={height/2} x1={width/2} strokeWidth="1.5" stroke="#000" fill="none"/>
+                <line y2={height / 2} x2={width} y1={height / 2} x1={width / 2} strokeWidth="1.5" stroke="#000"
+                      fill="none"/>
             </g>
         </svg>;
     }
 
-    function svgLeft(scale=1.0) {
+    function svgLeft(key, scale = 1.0) {
         let width = 48 * scale;
         let height = 64 * scale;
-        return <svg width={width} height={height} xmlns="http://www.w3.org/2000/svg" style={{}}>
+        return <svg key={key} width={width} height={height} xmlns="http://www.w3.org/2000/svg">
             <g>
                 { /* vertical line */}
                 <line y2="0" x2={width / 2} y1={height} x1={width / 2} strokeWidth="1.5" stroke="#000" fill="none"/>
@@ -59,7 +61,7 @@ export function FileBrowser(props) {
 
     function createFileIcon(mimeType, size = "2x") {
         let icon = "";
-        if (mimeType !== null) {
+        if (mimeType) {
             mimeType = mimeType.toLowerCase().trim();
             let types = ["image", "text", "audio", "video"];
             let languages = ["php", "java", "python", "cpp"];
@@ -109,15 +111,33 @@ export function FileBrowser(props) {
         }
     }
 
+    useEffect(() => {
+        let newFiles = filesToUpload.slice();
+        for (let fileIndex = 0; fileIndex < newFiles.length; fileIndex++) {
+            if (typeof newFiles[fileIndex].progress === 'undefined') {
+                onUpload(fileIndex);
+                break;
+            }
+        }
+    }, [filesToUpload]);
+
     function canUpload() {
         return api.loggedIn || (tokenObj.valid && tokenObj.type === "upload");
     }
 
-    function onAddUploadFiles(acceptedFiles) {
+    function onAddUploadFiles(acceptedFiles, rejectedFiles) {
+
+        if (rejectedFiles && rejectedFiles.length > 0) {
+            const filenames = rejectedFiles.map(f => f.file.name).join(", ");
+            pushAlert({msg: "The following files could not be uploaded due to given restrictions: " + filenames }, "Cannot upload file");
+        }
+
+        if (acceptedFiles && acceptedFiles.length > 0) {
             let files = filesToUpload.slice();
             files.push(...acceptedFiles);
             setFilesToUpload(files);
         }
+    }
 
     function getSelectedIds(items = null, recursive = true) {
         let ids = [];
@@ -160,7 +180,7 @@ export function FileBrowser(props) {
 
     function createFileList(elements, indentation = 0) {
         let rows = [];
-        let i = 0;
+        let rowIndex = 0;
 
         const scale = 0.45;
         const iconSize = "lg";
@@ -176,13 +196,13 @@ export function FileBrowser(props) {
             let svg = [];
             if (indentation > 0) {
                 for (let i = 0; i < indentation - 1; i++) {
-                    svg.push(svgLeft(scale));
+                    svg.push(svgLeft(rowIndex + "-" + i, scale));
                 }
 
-                if (i === values.length - 1) {
+                if (rowIndex === values.length - 1) {
-                    svg.push(svgEnd(scale));
+                    svg.push(svgEnd(rowIndex + "-end", scale));
                 } else {
-                    svg.push(svgMiddle(scale));
+                    svg.push(svgMiddle(rowIndex + "-middle", scale));
                 }
             }
 
@@ -210,7 +230,7 @@ export function FileBrowser(props) {
             if (fileElement.isDirectory) {
                 rows.push(...createFileList(fileElement.items, indentation + 1));
             }
-            i++;
+            rowIndex++;
         }
         return rows;
     }
@@ -237,20 +257,55 @@ export function FileBrowser(props) {
         );
     }
 
+    function getAllowedExtensions() {
+        let extensions = restrictions.extensions || "";
+        return extensions.split(",")
+            .map(ext => ext.trim())
+            .map(ext => !ext.startsWith(".") && ext.length > 0 ? "." + ext : ext)
+            .join(",");
+    }
+
+    function getRestrictions() {
+        return {
+            accept: getAllowedExtensions(),
+            maxFiles: restrictions.maxFiles,
+            maxSize: restrictions.maxSize
+        };
+    }
+
     if (writePermissions) {
 
         for (let i = 0; i < filesToUpload.length; i++) {
             const file = filesToUpload[i];
+            const progress = Math.round((file.progress ?? 0) * 100);
+            const done = progress >= 100;
             uploadedFiles.push(
                 <span className={"uploaded-file"} key={i}>
                         {createFileIcon(file.type, "3x")}
                     <span>{file.name}</span>
-                        <Icon icon={"times"} onClick={(e) => onRemoveUploadedFile(e, i)}/>
+                    {!done ?
+                        <div className={"progress border border-primary"}>
+                            <div className={"progress-bar progress-bar-striped progress-bar-animated"} role={"progressbar"}
+                                 aria-valuenow={progress} aria-valuemin={"0"} aria-valuemax={"100"}
+                                 style={{width: progress + "%"}}>
+                                { progress + "%" }
+                            </div>
+                        </div> : <></>
+                    }
+                    <Icon icon={done ? "check" : "spinner"} className={"status-icon " + (done ? "text-success" : "text-secondary")} />
                 </span>
             );
         }
 
-            uploadZone = <><Dropzone onDrop={onAddUploadFiles}>
+        uploadZone = <>
+            <div className={"p-3"}>
+                <label><b>Destination Directory:</b></label>
+                <select value={popup.directory} className={"form-control"}
+                        onChange={(e) => onPopupChange(e, "directory")}>
+                    {options}
+                </select>
+            </div>
+            <Dropzone onDrop={onAddUploadFiles} {...getRestrictions()} >
                 {({getRootProps, getInputProps}) => (
                     <section className={"file-upload-container"}>
                         <div {...getRootProps()}>
@@ -298,26 +353,23 @@ export function FileBrowser(props) {
                 <Icon icon={"download"} className={"mr-1"}/>
                 Download Selected Files ({selectedCount})
             </button>
-                { api.loggedIn ?
+            <span/>
-                    <button type={"button"} className={"btn btn-info"} onClick={(e) => onPopupOpen("createDirectory")}>
-                        <Icon icon={"plus"} className={"mr-1"}/>
-                        Create Directory
-                    </button> :
-                    <></>
-                }
             {
                 writePermissions ?
                     <>
-                            <button type={"button"} className={"btn btn-primary"} disabled={uploadedFiles.length === 0}
-                                    onClick={(e) => api.loggedIn ? onPopupOpen("upload") : onUpload()}>
-                                <Icon icon={"upload"} className={"mr-1"}/>
-                                Upload
-                            </button>
                         <button type={"button"} className={"btn btn-danger"} disabled={selectedCount === 0}
                                 onClick={() => deleteFiles(selectedIds)}>
                             <Icon icon={"trash"} className={"mr-1"}/>
                             Delete Selected Files ({selectedCount})
                         </button>
+                        {api.loggedIn ?
+                            <button type={"button"} className={"btn btn-info"}
+                                    onClick={(e) => onPopupOpen("createDirectory")}>
+                                <Icon icon={"plus"} className={"mr-1"}/>
+                                Create Directory
+                            </button> :
+                            <></>
+                        }
                     </>
                     : <></>
             }
@@ -332,7 +384,8 @@ export function FileBrowser(props) {
         <div>
             {alertElements}
         </div>
-            <Popup title={"Create Directory"} visible={popup.visible} buttons={["Ok","Cancel"]} onClose={onPopupClose} onClick={onPopupButton}>
+        <Popup title={"Create Directory"} visible={popup.visible} buttons={["Ok", "Cancel"]} onClose={onPopupClose}
+               onClick={onPopupButton}>
             <div className={"form-group"}>
                 <label>Destination Directory:</label>
                 <select value={popup.directory} className={"form-control"}
@@ -343,7 +396,8 @@ export function FileBrowser(props) {
             {popup.type !== "upload" ?
                 <div className={"form-group"}>
                     <label>Directory Name</label>
-                        <input type={"text"} className={"form-control"} value={popup.directoryName} maxLength={32} placeholder={"Enter name…"}
+                    <input type={"text"} className={"form-control"} value={popup.directoryName} maxLength={32}
+                           placeholder={"Enter name…"}
                            onChange={(e) => onPopupChange(e, "directoryName")}/>
                 </div> : <></>
             }
@@ -374,33 +428,39 @@ export function FileBrowser(props) {
                         fetchFiles();
                     }
                 });
-            } else if (popup.type === "upload") {
-                onUpload();
             }
         }
 
         onPopupClose();
     }
 
+    function removeUploadedFiles() {
+        let newFiles = filesToUpload.filter(file => !file.progress || file.progress < 1.0);
+        if (newFiles.length !== filesToUpload.length) {
+            setFilesToUpload(newFiles);
+        }
+    }
+
     function fetchFiles() {
+        let promise;
+
         if (tokenObj.valid) {
-            api.validateToken(tokenObj.value).then((res) => {
+            promise = api.validateToken(tokenObj.value);
-                if (res) {
-                    onFetchFiles(res.files);
-                } else {
-                    pushAlert(res);
-                }
-            });
         } else if (api.loggedIn) {
-            api.listFiles().then((res) => {
+            promise = api.listFiles()
+        } else {
+            return; // should never happen
+        }
+
+        promise.then((res) => {
             if (res) {
                 onFetchFiles(res.files);
+                removeUploadedFiles();
             } else {
                 pushAlert(res);
             }
         });
     }
-    }
 
     function onRemoveUploadedFile(e, i) {
         e.stopPropagation();
@@ -436,12 +496,21 @@ export function FileBrowser(props) {
         }
     }
 
-    function onUpload() {
+    function onUploadProgress(event, fileIndex) {
+        if (fileIndex < filesToUpload.length) {
+            let files = filesToUpload.slice();
+            files[fileIndex].progress = event.loaded >= event.total ? 1 : event.loaded / event.total;
+            setFilesToUpload(files);
+        }
+    }
+
+    function onUpload(fileIndex) {
         let token = (api.loggedIn ? null : tokenObj.value);
         let parentId = ((!api.loggedIn || popup.directory === 0) ? null : popup.directory);
-        api.upload(filesToUpload, token, parentId).then((res) => {
+        const file = filesToUpload[fileIndex];
+        api.upload(file, token, parentId, (e) => onUploadProgress(e, fileIndex)).then((res) => {
             if (res.success) {
-                setFilesToUpload([]);
+                // setFilesToUpload([]);
                 fetchFiles();
             } else {
                 pushAlert(res);