Motivation
Once I had a weird experience with large images and some stuff like images and react-dropzone
. It was too laggy with large ones and it blocked some UI elements.
Prerequisites
- react and stuff chained with it
- react-dropzone
Problematic
I have written an example with the default preset for react-dropzone
and just trying to upload some large img.
First code block (such as default preset):
import { useCallback, useState } from 'react'
import { useDropzone } from 'react-dropzone'
export const Dropzone = () => {
const [state, setState] = useState<string | undefined>(undefined)
const onDrop = useCallback((acceptedFiles: File[]) => {
acceptedFiles.forEach((file) => {
const reader = new FileReader()
reader.onload = () => {
const result = reader.result as any
setState(result)
}
reader.readAsDataURL(file)
})
}, [])
const { getRootProps, getInputProps } = useDropzone({ onDrop })
return (
<div {...getRootProps()}>
<input {...getInputProps()} />
<p>Drag 'n' drop some files here, or click to select files</p>
{state && <img src={state} style={{ width: 200, height: 200 }} />}
</div>
)
}
We can try to use input while we trying to upload an image and ... it's gone.
So I tried many things and maybe u can provide ur own solutions to comments or will create another article about it, will appreciate it.
Solution
The solution is to use Web Worker
to unload our operation.
The preload by new Image()
does not work.
Web Worker has no Image
at all, though.
worker.js
onmessage = async function (event) {
const response = await fetch(event.data.result)
const blob = await response.blob()
postMessage(URL.createObjectURL(blob))
}
index.tsx
import { useCallback, useEffect, useState } from 'react'
import { useDropzone } from 'react-dropzone'
export const Dropzone = () => {
const [state, setState] = useState<string | undefined>(undefined)
const [worker, setWorker] = useState<Worker | null>(null)
const onDrop = useCallback(
(acceptedFiles: File[]) => {
acceptedFiles.forEach((file) => {
const reader = new FileReader()
reader.onload = () => {
const result = reader.result as string
if (worker) {
worker.postMessage({ result })
}
}
reader.readAsDataURL(file)
})
},
[worker]
)
const { getRootProps, getInputProps } = useDropzone({ onDrop })
useEffect(() => {
const workerInstance = new Worker(new URL('worker.js', import.meta.url))
workerInstance.onmessage = function ({ data }) {
setState(data)
}
setWorker(workerInstance)
return () => workerInstance.terminate()
}, [])
return (
<div {...getRootProps()}>
<input {...getInputProps()} />
<p>Drag 'n' drop some files here, or click to select files</p>
{state && <img src={state} style={{ width: 200, height: 200 }} />}
</div>
)
}
Top comments (1)
Thanks for sharing