Asked  6 Months ago    Answers:  5   Viewed   47 times

I generate normal links like: <a href="/path/to/image"><img src="/path/to/image" /></a> in a web app.

When I click on the link, it displays the picture in a new page. If you want to save the picture, then you need to right click on it and select "save as"

I don't want this behaviour, I would like to have a download box popping out when I click on the link, is that possible just with html or javascript? How?

If not I guess I would have to write a download.php script and call it into the href with the file name as parameter...?

 Answers

71
<a download="custom-filename.jpg" href="/path/to/image" title="ImageName">
    <img alt="ImageName" src="/path/to/image">
</a>

It's not yet fully supported caniuse, but you can use with modernizr (under Non-core detects) to check the support of the browser.

Tuesday, June 1, 2021
 
Asher
answered 6 Months ago
14

I'd suggest using the request module. Downloading a file is as simple as the following code:

var fs = require('fs'),
    request = require('request');

var download = function(uri, filename, callback){
  request.head(uri, function(err, res, body){
    console.log('content-type:', res.headers['content-type']);
    console.log('content-length:', res.headers['content-length']);

    request(uri).pipe(fs.createWriteStream(filename)).on('close', callback);
  });
};

download('https://www.google.com/images/srpr/logo3w.png', 'google.png', function(){
  console.log('done');
});
Saturday, June 5, 2021
 
aurelijusv
answered 6 Months ago
84

Yes, it is by design that the CORS headers have no affect on the download attribute. There are only two browsers that support the download attribute, Firefox and Chrome, and both browsers have a different policy on cross-origin files.

Chrome versions prior to 65 actually did allow the download attribute on cross-origin files, without CORS headers, but Firefox chose not to, citing potential social-engineering attacks.

MDN documents this behavior for Firefox 20 under the download attribute section for the a tag, behavior that has not changed since.

In Firefox 20 this attribute is only honored for links to resources with the same-origin.


This Bugzilla report discussed the security concerns and the possibility of using CORS.

When the user clicks such a link, the user will be prompted if they want to download. It seems very easy for the user to make the mistake of thinking that something on the original website is being downloaded, and not something from bank.com.


Would it be possible to implement it with same-origin and CORS (Access-Control-Allow-Origin) in mind if you are questioning cross origin security? This is very useful feature for web applications (create Blob using JS and let user download it with some meaningful name)

Google was opposed to using CORS for this.


There's also this Bugzilla report, which summarizes their decision from the other bug report.

Also, cross origin downloads are working perfectly in Google Chrome.

Yes, and we think they're adding security bugs by doing that.

The Bugzilla issues don't seem to rule-out the possibility of using CORS for cross-origin download attribute support in the future, but right now using CORS headers does not do anything for the download attribute. It's possible that if other browsers start supporting the attribute, a consensus may yet be reached.

For sake of completeness, there is of course the Content-Disposition header which you can use to force a download from the other domain, but this does not provide the same functionality as the download attribute. It does have better browser support though.

Tuesday, June 8, 2021
 
SuperString
answered 6 Months ago
23

Please Use below code for get image from url and display into imageview.

public class image extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        Bitmap bitmap = DownloadImage("http://www.gophoto.it/view.php?i=http://1.bp.blogspot.com/-2LTvCCufBKc/T3L3KgcTj2I/AAAAAAAABbQ/Ki60e1LU9sE/s1600/Sachin%2BTendulkar.png");

        RelativeLayout mRlayout1 = (RelativeLayout) findViewById(R.id.mRlayout1);
        Drawable d=new BitmapDrawable(bitmap);
        mRlayoutLogin.setBackgroundDrawable(d);
    }

    private InputStream OpenHttpConnection(String urlString) throws IOException {
        InputStream in = null;
        int response = -1;

        URL url = new URL(urlString);
        URLConnection conn = url.openConnection();

        if (!(conn instanceof HttpURLConnection))
            throw new IOException("Not an HTTP connection");

        try {
            HttpURLConnection httpConn = (HttpURLConnection) conn;
            httpConn.setAllowUserInteraction(false);
            httpConn.setInstanceFollowRedirects(true);
            httpConn.setRequestMethod("GET");
            httpConn.connect();
            response = httpConn.getResponseCode();
            if (response == HttpURLConnection.HTTP_OK) {
                in = httpConn.getInputStream();
            }
        } catch (Exception ex) {
            throw new IOException("Error connecting");
        }
        return in;
    }

    private Bitmap DownloadImage(String URL) {
        Bitmap bitmap = null;
        InputStream in = null;
        try {
            in = OpenHttpConnection(URL);
            bitmap = BitmapFactory.decodeStream(in);
            in.close();
        } catch (IOException e1) {
            // TODO Auto-generated catch block
            e1.printStackTrace();
        }
        return bitmap;
    }
}
Tuesday, August 31, 2021
 
Cilvic
answered 3 Months ago
81

Not really an answer, but after reporting the issue to apple and waiting, we now have Safari 11.1.1 which seems to have resolved the issue, so marking resolved.

Wednesday, September 29, 2021
 
kmunky
answered 2 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share