Skip to content

Commit

Permalink
🐛 fix Windows bug with the admin file upload widget (#21687)
Browse files Browse the repository at this point in the history
closes #21439

On Windows 10/Chrome (but maybe nowhere else?), attempting to drag a
file into any of the drop targets in the admin panel resulted in
flickering behavior, and generally dropping didn't actually trigger the
upload.

I thought originally it was a problem with the size of the drop target,
but it actually appears to be a rerender bug. In brief, handleDragging
and handleStopDragging were firing repeatedly, and each fire triggered a
rerender, that added or removed a div from the file upload widget.

I suspect some browser-specific difference in how drag events fire is to
blame.

This PR moves the logic to change the classes applied to the div, rather
than changing whether the div is present.

I have manually tested with Windows 10 in the users import, theme
import, and content import widgets. Styles are preserved (although I
think they could be improved, as the grey outline is really faint) and
uploading now works consistently, instead of mostly triggering display
of the raw file most of the time.
  • Loading branch information
cathysarisky authored Nov 22, 2024
1 parent 2016e6a commit ebd98d0
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion apps/admin-x-design-system/src/global/form/FileUpload.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ const FileUpload: React.FC<FileUploadProps> = ({id, onUpload, children, style, u

return (
<label className={clsx('relative', className)} htmlFor={id} style={style} onDragEnter={handleDragging} onDragLeave={handleStopDragging} onDragOver={handleDragging} onDrop={handleDrop} {...props}>
{isDragging && <div className={clsx('absolute inset-1 rounded border-2 border-dashed border-grey-400/25', dragIndicatorClassName)} />}
<div className={clsx({'absolute inset-1 rounded': true, 'border-2 border-dashed border-grey-400/25': isDragging}, isDragging && [dragIndicatorClassName])} />
<input key={fileKey} ref={inputRef || null} id={id} type="file" hidden onChange={handleFileChange} />
{(typeof children === 'string') ?
<div className={!unstyled ? `inline-flex h-[34px] cursor-pointer items-center justify-center rounded px-4 text-sm font-semibold hover:bg-grey-100 dark:text-white dark:hover:bg-grey-900` : ''}>
Expand Down

0 comments on commit ebd98d0

Please sign in to comment.