diff --git a/src/app/page.tsx b/src/app/page.tsx index f8d06d28..e912b02a 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,6 +1,6 @@ 'use client' -import React, { JSX, useCallback, useState } from 'react' +import React, { JSX, useCallback, useState, useRef } from 'react' import WebRTCPeerProvider from '../components/WebRTCProvider' import DropZone from '../components/DropZone' import UploadFileList from '../components/UploadFileList' @@ -59,6 +59,7 @@ function ConfirmUploadState({ onCancel, onStart, onRemoveFile, + onAddMoreFiles, }: { uploadedFiles: UploadedFile[] password: string @@ -66,8 +67,26 @@ function ConfirmUploadState({ onCancel: () => void onStart: () => void onRemoveFile: (index: number) => void + onAddMoreFiles: (files: File[]) => void }): JSX.Element { const fileListData = useUploaderFileListData(uploadedFiles) + const fileInputRef = useRef(null) + + const handleAddMoreClick = useCallback(() => { + fileInputRef.current?.click() + }, []) + + const handleFileInputChange = useCallback( + (e: React.ChangeEvent) => { + if (e.target.files) { + const files = Array.from(e.target.files) as UploadedFile[] + onAddMoreFiles(files) + e.target.value = '' + } + }, + [onAddMoreFiles], + ) + return ( @@ -75,6 +94,21 @@ function ConfirmUploadState({ {pluralize(uploadedFiles.length, 'file', 'files')}. +
+ +
+
@@ -113,7 +147,7 @@ export default function UploadPage(): JSX.Element { const [uploading, setUploading] = useState(false) const handleDrop = useCallback((files: UploadedFile[]): void => { - setUploadedFiles(files) + setUploadedFiles((currentFiles) => [...currentFiles, ...files]) }, []) const handleChangePassword = useCallback((pw: string) => { @@ -137,6 +171,13 @@ export default function UploadPage(): JSX.Element { setUploadedFiles((fs) => fs.filter((_, i) => i !== index)) }, []) + const handleAddMoreFiles = useCallback((files: File[]) => { + setUploadedFiles((currentFiles) => [ + ...currentFiles, + ...(files as UploadedFile[]), + ]) + }, []) + if (!uploadedFiles.length) { return } @@ -150,6 +191,7 @@ export default function UploadPage(): JSX.Element { onCancel={handleCancel} onStart={handleStart} onRemoveFile={handleRemoveFile} + onAddMoreFiles={handleAddMoreFiles} /> ) }