TASK: adjust upload files hook to use tus client

Author: andrehoffmann30

Classes/Controller/MediaController.php

@@ -79,6 +79,7 @@ public function indexAction(): void
      * @throws Exception
      * @throws FilesException
      * @throws ReflectionException
+     * @Flow\SkipCsrfProtection
      */
     public function uploadAction(): void
     {
@@ -87,7 +88,7 @@ public function uploadAction(): void
             Files::createDirectoryRecursively($uploadDirectory);
         }
 
-        $server = new Server($this->partialUploadFileCacheAdapater);
+        $server = new Server();
         $server->setApiPath($this->controllerContext->getRequest()->getHttpRequest()->getUri()->getPath())
             ->setUploadDir($uploadDirectory);
         // @todo: Set upload dir to data/temporary

Classes/Tus/PartialUploadFileCacheAdapter.php

@@ -86,6 +86,7 @@ public function deleteAll(array $keys): bool
      */
     public function getTtl(): int
     {
+        return 60*60*24;
         return (int)ObjectAccess::getProperty($this->partialUploadFileCache->getBackend(), 'defaultLifetime', true);
     }
 

Resources/Private/JavaScript/core/package.json

@@ -4,7 +4,8 @@
   "license": "GNU GPLv3",
   "private": true,
   "dependencies": {
-    "pubsub-js": "^1.9.3"
+    "pubsub-js": "^1.9.3",
+    "tus-js-client": "^2.3.0"
   },
   "devDependencies": {
     "@types/pubsub-js": "^1.8.2"

Resources/Private/JavaScript/core/src/hooks/useUploadFiles.ts

@@ -1,17 +1,26 @@
-import { useMutation } from '@apollo/client';
+import * as tus from 'tus-js-client';
+import { UploadOptions } from 'tus-js-client';
 
-import { UPLOAD_FILES } from '../mutations';
-import { FileUploadResult } from '../interfaces';
+export default function useUploadFiles(options: UploadOptions) {
+    console.log('HI');
+    console.log(options.endpoint);
+    const uploadFiles = (files: File[]) => {
+        files.forEach((file) => {
+            options.metadata = {
+                filename: file.name,
+                filetype: file.type,
+            };
+            console.log(options);
+            const upload = new tus.Upload(file, options);
 
-export default function useUploadFiles() {
-    const [action, { error, data, loading }] = useMutation<{ uploadFiles: FileUploadResult[] }>(UPLOAD_FILES);
-
-    const uploadFiles = (files: File[]) =>
-        action({
-            variables: {
-                files,
-            },
+            upload.findPreviousUploads().then((previousUploads) => {
+                if(previousUploads.length) {
+                    upload.resumeFromPreviousUpload(previousUploads[0]);
+                }
+                upload.start();
+            });
         });
+    };
 
-    return { uploadFiles, uploadState: data?.uploadFiles || [], error, loading };
+    return { uploadFiles };
 }

Resources/Private/JavaScript/media-module/src/components/Dialogs/UploadDialog.tsx

@@ -124,12 +124,29 @@ interface UploadedFile extends File {
 }
 
 const UploadDialog: React.FC = () => {
+    const [loading, setLoading] = useState(false);
+    const [uploadState, setUploadState] = useState([]);
     const { translate } = useIntl();
     const Notify = useNotify();
     const [dialogVisible, setDialogVisible] = useRecoilState(uploadDialogVisibleState);
     const { dummyImage } = useMediaUi();
     const { config } = useConfigQuery();
-    const { uploadFiles, uploadState, loading } = useUploadFiles();
+    const { uploadFiles } = useUploadFiles({
+        endpoint: 'http://localhost:8081/neos/management/mediaui/upload',
+        onError: (error) => {
+            Notify.error(translate('fileUpload.error', 'Upload failed'), error.message);
+        },
+        onSuccess: () => {
+            Notify.ok(translate('uploadDialog.uploadFinished', 'Upload finished'));
+            setLoading(false);
+            refetchAssets();
+        },
+        onProgress: (bytesUploaded, bytesTotal) => {
+            setLoading(true);
+            const percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2);
+            console.log(percentage);
+        },
+    });
     const { refetchAssets } = useMediaUi();
     const [files, setFiles] = useState<UploadedFile[]>([]);
     const uploadPossible = !loading && files.length > 0;
@@ -170,14 +187,7 @@ const UploadDialog: React.FC = () => {
 
     const handleUpload = useCallback(() => {
         uploadFiles(files)
-            .then(() => {
-                Notify.ok(translate('uploadDialog.uploadFinished', 'Upload finished'));
-                refetchAssets();
-            })
-            .catch((error) => {
-                Notify.error(translate('fileUpload.error', 'Upload failed'), error);
-            });
-    }, [uploadFiles, Notify, translate, files, refetchAssets]);
+    }, [uploadFiles, files]);
 
     const handleRequestClose = useCallback(() => {
         setFiles([]);