agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-11-12 13:13:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

Focus file upload modal on open (#32188)

Browse Source 
GitOrigin-RevId: 89ad65e4ad5af59d46f04ca4e057f88120e8293f
This commit is contained in:
Alf Eaton
2026-03-20 09:06:13 +00:00
committed by Copybot
parent 46d1064837
commit 616f99fece
2 changed files with 46 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-upload-doc.tsx
+44 -25
View File
@@ -1,5 +1,5 @@
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { useCallback, useEffect, useState } from 'react' import { useCallback, useEffect, useRef, useState } from 'react'
import Uppy from '@uppy/core' import Uppy from '@uppy/core'
import XHRUpload from '@uppy/xhr-upload' import XHRUpload from '@uppy/xhr-upload'
import { Dashboard } from '@uppy/react' import { Dashboard } from '@uppy/react'
@@ -35,6 +35,7 @@ export default function FileTreeUploadDoc() {
const [conflicts, setConflicts] = useState<Conflict[]>([]) const [conflicts, setConflicts] = useState<Conflict[]>([])
const [folderConflicts, setFolderConflicts] = useState<Conflict[]>([]) const [folderConflicts, setFolderConflicts] = useState<Conflict[]>([])
const [overwrite, setOverwrite] = useState(false) const [overwrite, setOverwrite] = useState(false)
const dashboardRef = useRef<HTMLDivElement>(null)
const maxNumberOfFiles = 180 const maxNumberOfFiles = 180
const maxFileSize = getMeta('ol-ExposedSettings').maxUploadSize const maxFileSize = getMeta('ol-ExposedSettings').maxUploadSize
@@ -263,6 +264,22 @@ export default function FileTreeUploadDoc() {
!overwrite && !showFolderUploadConflicts && conflicts.length > 0 !overwrite && !showFolderUploadConflicts && conflicts.length > 0
const showDashboard = !showFileUploadConfilcts && !showFolderUploadConflicts const showDashboard = !showFileUploadConfilcts && !showFolderUploadConflicts
useEffect(() => {
if (!showDashboard) {
return
}
const frameId = window.requestAnimationFrame(() => {
dashboardRef.current
?.querySelector<HTMLButtonElement>('.uppy-Dashboard-browse')
?.focus()
})
return () => {
window.cancelAnimationFrame(frameId)
}
}, [showDashboard])
return ( return (
<> <>
{error && ( {error && (
@@ -284,30 +301,32 @@ export default function FileTreeUploadDoc() {
/> />
)} )}
{showDashboard && ( {showDashboard && (
<Dashboard <div ref={dashboardRef}>
uppy={uppy} <Dashboard
showProgressDetails uppy={uppy}
// note={`Up to ${maxNumberOfFiles} files, up to ${maxFileSize / (1024 * 1024)}MB`} showProgressDetails
height={400} // note={`Up to ${maxNumberOfFiles} files, up to ${maxFileSize / (1024 * 1024)}MB`}
width="100%" height={400}
showLinkToFileUploadResult={false} width="100%"
proudlyDisplayPoweredByUppy={false} showLinkToFileUploadResult={false}
// allow files or folders to be selected proudlyDisplayPoweredByUppy={false}
fileManagerSelectionType="both" // allow files or folders to be selected
locale={{ fileManagerSelectionType="both"
strings: { locale={{
// Text to show on the droppable area. strings: {
// `%{browse}` is replaced with a link that opens the system file selection dialog. // Text to show on the droppable area.
// TODO: 'drag_here' or 'drop_files_here_to_upload'? // `%{browse}` is replaced with a link that opens the system file selection dialog.
// dropHereOr: `${t('drag_here')} ${t('or')} %{browse}`, // TODO: 'drag_here' or 'drop_files_here_to_upload'?
dropPasteBoth: `Drop or paste your files, folder, or images here. %{browseFiles} or %{browseFolders} from your computer.`, // dropHereOr: `${t('drag_here')} ${t('or')} %{browse}`,
// Used as the label for the link that opens the system file selection dialog. dropPasteBoth: `Drop or paste your files, folder, or images here. %{browseFiles} or %{browseFolders} from your computer.`,
// browseFiles: t('select_from_your_computer') // Used as the label for the link that opens the system file selection dialog.
browseFiles: 'Select files', // browseFiles: t('select_from_your_computer')
browseFolders: 'select a folder', browseFiles: 'Select files',
}, browseFolders: 'select a folder',
}} },
/> }}
/>
</div>
)} )}
</> </>
) )
services/web/test/frontend/features/file-tree/components/file-tree-create/file-tree-modal-create-file.spec.tsx
+2 -1
View File
@@ -530,13 +530,14 @@ describe('<FileTreeModalCreateFile/>', function () {
// the submit button should not be present // the submit button should not be present
cy.findByRole('button', { name: 'Create' }).should('not.exist') cy.findByRole('button', { name: 'Create' }).should('not.exist')
cy.findByRole('button', { name: 'Select files' }).should('be.focused')
cy.wrap(null).then(() => { cy.wrap(null).then(() => {
const clipboardData = new DataTransfer() const clipboardData = new DataTransfer()
clipboardData.items.add( clipboardData.items.add(
new File(['test'], 'test.tex', { type: 'text/plain' }) new File(['test'], 'test.tex', { type: 'text/plain' })
) )
cy.findByLabelText('Uppy Dashboard').trigger('paste', { clipboardData }) cy.focused().trigger('paste', { clipboardData })
}) })
cy.wait('@uploadFile') cy.wait('@uploadFile')