Use image preview to display the cover image recently uploaded. (#7647)

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'),

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<any>(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();

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 (
     <Modal isOpen type="card" onAborted={closeModal} contentLabel={title}>
       <SelectAsset
-        onUpdate={(a, b) => onUpdate(a, b)}
+        onUpdate={onUpdate}
         currentValue={currentValue}
         assetName={assetName}
         recommended={helpText}
         onDone={closeModal}
+        buildImagePreview
       />
     </Modal>
   );