removed buffer polyfill, rewrite with js web standards

frontend/package.json

@@ -17,22 +17,19 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
-    "react-router-dom": "^6.13.0",
+    "react-router-dom": "^6.17.0",
     "recoil": "^0.7.7",
-    "rxjs": "^7.8.1",
-    "uuid": "^9.0.0"
+    "rxjs": "^7.8.1"
   },
   "devDependencies": {
     "@modyfi/vite-plugin-yaml": "^1.0.4",
-    "@types/node": "^20.3.1",
-    "@types/react": "^18.2.13",
-    "@types/react-dom": "^18.2.6",
-    "@types/react-helmet": "^6.1.6",
+    "@types/node": "^20.8.7",
+    "@types/react": "^18.2.29",
+    "@types/react-dom": "^18.2.14",
+    "@types/react-helmet": "^6.1.8",
     "@types/react-router-dom": "^5.3.3",
-    "@types/uuid": "^9.0.2",
-    "@vitejs/plugin-react-swc": "^3.3.2",
-    "buffer": "^6.0.3",
-    "typescript": "^5.1.3",
-    "vite": "^4.4.7"
+    "@vitejs/plugin-react-swc": "^3.4.0",
+    "typescript": "^5.2.2",
+    "vite": "^4.5.0"
   }
 }

frontend/src/components/DownloadDialog.tsx

@@ -14,8 +14,7 @@ import {
   MenuItem,
   Paper,
   Select,
-  TextField,
-  styled
+  TextField
 } from '@mui/material'
 import AppBar from '@mui/material/AppBar'
 import Dialog from '@mui/material/Dialog'
@@ -23,7 +22,6 @@ import Slide from '@mui/material/Slide'
 import Toolbar from '@mui/material/Toolbar'
 import Typography from '@mui/material/Typography'
 import { TransitionProps } from '@mui/material/transitions'
-import { Buffer } from 'buffer'
 import {
   forwardRef,
   useMemo,
@@ -32,6 +30,7 @@ import {
   useTransition
 } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
+import { downloadTemplateState } from '../atoms/downloadTemplate'
 import { settingsState } from '../atoms/settings'
 import { availableDownloadPathsState, connectedState } from '../atoms/status'
 import FormatsGrid from '../components/FormatsGrid'
@@ -40,7 +39,6 @@ import { useRPC } from '../hooks/useRPC'
 import { CliArguments } from '../lib/argsParser'
 import type { DLMetadata } from '../types'
 import { isValidURL, toFormatArgs } from '../utils'
-import { downloadTemplateState } from '../atoms/downloadTemplate'
 
 const Transition = forwardRef(function Transition(
   props: TransitionProps & {
@@ -169,19 +167,18 @@ export default function DownloadDialog({
     localStorage.setItem("last-input-args", e.target.value)
   }
 
-  const parseUrlListFile = (event: any) => {
-    const urlList = event.target.files
-    const reader = new FileReader()
-    reader.addEventListener('load', $event => {
-      const base64 = $event.target?.result!.toString().split(',')[1]
-      Buffer.from(base64!, 'base64')
-        .toString()
-        .trimEnd()
-        .split('\n')
-        .filter(_url => isValidURL(_url))
-        .forEach(_url => sendUrl(_url))
-    })
-    reader.readAsDataURL(urlList[0])
+  const parseUrlListFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.currentTarget.files
+    if (!files || files.length < 1) {
+      return
+    }
+
+    const file = await files[0].text()
+
+    file
+      .split('\n')
+      .filter(u => isValidURL(u))
+      .forEach(u => sendUrl(u))
   }
 
   const resetInput = () => {
@@ -191,12 +188,6 @@ export default function DownloadDialog({
     }
   }
 
-  /* -------------------- styled components -------------------- */
-
-  const Input = styled('input')({
-    display: 'none',
-  })
-
   return (
     <div>
       <Dialog
@@ -249,11 +240,12 @@ export default function DownloadDialog({
                       endAdornment: (
                         <InputAdornment position="end">
                           <label htmlFor="icon-button-file">
-                            <Input
+                            <input
+                              hidden
                               id="icon-button-file"
                               type="file"
                               accept=".txt"
-                              onChange={parseUrlListFile}
+                              onChange={e => parseUrlListFile(e)}
                             />
                             <IconButton
                               color="primary"

frontend/src/views/Archive.tsx

@@ -26,7 +26,6 @@ import FolderIcon from '@mui/icons-material/Folder'
 import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile'
 import VideoFileIcon from '@mui/icons-material/VideoFile'
 
-import { Buffer } from 'buffer'
 import { useEffect, useMemo, useState, useTransition } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useRecoilValue } from 'recoil'
@@ -138,7 +137,11 @@ export default function Downloaded() {
   }, [serverAddr])
 
   const onFileClick = (path: string) => startTransition(() => {
-    window.open(`${serverAddr}/archive/d/${Buffer.from(path).toString('hex')}`)
+    const encoded = btoa(
+      String.fromCodePoint(...new TextEncoder().encode(path))
+    )
+
+    window.open(`${serverAddr}/archive/d/${encoded}`)
   })
 
   const onFolderClick = (path: string) => startTransition(() => {

server/handlers/archive.go

@@ -1,7 +1,8 @@
 package handlers
 
 import (
-	"encoding/hex"
+	"encoding/base64"
+	"fmt"
 	"net/http"
 	"os"
 	"path/filepath"
@@ -129,22 +130,23 @@ func SendFile(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	decoded, err := hex.DecodeString(path)
+	decoded, err := base64.StdEncoding.DecodeString(path)
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusBadRequest)
 		return
 	}
 
 	decodedStr := string(decoded)
+	fmt.Println(decodedStr)
 
 	root := config.Instance().GetConfig().DownloadPath
 
 	// TODO: further path / file validations
 	if strings.Contains(filepath.Dir(decodedStr), root) {
-		// ctx.Response().Header.Set(
-		// 	"Content-Disposition",
-		// 	"inline; filename="+filepath.Base(decodedStr),
-		// )
+		w.Header().Add(
+			"Content-Disposition",
+			"inline; filename="+filepath.Base(decodedStr),
+		)
 
 		http.ServeFile(w, r, decodedStr)
 	}