Merge branch 'main' into fix-markdown-heading

packages/volto/news/6591.feature

@@ -0,0 +1 @@
+- Fixed handling of the site logo preview to appear after upload. @Shyam-Raghuwanshi

packages/volto/src/components/manage/Widgets/RegistryImageWidget.jsx

@@ -3,7 +3,7 @@
  * @module components/manage/Widgets/RegistryImageWidget
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Image, Dimmer } from 'semantic-ui-react';
 import { readAsDataURL } from 'promise-file-reader';
@@ -76,12 +76,15 @@ const RegistryImageWidget = (props) => {
   const { id, value, onChange, isDisabled } = props;
   const intl = useIntl();
 
-  const fileName = value?.split(';')[0];
-  const imgsrc = fileName
-    ? `${toPublicURL('/')}@@site-logo/${atob(
-        fileName.replace('filenameb64:', ''),
-      )}`
-    : '';
+  // State to manage the preview image source
+  const [previewSrc, setPreviewSrc] = useState(() => {
+    const fileName = value?.split(';')[0];
+    return fileName
+      ? `${toPublicURL('/')}@@site-logo/${atob(
+          fileName.replace('filenameb64:', ''),
+        )}`
+      : '';
+  });
 
   /**
    * Drop handler
@@ -102,8 +105,7 @@ const RegistryImageWidget = (props) => {
     reader.onload = function () {
       const fields = reader.result.match(/^data:(.*);(.*),(.*)$/);
       if (imageMimetypes.includes(fields[1])) {
-        let imagePreview = document.getElementById(`field-${id}-image`);
-        imagePreview.src = reader.result;
+        setPreviewSrc(reader.result);
       }
     };
     reader.readAsDataURL(files[0]);
@@ -115,12 +117,12 @@ const RegistryImageWidget = (props) => {
         {({ getRootProps, getInputProps, isDragActive }) => (
           <div className="file-widget-dropzone" {...getRootProps()}>
             {isDragActive && <Dimmer active></Dimmer>}
-            {imgsrc ? (
+            {previewSrc ? (
               <Image
                 className="image-preview"
                 id={`field-${id}-image`}
                 size="small"
-                src={imgsrc}
+                src={previewSrc}
               />
             ) : (
               <div className="dropzone-placeholder">
@@ -139,7 +141,6 @@ const RegistryImageWidget = (props) => {
                 )}
               </div>
             )}
-
             <label className="label-file-widget-input">
               {value
                 ? intl.formatMessage(messages.replaceFile)
@@ -168,6 +169,7 @@ const RegistryImageWidget = (props) => {
             disabled={isDisabled}
             onClick={() => {
               onChange(id, '');
+              setPreviewSrc(''); // Clear the preview image
             }}
           >
             <Icon name={deleteSVG} size="20px" />
@@ -189,10 +191,7 @@ RegistryImageWidget.propTypes = {
   description: PropTypes.string,
   required: PropTypes.bool,
   error: PropTypes.arrayOf(PropTypes.string),
-  value: PropTypes.shape({
-    '@type': PropTypes.string,
-    title: PropTypes.string,
-  }),
+  value: PropTypes.string,
   onChange: PropTypes.func.isRequired,
   wrapped: PropTypes.bool,
 };