Get basic file upload functionality working

Author: matthewpi

app/Http/Controllers/Api/Client/Servers/DownloadBackupController.php

@@ -82,7 +82,7 @@ public function __invoke(DownloadBackupRequest $request, Server $server, Backup
                 throw new BadRequestHttpException;
         }
 
-        return JsonResponse::create([
+        return new JsonResponse([
             'object' => 'signed_url',
             'attributes' => [
                 'url' => $url,

app/Http/Controllers/Api/Client/Servers/FileUploadController.php

@@ -0,0 +1,73 @@
+<?php
+
+namespace Pterodactyl\Http\Controllers\Api\Client\Servers;
+
+use Carbon\CarbonImmutable;
+use Pterodactyl\Models\User;
+use Pterodactyl\Models\Server;
+use Illuminate\Http\JsonResponse;
+use Pterodactyl\Services\Nodes\NodeJWTService;
+use Pterodactyl\Http\Controllers\Api\Client\ClientApiController;
+use Pterodactyl\Http\Requests\Api\Client\Servers\Files\UploadFileRequest;
+
+class FileUploadController extends ClientApiController
+{
+    /**
+     * @var \Pterodactyl\Services\Nodes\NodeJWTService
+     */
+    private $jwtService;
+
+    /**
+     * FileUploadController constructor.
+     *
+     * @param \Pterodactyl\Services\Nodes\NodeJWTService $jwtService
+     */
+    public function __construct(
+        NodeJWTService $jwtService
+    ) {
+        parent::__construct();
+
+        $this->jwtService = $jwtService;
+    }
+
+    /**
+     * Returns a url where files can be uploaded to.
+     *
+     * @param \Pterodactyl\Http\Requests\Api\Client\Servers\Files\UploadFileRequest $request
+     * @param \Pterodactyl\Models\Server $server
+     *
+     * @return \Illuminate\Http\JsonResponse
+     */
+    public function __invoke(UploadFileRequest $request, Server $server)
+    {
+        return new JsonResponse([
+            'object' => 'signed_url',
+            'attributes' => [
+                'url' => $this->getUploadUrl($server, $request->user()),
+            ],
+        ]);
+    }
+
+    /**
+     * Returns a url where files can be uploaded to.
+     *
+     * @param \Pterodactyl\Models\Server $server
+     * @param \Pterodactyl\Models\User $user
+     * @return string
+     */
+    protected function getUploadUrl(Server $server, User $user)
+    {
+        $token = $this->jwtService
+            ->setExpiresAt(CarbonImmutable::now()->addMinutes(15))
+            ->setClaims([
+                'server_uuid' => $server->uuid,
+            ])
+            ->handle($server->node, $user->id . $server->uuid);
+
+        return sprintf(
+            '%s/upload/file?token=%s',
+            $server->node->getConnectionAddress(),
+            $token->__toString()
+        );
+    }
+}

app/Http/Requests/Api/Client/Servers/Files/UploadFileRequest.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace Pterodactyl\Http\Requests\Api\Client\Servers\Files;
+
+use Pterodactyl\Models\Permission;
+use Pterodactyl\Http\Requests\Api\Client\ClientApiRequest;
+
+class UploadFileRequest extends ClientApiRequest
+{
+    /**
+     * @return string
+     */
+    public function permission()
+    {
+        return Permission::ACTION_FILE_CREATE;
+    }
+}

resources/scripts/api/server/files/getFileUploadUrl.ts

@@ -0,0 +1,9 @@
+import http from '@/api/http';
+
+export default (uuid: string): Promise<string> => {
+    return new Promise((resolve, reject) => {
+        http.get(`/api/client/servers/${uuid}/files/upload`)
+            .then(({ data }) => resolve(data.attributes.url))
+            .catch(reject);
+    });
+};

resources/scripts/components/server/files/UploadButton.tsx

@@ -1,6 +1,9 @@
+import axios from 'axios';
+import getFileUploadUrl from '@/api/server/files/getFileUploadUrl';
+import useServer from '@/plugins/useServer';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components/macro';
 
 const ModalMask = styled.div`
@@ -9,31 +12,71 @@ const ModalMask = styled.div`
 `;
 
 export default () => {
+    const { uuid } = useServer();
     const [ visible, setVisible ] = useState(false);
 
+    const handleEscapeEvent = (e: KeyboardEvent) => {
+        setVisible(false);
+    };
+
+    useEffect(() => {
+        window.addEventListener('keydown', handleEscapeEvent);
+
+        return () => window.removeEventListener('keydown', handleEscapeEvent);
+    }, [ visible ]);
+
     const onDragOver = (e: any) => {
         e.preventDefault();
-
-        //console.log(e);
     };
 
     const onDragEnter = (e: any) => {
         e.preventDefault();
-
-        //console.log(e);
     };
 
     const onDragLeave = (e: any) => {
         e.preventDefault();
-
-        //console.log(e);
     };
 
     const onFileDrop = (e: any) => {
         e.preventDefault();
 
-        const files = e.dataTransfer.files;
+        if (e.dataTransfer === undefined || e.dataTransfer === null) {
+            return;
+        }
+
+        const files: FileList = e.dataTransfer.files;
         console.log(files);
+
+        const formData = new FormData();
+
+        for (let i = 0; i < files.length; i++) {
+            console.log(files[i]);
+            // @ts-ignore
+            formData.append('files', files[i]);
+        }
+
+        console.log('getFileUploadUrl');
+        getFileUploadUrl(uuid)
+            .then(url => {
+                console.log(url);
+
+                // `${url}&directory=`
+                axios.post(url, formData, {
+                    headers: {
+                        'Content-Type': 'multipart/form-data',
+                    },
+                })
+                    .then(res => {
+                        console.log(res);
+                        setVisible(false);
+                    })
+                    .catch(error => {
+                        console.error(error);
+                    });
+            })
+            .catch(error => {
+                console.error(error);
+            });
     };
 
     return (

routes/api-client.php

@@ -62,6 +62,7 @@
         Route::post('/compress', 'Servers\FileController@compress');
         Route::post('/delete', 'Servers\FileController@delete');
         Route::post('/create-folder', 'Servers\FileController@create');
+        Route::get('/upload', 'Servers\FileUploadController');
     });
 
     Route::group(['prefix' => '/schedules'], function () {