cameleer/cameleer-server
1
0
Fork 0
Code Issues 45 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: use opacity-based hidden input for file upload instead of display:none
All checks were successful
CI / cleanup-branch (push) Has been skipped
Details
CI / build (push) Successful in 1m25s
Details
CI / docker (push) Successful in 1m14s
Details
CI / deploy-feature (push) Has been skipped
Details
CI / deploy (push) Successful in 38s
Details

Browse Source 
Some browsers block programmatic .click() on display:none inputs.
Using position:absolute + opacity:0 keeps the input in the render tree.
Also added type="button" to prevent any form-submission interference.
Applied to both create page and detail view file inputs.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-08 21:17:50 +02:00
parent 8b3c4ba2fe
commit 19da9b9f9f
1 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
ui/src/pages/AppsTab/AppsTab.tsx
View File

@@ -302,9 +302,10 @@ function CreateAppView({ environments, selectedEnv }: { environments: Environmen
<span className={styles.configLabel}>Application JAR</span> <span className={styles.configLabel}>Application JAR</span>
<div className={styles.fileRow}> <div className={styles.fileRow}>
<input ref={fileInputRef} type="file" accept=".jar" style={{ display: 'none' }} <input ref={fileInputRef} type="file" accept=".jar"
style={{ position: 'absolute', width: 0, height: 0, opacity: 0, overflow: 'hidden' }}
onChange={(e) => setFile(e.target.files?.[0] ?? null)} /> onChange={(e) => setFile(e.target.files?.[0] ?? null)} />
<Button size="sm" variant="secondary" onClick={() => fileInputRef.current?.click()} disabled={busy}> <Button size="sm" variant="secondary" type="button" onClick={() => fileInputRef.current?.click()} disabled={busy}>
{file ? 'Change file' : 'Select JAR'} {file ? 'Change file' : 'Select JAR'}
</Button> </Button>
{file && <span className={styles.fileName}>{file.name} ({formatBytes(file.size)})</span>} {file && <span className={styles.fileName}>{file.name} ({formatBytes(file.size)})</span>}
@@ -539,8 +540,10 @@ function AppDetailView({ appId, environments, selectedEnv }: { appId: string; en
</div> </div>
</div> </div>
<div className={styles.detailActions}> <div className={styles.detailActions}>
<input ref={fileInputRef} type="file" accept=".jar" style={{ display: 'none' }} onChange={handleUpload} /> <input ref={fileInputRef} type="file" accept=".jar"
<Button size="sm" variant="primary" onClick={() => fileInputRef.current?.click()} loading={uploadJar.isPending}>Upload JAR</Button> style={{ position: 'absolute', width: 0, height: 0, opacity: 0, overflow: 'hidden' }}
onChange={handleUpload} />
<Button size="sm" variant="primary" type="button" onClick={() => fileInputRef.current?.click()} loading={uploadJar.isPending}>Upload JAR</Button>
<Button size="sm" variant="danger" onClick={() => setDeleteConfirm(true)}>Delete App</Button> <Button size="sm" variant="danger" onClick={() => setDeleteConfirm(true)}>Delete App</Button>
</div> </div>
</div> </div>