OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to let user download a image to Photos on click with React.js?

  • Thread starter Thread starter Terry Windwalker
  • Start date Start date
T

Terry Windwalker

Guest
What I want to achieve:

When the user clicks a button, the image should be saved to Photos.

What's the current behaviour:

On click, the user is sent to a new page that only that image exists.

Code:
<a href={imageUrl} target="_blank">button</a>

On click, the user is asked if they want to download the image. Upon accepting it, the image is saved in OneDrive instead of their Photos, which causes them not able to find it.

Code:
export const downloadFile = (url: string, filename: string) => {
    fetch(url)
    .then(response => {
        response.blob().then(blob => {
            let url = window.URL.createObjectURL(blob);
            let a = document.createElement('a');
            a.href = url;
            a.download = filename;
            a.click();
            a.remove();
        });
    });
}

Is there a better way to let the user download the image directly to their Photos instead of either of the two actions above?

UPDATE:

Tried with the mime-type and content-disposition, still sent to File instead of Photos.

enter image description here

And when I open the link on iOS, it pop up a dialog like this:

enter image description here

When I click "View", it will open a page with the image shown.

When I click "Download", it will download to my iCloud Drive directly without letting me choose to save it in my Photos.
<p>What I want to achieve:</p>
<p>When the user clicks a button, the image should be saved to Photos.</p>
<p>What's the current behaviour:</p>
<p>On click, the user is sent to a new page that only that image exists.</p>
<pre><code><a href={imageUrl} target="_blank">button</a>
</code></pre>
<p>On click, the user is asked if they want to download the image. Upon accepting it, the image is saved in OneDrive instead of their Photos, which causes them not able to find it.</p>
<pre class="lang-js prettyprint-override"><code>export const downloadFile = (url: string, filename: string) => {
fetch(url)
.then(response => {
response.blob().then(blob => {
let url = window.URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = url;
a.download = filename;
a.click();
a.remove();
});
});
}
</code></pre>
<p>Is there a better way to let the user download the image directly to their Photos instead of either of the two actions above?</p>
<p>UPDATE:</p>
<p>Tried with the mime-type and content-disposition, still sent to File instead of Photos.</p>
<p><a href="https://i.sstatic.net/YD988.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/YD988.png" alt="enter image description here" /></a></p>
<p>And when I open the link on iOS, it pop up a dialog like this:</p>
<p><a href="https://i.sstatic.net/q1DFd.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/q1DFd.jpg" alt="enter image description here" /></a></p>
<p>When I click "View", it will open a page with the image shown.</p>
<p>When I click "Download", it will download to my iCloud Drive directly without letting me choose to save it in my Photos.</p>
Continue reading...
 

Latest posts

G
Replies
0
Views
1
Gamal Othman
G
Top