-2

I am getting a problem to download the image on click, It is opening up the URL of the image rather than download. I have tried other StackOverflow Answers as well but nothing really solves my problem 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <a class="d1" href="https://cdn.shopify.com/s/files/1/1816/0091/files/Artboard_3_1.png?11554335258293208175" download="aa.jpg">
    <img  src="https://cdn.shopify.com/s/files/1/1816/0091/files/Artboard_3_1.png?11554335258293208175" width="104" height="142">     <span>Click to Download</span>
  </a>
  <script>
    document.querySelector(".d1").setAttribute("download", "filename.jpg");
  </script>
</body>
</html>
Varun Kumar
  • 7
  • 8
  • Because you have an error in your console because you are trying to reference an element before it is rendered to the page..... someone can find the dupe. – epascarello Feb 26 '19 at 21:51
  • 1
    And there's also a typo in `filename.jpg"` – j08691 Feb 26 '19 at 21:51
  • Possible duplicate of [Force browser to download image files on click](https://stackoverflow.com/questions/17527713/force-browser-to-download-image-files-on-click) – A. Meshu Feb 26 '19 at 21:51
  • @A.Meshu Thanks for the another refrence of this topic But it still different from that one As, My code is running but the browser not downloading the image instead it opens up the URL – Varun Kumar Feb 26 '19 at 22:04
  • @epascarello Thanks for your answer I have changed the code. As Recommended by but still image is not downloading in the browser. It opens up in the same tab. – Varun Kumar Feb 26 '19 at 22:07
  • @A.Meshu Did you read my comment below my answer? `download` doesn't work in all browsers and even in those that it does work in, it must be tested over HTTP/HTTPS. My answer does do what you asked about in that is correctly sets the `download` attribute. – Scott Marcus Feb 26 '19 at 22:08
  • Thanks @A.Meshu for your reply again. I have tested on HTTP as well its still not working. It would be great if you can have a look at the link http://down.goslash.co.nz/ – Varun Kumar Feb 26 '19 at 22:18
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes – epascarello Feb 26 '19 at 22:37
  • @epascarello I am looking at it. Give me few minutes – Varun Kumar Feb 26 '19 at 22:46

1 Answers1

1
  1. Your class is d1, but in .getElementsByClassName() you search for dl.
  2. Your code attempts to find that element before the element has been parsed into the document, so you need to move the script to the bottom of the web page so that by the time that code executes, the element will have been parsed.
  3. You are missing an opening quote in front of filename.jpg
  4. .getElementsByClassName() is the wrong choice here as it returns a "live" node list (which is only useful in certain use cases and hurts performance in all others) and because, you aren't interested in a node list, you're trying to find just one element. Use .querySelector() instead.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <a class="d1" href="https://cdn.shopify.com/s/files/1/1816/0091/files/Artboard_3_1.png?11554335258293208175" download="aa.jpg">
    <img  src="https://cdn.shopify.com/s/files/1/1816/0091/files/Artboard_3_1.png?11554335258293208175" width="104" height="142">     <span>Click to Download</span>
  </a>
  <script>
    document.querySelector(".d1").setAttribute("download", "filename.jpg");
  </script>
</body>
</html>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • Thanks Scott Marcus for your help but it still the same problem I am getting browser not downloading the image instead it open up the URL of Image. – Varun Kumar Feb 26 '19 at 22:02
  • @VarunKumar If you run my code snippet and then right-click on the link and choose Inspect, you will see that the download attribute it now set up correctly, **so the code now sets the attribute correctly**. Note that `download` only works over HTTP/HTTPS (not when accessing the page directly from the file system) and `download` [isn't supported in all browsers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Browser_compatibility) as well. – Scott Marcus Feb 26 '19 at 22:03
  • Thanks again for your reply. I have tried running on HTTP and tried to click on google chrome/ Mozilla Firefox but it's still not working. Please have a look http://down.goslash.co.nz/ – Varun Kumar Feb 26 '19 at 22:14
  • @VarunKumar This could simply be that Shopify doesn't allow it. – Scott Marcus Feb 26 '19 at 22:24
  • Thanks, @Scott Marcus I have changed the src of the image and its still the same problem. Can you please have a look again at down.goslash.co.nz – Varun Kumar Feb 26 '19 at 22:32
  • @VarunKumar Have a look at this: https://stackoverflow.com/questions/23872902/chrome-download-attribute-not-working – Scott Marcus Feb 26 '19 at 22:38
  • I am looking at it. Give me few minutes – Varun Kumar Feb 26 '19 at 22:47
  • Thanks @Scott Marcus, I have read that implemented that but its still not working – Varun Kumar Feb 27 '19 at 01:10