fix: changed download flow for image control (#11391)

* fix: changed download flow for image control

* test: cypress test added

* fix cypress test case

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Image_spec.js

@@ -64,10 +64,21 @@ describe("Image Widget Functionality", function() {
     cy.togglebar(commonlocators.visibleCheckbox);
     cy.PublishtheApp();
     cy.get(publish.imageWidget).should("be.visible");
+    cy.get(publish.backToEditor).click();
+  });
+
+  it("Image Widget Functionality To check download option and validate image link", function() {
+    cy.openPropertyPane("imagewidget");
+    cy.togglebar(".t--property-control-enabledownload input[type='checkbox']");
+    cy.get(publish.imageWidget).trigger("mouseover");
+    cy.get(`${publish.imageWidget} a[data-cy=t--image-download]`).should(
+      "have.attr",
+      "href",
+      this.data.NewImage,
+    );
   });
 
   it("In case of an image loading error, show off the error message", () => {
-    cy.get(publish.backToEditor).click();
     cy.openPropertyPane("imagewidget");
     // Invalid image url
     const invalidImageUrl = "https://www.example.com/does-not-exist.jpg";

app/client/src/widgets/ImageWidget/component/index.tsx

@@ -57,7 +57,7 @@ const ControlBtnWrapper = styled.div`
   background: white;
 `;
 
-const ControlBtn = styled.div`
+const ControlBtn = styled.a`
   height: 25px;
   width: 45px;
   color: white;
@@ -242,6 +242,7 @@ class ImageComponent extends React.Component<
     } = this.props;
     const { showImageControl } = this.state;
     const showDownloadBtn = enableDownload && (!!imageUrl || !!defaultImageUrl);
+    const hrefUrl = imageUrl || defaultImageUrl;
 
     if (showImageControl && (enableRotation || showDownloadBtn)) {
       return (
@@ -290,7 +291,12 @@ class ImageComponent extends React.Component<
             </>
           )}
           {showDownloadBtn && (
-            <ControlBtn onClick={this.handleImageDownload}>
+            <ControlBtn
+              data-cy="t--image-download"
+              download
+              href={hrefUrl}
+              target="_blank"
+            >
               <div>
                 <svg fill="none" height="20" viewBox="0 0 20 20" width="20">
                   <path
@@ -321,43 +327,6 @@ class ImageComponent extends React.Component<
     }
   };
 
-  handleImageDownload = (e: any) => {
-    const { defaultImageUrl, imageUrl, widgetId } = this.props;
-    const fileName = `${widgetId}-download`;
-    const downloadUrl = imageUrl || defaultImageUrl;
-
-    const xhr = new XMLHttpRequest();
-    xhr.open("GET", downloadUrl, true);
-    xhr.responseType = "blob";
-
-    xhr.onload = function() {
-      const urlCreator = window.URL || window.webkitURL;
-      const imageUrlObj = urlCreator.createObjectURL(this.response);
-      const tag = document.createElement("a");
-      tag.href = imageUrlObj;
-      tag.download = fileName;
-      document.body.appendChild(tag);
-      tag.click();
-      document.body.removeChild(tag);
-      window.URL.revokeObjectURL(imageUrlObj);
-    };
-    // if download fails open image in new tab
-    xhr.onerror = function() {
-      const tag = document.createElement("a");
-      tag.href = downloadUrl;
-      tag.target = "_blank";
-      document.body.appendChild(tag);
-      tag.click();
-      document.body.removeChild(tag);
-    };
-    xhr.send();
-
-    if (!!e) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  };
-
   onMouseEnter = () => {
     const { defaultImageUrl, imageUrl } = this.props;
     if (defaultImageUrl || imageUrl) {