diff --git a/ui/component/channelForm/view.jsx b/ui/component/channelForm/view.jsx index 3fbfee920..85eda9693 100644 --- a/ui/component/channelForm/view.jsx +++ b/ui/component/channelForm/view.jsx @@ -94,10 +94,11 @@ function ChannelForm(props: Props) { const [nameError, setNameError] = React.useState(undefined); const [bidError, setBidError] = React.useState(''); const [isUpload, setIsUpload] = React.useState({ cover: false, thumbnail: false }); - const [coverError, setCoverError] = React.useState(false); const [thumbError, setThumbError] = React.useState(false); const { claim_id: claimId } = claim || {}; const [params, setParams]: [any, (any) => void] = React.useState(getChannelParams()); + const [coverError, setCoverError] = React.useState(false); + const [coverPreview, setCoverPreview] = React.useState(params.coverUrl); const { channelName } = parseURI(uri); const name = params.name; const isNewChannel = !uri; @@ -206,7 +207,8 @@ function ChannelForm(props: Props) { setThumbError(false); } - function handleCoverChange(coverUrl: string, uploadSelected: boolean) { + function handleCoverChange(coverUrl: string, uploadSelected: boolean, preview: ?string) { + setCoverPreview(preview || ''); setParams({ ...params, coverUrl }); setIsUpload({ ...isUpload, cover: uploadSelected }); setCoverError(false); @@ -259,7 +261,7 @@ function ChannelForm(props: Props) { } }, [hasClaimedInitialRewards, claimInitialRewards]); - const coverSrc = coverError ? ThumbnailBrokenImage : params.coverUrl; + const coverSrc = coverError ? ThumbnailBrokenImage : coverPreview; let thumbnailPreview; if (!params.thumbnailUrl) { @@ -281,7 +283,7 @@ function ChannelForm(props: Props) { title={__('Cover')} onClick={() => openModal(MODALS.IMAGE_UPLOAD, { - onUpdate: (coverUrl, isUpload) => handleCoverChange(coverUrl, isUpload), + onUpdate: (coverUrl, isUpload, preview) => handleCoverChange(coverUrl, isUpload, preview), title: __('Edit Cover Image'), helpText: __('(6.25:1)'), assetName: __('Cover Image'), diff --git a/ui/component/selectAsset/view.jsx b/ui/component/selectAsset/view.jsx index 817f58980..13fe2c324 100644 --- a/ui/component/selectAsset/view.jsx +++ b/ui/component/selectAsset/view.jsx @@ -15,15 +15,35 @@ const SPEECH_UPLOADING = 'UPLOADING'; type Props = { assetName: string, currentValue: ?string, - onUpdate: (string, boolean) => void, + onUpdate: (string, boolean, ?string) => void, recommended: string, title: string, onDone?: () => void, inline?: boolean, + // When uploading pictures, the upload service + // can return success but the image isn't ready + // to be displayed yet. This is when a local preview + // comes in handy. The preview (base 64) will be + // passed to the onUpdate function after the + // upload service returns success. + buildImagePreview?: boolean, }; +function filePreview(file) { + return new Promise((resolve) => { + const reader = new FileReader(); + reader.onload = () => { + resolve(reader.result.toString()); + }; + reader.onerror = () => { + resolve(undefined); + }; + reader.readAsDataURL(file); + }); +} + function SelectAsset(props: Props) { - const { onUpdate, onDone, assetName, currentValue, recommended, title, inline } = props; + const { onUpdate, onDone, assetName, currentValue, recommended, title, inline, buildImagePreview } = props; const [pathSelected, setPathSelected] = React.useState(''); const [fileSelected, setFileSelected] = React.useState(null); const [uploadStatus, setUploadStatus] = React.useState(SPEECH_READY); @@ -36,9 +56,15 @@ function SelectAsset(props: Props) { setError(error); }; - const onSuccess = (thumbnailUrl) => { + const onSuccess = async (thumbnailUrl) => { + let preview; setUploadStatus(SPEECH_READY); - onUpdate(thumbnailUrl, !useUrl); + + if (buildImagePreview) { + preview = await filePreview(fileSelected); + } + + onUpdate(thumbnailUrl, !useUrl, preview); if (onDone) { onDone(); diff --git a/ui/modal/modalImageUpload/view.jsx b/ui/modal/modalImageUpload/view.jsx index c5f5e3871..b76fe10db 100644 --- a/ui/modal/modalImageUpload/view.jsx +++ b/ui/modal/modalImageUpload/view.jsx @@ -8,7 +8,7 @@ type Props = { currentValue: string, title: string, helpText: string, - onUpdate: (string, boolean) => void, + onUpdate: (string, boolean, ?string) => void, assetName: string, }; @@ -18,11 +18,12 @@ function ModalImageUpload(props: Props) { return ( onUpdate(a, b)} + onUpdate={onUpdate} currentValue={currentValue} assetName={assetName} recommended={helpText} onDone={closeModal} + buildImagePreview /> );