0

I am running a flask app, and using a plugin named "Autoindex" for listing all the files in a directory, like this Now, when i click on an image name, it opens the image. But I want to downlaod the image without leaving the page on button click.

I cannot modify the HTML code of this. So I was thinking, can i use Javascript to perform this task?

EDIT

This is the HTML CODE:

<td class="name">
  <a href="/templete/images/2.jpg">2.jpg</a></td>
<td class="modified">
  <time datetime="2019-07-15 15:42:20.989829">2019-07-15 15:42:20.989829</time>
</td>
<td class="size">

Now, I cannot modify the HTML Code directly. The link has no class, how can I change this 

<a href="/templete/images/2.jpg">2.jpg</a>

to this, for all image links in the page.

<a href="" download="/templete/images/2.jpg">2.jpg</a>
FZs
  • 16,581
  • 13
  • 41
  • 50
John Doe
  • 53
  • 4
  • just add `target="_blank"` to your `` tag then it will be opened in new tab. Not exactly what you need but at least user has the choice to download it or not. – Flo Jul 19 '19 at 08:19
  • I don't want to give choice, i want user to download. I got an idea, I can use javascript to ad "download" attribute. Like `link – John Doe Jul 19 '19 at 08:22
  • Possible duplicate of [Force browser to download image files on click](https://stackoverflow.com/questions/17527713/force-browser-to-download-image-files-on-click) –  Jul 19 '19 at 08:34
  • 1
    `This is not a duplicate question.` That's a bold assertion, literally... :) –  Jul 19 '19 at 08:35
  • The solution you're looking for is to add the `download` attribute. This solution is the top answer. The fact that you have to add the attribute using JS is just an implementation detail. If your actual question is "how do I add an attribute to an element using JS" then I'll mark it as dupe of [this](https://stackoverflow.com/questions/27466969/how-to-add-attribute-to-html-element-using-javascript) –  Jul 19 '19 at 08:42
  • If this solution doesn't work, the other possibility is to change the links' `href` to a different URL and create a flask endpoint that sends the image as [download](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition). –  Jul 19 '19 at 08:50
  • Understood, thanks a lot @ChrisG . I modified the question. I have one problem, how do I select the element, see the updated question please. – John Doe Jul 19 '19 at 08:53
  • `document.querySelectorAll(".name a").forEach(a => a.setAttribute('download', ''));` (just add the download attribute, keep the `href` as it is) –  Jul 19 '19 at 08:56

2 Answers2

0

You can use JS to add download attribute to a HTML element:

element.setAttribute('download','')

Or even simpler:

element.download=''

So, you can easily add this for each link with a href ending .jpg:

const links=document.querySelectorAll('a[href$=".jpg"]')
links.forEach(link=>link.download='')
FZs
  • 16,581
  • 13
  • 41
  • 50
0

It is so easy! Put the image inside an tag or withing an tag then add the attribute download and the images' URL withing that tag. here is an example:

<a href="https://www.publicdomainpictures.net/pictures/320000/nahled/background-image.png" download>
  <img src="https://www.publicdomainpictures.net/pictures/320000/nahled/background-image.png" alt="W3Schools" width="104" height="142">
</a>
image

Note: The download attribute is not supported in IE or Edge (prior version 18), or in Safari (prior version 10.1).

Fath
  • 84
  • 7