diff --git a/webapp/src/components/StoreSettings/CoverPicker/CoverPicker.tsx b/webapp/src/components/StoreSettings/CoverPicker/CoverPicker.tsx index fa2c326def..d4acaec9b4 100644 --- a/webapp/src/components/StoreSettings/CoverPicker/CoverPicker.tsx +++ b/webapp/src/components/StoreSettings/CoverPicker/CoverPicker.tsx @@ -1,12 +1,36 @@ -import React, { useRef } from 'react' +import React, { useCallback, useRef } from 'react' import { t } from 'decentraland-dapps/dist/modules/translation/utils' import { Button, Empty } from 'decentraland-ui' import { Props } from './CoverPicker.types' import './CoverPicker.css' +const readFile = (file: File): Promise => { + const reader = new FileReader() + return new Promise((resolve, reject) => { + reader.onload = () => resolve(reader.result as string) + reader.onerror = reject + reader.readAsDataURL(file) + }) +} + const CoverPicker = ({ src, onChange }: Props) => { const inputRef = useRef(null) + const handleOnFileChange = useCallback( + async (e: Parameters>[0]) => { + const file = e.target.files?.[0] + if (file) { + const src = await readFile(file) + const reader = new FileReader() + reader.readAsDataURL(file) + onChange(src, file.name, file.size) + } else { + onChange() + } + }, + [onChange] + ) + return (
@@ -38,22 +62,7 @@ const CoverPicker = ({ src, onChange }: Props) => {
)}
- { - const file = e.target.files?.[0] - - if (file) { - const src = URL.createObjectURL(file) - onChange(src, file.name, file.size) - } else { - onChange() - } - }} - hidden - /> + ) }