CODEWITHSUNDEEP
csshtmlmozilla
Kuldeep More
Kuldeep More

Reputation: 138

HTML 5 <a> download attribute not working on Firefox Mozilla?

Hi all I just want to allow user to download image on click of button . I have used tag in my project and its download attribute which is provided in html5. My following code working fine on Chrome but in Firefox Mozilla when I click on button it just redirecting me on the specified path. Please tell me what is going wrong .

 <div style="display:inline-block; position:relative; ">
      <img src="https://stemvideodev.s3.amazonaws.com/6b72051541e948cb8ace2d83d3895901-THUMBNAIL-1.jpg" title="" alt="">
         <a href="https://stemvideodev.s3.amazonaws.com/6b72051541e948cb8ace2d83d3895901-THUMBNAIL-1.jpg" download="image.png">
            <input type="button" style="position:absolute;bottom:0;right:0; " value="Download">
        </a>
</div>

Thanks in advance.

Upvotes: 1

Views: 7383

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201528

According to the HTML5 definition of the a element, it must not contain “interactive descendants”, and input elements are by definition interactive. The markup is thus invalid. All bets are off. The nesting rules are set to avoid complications in event handling.

So if you want to have the download attribute and some button appearance, you need to use just an a element and style it to look like a button. Here’s a sketch, to be tuned according to your preferences for button style:

.dbutton {
  position:absolute;
  bottom:0;
  right:0;
  color: #000;
  background: #ddd;
  border: #333 outset 2px;
  border-radius: 3px;
  text-decoration: none;
  padding: 0.1em 0.2em;
  font: 90% sans-serif;
}
 <div style="display:inline-block; position:relative; ">
      <img src="https://stemvideodev.s3.amazonaws.com/6b72051541e948cb8ace2d83d3895901-THUMBNAIL-1.jpg" title="" alt="">
         <a href="https://stemvideodev.s3.amazonaws.com/6b72051541e948cb8ace2d83d3895901-THUMBNAIL-1.jpg" download="image.png"
         class="dbutton">Download</a>
</div>

Upvotes: 5

user3660182
user3660182

Reputation: 

<div class="text-wrap"><img src="your img.jpg" alt="">
<a href="download.jpg" class="myButton" download="img name" title="Download">
    <img src="/path/to/image" alt="Download">
</a></div>

Can you please try like this..

Upvotes: 0

Related Questions