Pass one at unfucking the stupid file encoding issues

Author: DaneEveritt

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

@@ -72,7 +72,7 @@ public function directory(ListFilesRequest $request, Server $server): array
     {
         $contents = $this->fileRepository
             ->setServer($server)
-            ->getDirectory($this->encode($request->get('directory') ?? '/'));
+            ->getDirectory(rawurldecode($request->get('directory') ?? '/'));
 
         return $this->fractal->collection($contents)
             ->transformWith($this->getTransformer(FileObjectTransformer::class))
@@ -93,7 +93,7 @@ public function contents(GetFileContentsRequest $request, Server $server): Respo
     {
         return new Response(
             $this->fileRepository->setServer($server)->getContent(
-                $this->encode($request->get('file')), config('pterodactyl.files.max_edit_size')
+                rawurldecode($request->get('file')), config('pterodactyl.files.max_edit_size')
             ),
             Response::HTTP_OK,
             ['Content-Type' => 'text/plain']

app/Transformers/Daemon/FileObjectTransformer.php

@@ -23,7 +23,7 @@ class FileObjectTransformer extends BaseDaemonTransformer
     public function transform(array $item)
     {
         return [
-            'name' => Arr::get($item, 'name'),
+            'name' => rawurlencode(Arr::get($item, 'name')),
             'mode' => Arr::get($item, 'mode'),
             'mode_bits' => Arr::get($item, 'mode_bits'),
             'size' => Arr::get($item, 'size'),

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

@@ -3,7 +3,7 @@ import http from '@/api/http';
 export default (server: string, file: string): Promise<string> => {
     return new Promise((resolve, reject) => {
         http.get(`/api/client/servers/${server}/files/contents`, {
-            params: { file: encodeURI(decodeURI(file)) },
+            params: { file },
             transformResponse: res => res,
             responseType: 'text',
         })

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

@@ -18,7 +18,9 @@ export interface FileObject {
 
 export default async (uuid: string, directory?: string): Promise<FileObject[]> => {
     const { data } = await http.get(`/api/client/servers/${uuid}/files/list`, {
-        params: { directory: encodeURI(directory ?? '/') },
+        // At this point the directory is still encoded so we need to decode it since axios
+        // will automatically re-encode this value before sending it along in the request.
+        params: { directory: decodeURI(directory ?? '/') },
     });
 
     return (data.data || []).map(rawDataToFileObject);

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

@@ -2,7 +2,7 @@ import http from '@/api/http';
 
 export default async (uuid: string, file: string, content: string): Promise<void> => {
     await http.post(`/api/client/servers/${uuid}/files/write`, content, {
-        params: { file: encodeURI(decodeURI(file)) },
+        params: { file },
         headers: {
             'Content-Type': 'text/plain',
         },

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

@@ -61,7 +61,7 @@ export default () => {
         setLoading(true);
         clearFlashes('files:view');
         fetchFileContent()
-            .then(content => saveFileContents(uuid, name || hash.replace(/^#/, ''), content))
+            .then(content => saveFileContents(uuid, name || decodeURI(hash.replace(/^#/, '')), content))
             .then(() => {
                 if (name) {
                     history.push(`/server/${id}/files/edit#/${name}`);

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { ServerContext } from '@/state/server';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
 import { cleanDirectoryPath } from '@/helpers';
 import tw from 'twin.macro';
 
@@ -14,14 +14,28 @@ export default ({ renderLeft, withinFileEditor, isNewFile }: Props) => {
     const [ file, setFile ] = useState<string | null>(null);
     const id = ServerContext.useStoreState(state => state.server.data!.id);
     const directory = ServerContext.useStoreState(state => state.files.directory);
+    const { hash } = useLocation();
 
     useEffect(() => {
-        const parts = cleanDirectoryPath(window.location.hash).split('/');
+        let pathHash = cleanDirectoryPath(hash);
+        try {
+            pathHash = decodeURI(pathHash);
+        } catch (e) {
+            console.warn('Error decoding URL parts in hash:', e);
+        }
 
         if (withinFileEditor && !isNewFile) {
-            setFile(parts.pop() || null);
+            let name = pathHash.split('/').pop() || null;
+            if (name) {
+                try {
+                    name = decodeURIComponent(name);
+                } catch (e) {
+                    console.warn('Error decoding filename:', e);
+                }
+            }
+            setFile(name);
         }
-    }, [ withinFileEditor, isNewFile ]);
+    }, [ withinFileEditor, isNewFile, hash ]);
 
     const breadcrumbs = (): { name: string; path?: string }[] => directory.split('/')
         .filter(directory => !!directory)
@@ -51,16 +65,16 @@ export default ({ renderLeft, withinFileEditor, isNewFile }: Props) => {
                                 to={`/server/${id}/files#${crumb.path}`}
                                 css={tw`px-1 text-neutral-200 no-underline hover:text-neutral-100`}
                             >
-                                {crumb.name}
+                                {decodeURIComponent(crumb.name)}
                             </NavLink>/
                         </React.Fragment>
                         :
-                        <span key={index} css={tw`px-1 text-neutral-300`}>{crumb.name}</span>
+                        <span key={index} css={tw`px-1 text-neutral-300`}>{decodeURIComponent(crumb.name)}</span>
                 ))
             }
             {file &&
             <React.Fragment>
-                <span css={tw`px-1 text-neutral-300`}>{decodeURI(file)}</span>
+                <span css={tw`px-1 text-neutral-300`}>{file}</span>
             </React.Fragment>
             }
         </div>

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

@@ -39,7 +39,7 @@ export default () => {
     useEffect(() => {
         clearFlashes('files');
         setSelectedFiles([]);
-        setDirectory(hash.length > 0 ? decodeURI(hash) : '/');
+        setDirectory(hash.length > 0 ? hash : '/');
     }, [ hash ]);
 
     useEffect(() => {

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

@@ -24,7 +24,7 @@ const Clickable: React.FC<{ file: FileObject }> = memo(({ file, children }) => {
     const history = useHistory();
     const match = useRouteMatch();
 
-    const destination = cleanDirectoryPath(`${directory}/${file.name}`).split('/').map(v => encodeURI(v)).join('/');
+    const destination = cleanDirectoryPath(`${directory}/${file.name}`).split('/').join('/');
 
     const onRowClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
         // Don't rely on the onClick to work with the generated URL. Because of the way this
@@ -72,7 +72,7 @@ const FileObjectRow = ({ file }: { file: FileObject }) => (
                 }
             </div>
             <div css={tw`flex-1 truncate`}>
-                {file.name}
+                {decodeURIComponent(file.name)}
             </div>
             {file.isFile &&
             <div css={tw`w-1/6 text-right mr-4 hidden sm:block`}>

resources/scripts/plugins/useFileManagerSwr.ts

@@ -7,8 +7,6 @@ export default () => {
     const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const directory = ServerContext.useStoreState(state => state.files.directory);
 
-    console.log('firing');
-
     return useSWR<FileObject[]>(
         `${uuid}:files:${directory}`,
         () => loadDirectory(uuid, cleanDirectoryPath(directory)),