Fix file and backup downloading to use URL returned by server

resources/scripts/api/server/backups/getBackupDownloadUrl.ts

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

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

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

resources/scripts/components/server/backups/BackupRow.tsx

@@ -9,8 +9,11 @@ import { faCloudDownloadAlt } from '@fortawesome/free-solid-svg-icons/faCloudDow
 import Modal, { RequiredModalProps } from '@/components/elements/Modal';
 import { bytesToHuman } from '@/helpers';
 import Can from '@/components/elements/Can';
-import { join } from "path";
 import useServer from '@/plugins/useServer';
+import getBackupDownloadUrl from '@/api/server/backups/getBackupDownloadUrl';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import useFlash from '@/plugins/useFlash';
+import { httpErrorToHuman } from '@/api/http';
 
 interface Props {
     backup: ServerBackup;
@@ -31,10 +34,29 @@ const DownloadModal = ({ checksum, ...props }: RequiredModalProps & { checksum:
 
 export default ({ backup, className }: Props) => {
     const { uuid } = useServer();
+    const { addError, clearFlashes } = useFlash();
+    const [ loading, setLoading ] = useState(false);
     const [ visible, setVisible ] = useState(false);
 
+    const getBackupLink = () => {
+        setLoading(true);
+        clearFlashes('backups');
+        getBackupDownloadUrl(uuid, backup.uuid)
+            .then(url => {
+                // @ts-ignore
+                window.location = url;
+                setVisible(true);
+            })
+            .catch(error => {
+                console.error(error);
+                addError({ key: 'backups', message: httpErrorToHuman(error) });
+            })
+            .then(() => setLoading(false));
+    };
+
     return (
         <div className={`grey-row-box flex items-center ${className}`}>
+            <SpinnerOverlay visible={loading} fixed={true}/>
             {visible &&
             <DownloadModal
                 visible={visible}
@@ -77,16 +99,12 @@ export default ({ backup, className }: Props) => {
                             <FontAwesomeIcon icon={faCloudDownloadAlt}/>
                         </div>
                         :
-                        <a
-                            href={`/api/client/servers/${uuid}/backups/${backup.uuid}/download`}
-                            target={'_blank'}
-                            onClick={() => {
-                                setVisible(true);
-                            }}
+                        <button
+                            onClick={() => getBackupLink()}
                             className={'text-sm text-neutral-300 p-2 transition-colors duration-250 hover:text-cyan-400'}
                         >
                             <FontAwesomeIcon icon={faCloudDownloadAlt}/>
-                        </a>
+                        </button>
                     }
                 </div>
             </Can>

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

@@ -15,6 +15,9 @@ import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import copyFile from '@/api/server/files/copyFile';
 import { httpErrorToHuman } from '@/api/http';
 import Can from '@/components/elements/Can';
+import getFileDownloadUrl from '@/api/server/files/getFileDownloadUrl';
+import useServer from '@/plugins/useServer';
+import useFlash from '@/plugins/useFlash';
 
 type ModalType = 'rename' | 'move';
 
@@ -26,7 +29,9 @@ export default ({ uuid }: { uuid: string }) => {
     const [ modal, setModal ] = useState<ModalType | null>(null);
     const [ posX, setPosX ] = useState(0);
 
-    const server = ServerContext.useStoreState(state => state.server.data!);
+    const server = useServer();
+    const { addError, clearFlashes } = useFlash();
+
     const file = ServerContext.useStoreState(state => state.files.contents.find(file => file.uuid === uuid));
     const directory = ServerContext.useStoreState(state => state.files.directory);
     const { removeFile, getDirectoryContents } = ServerContext.useStoreActions(actions => actions.files);
@@ -51,27 +56,41 @@ export default ({ uuid }: { uuid: string }) => {
 
     const doDeletion = () => {
         setShowSpinner(true);
+        clearFlashes('files');
         deleteFile(server.uuid, join(directory, file.name))
             .then(() => removeFile(uuid))
             .catch(error => {
                 console.error('Error while attempting to delete a file.', error);
+                addError({ key: 'files', message: httpErrorToHuman(error) });
                 setShowSpinner(false);
             });
     };
 
     const doCopy = () => {
         setShowSpinner(true);
+        clearFlashes('files');
         copyFile(server.uuid, join(directory, file.name))
             .then(() => getDirectoryContents(directory))
             .catch(error => {
                 console.error('Error while attempting to copy file.', error);
-                alert(httpErrorToHuman(error));
+                addError({ key: 'files', message: httpErrorToHuman(error) });
                 setShowSpinner(false);
             });
     };
 
     const doDownload = () => {
-        window.location = `/api/client/servers/${server.uuid}/files/download?file=${join(directory, file.name)}` as unknown as Location;
+        setShowSpinner(true);
+        clearFlashes('files');
+        getFileDownloadUrl(server.uuid, join(directory, file.name))
+            .then(url => {
+                // @ts-ignore
+                window.location = url;
+            })
+            .catch(error => {
+                console.error(error);
+                addError({ key: 'files', message: httpErrorToHuman(error) });
+            })
+            .then(() => setShowSpinner(false));
     };
 
     useEffect(() => {