mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-24 06:35:49 +03:00
🐛 fix Windows bug with the admin file upload widget (#21687)
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.
This commit is contained in:
parent
2016e6a6df
commit
ebd98d005a
@ -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` : ''}>
|
||||
|
Loading…
Reference in New Issue
Block a user