How to call download URL with JavaScript

Question

I am using the Unsplash API to create a photo download app. I am able to call the photo and display it, but when trying to call the download link from JSON (http://unsplash.com/photos/_Ajm-ewEC24/download?force=true) I am unable to.

This is the function I am currently using to display the photo and title while attempting the download link call. I tried using jQuery's .load in order to call the url but this did not work of course.

    const client_id = 'client_id=hiddenForSecurityReasons';

    const API = 'https://api.unsplash.com/';

    let randomPhoto = API + 'photos/random/?' + client_id;

    // Ajax Call

    $("#newRB").click(function() {
        $.getJSON(randomPhoto, function (response) {
        let randomPhotoPicture = response.urls.regular;
        let randomPhotoTitle = response.location;
        let download = response.links.download + "?force=true";


        document.getElementById('preview').src = randomPhotoPicture;
        document.getElementById('randomTitle').innerHTML = randomPhotoTitle;
        document.getElementById('downloadRB').load(download);
        })
    });

The HTML:

<div class="row">
      <div class="col-12 col-sm-6">
        <!-- Card -->
        <article class="card animated fadeInLeft text-center">
          <img class="card-img-top img-responsive preview" id="preview" src="" />
          <div class="card-block">
            <h4 class="card-title" id="randomTitle"></h4>
            <button type="button" class="btn btn-outline-primary" id="newRB">New Background</button>
            <button type="button" class="btn btn-outline-primary" id="downloadRB">Download</button>
          </div>
        </article>
        <!-- .end Card -->
      </div>
    </div>

The JSON result is here in case you are curious but this shouldn't matter (console logging the download link shows me it works):

{
"id": "6y6D3S_sEjw",
"created_at": "2016-09-12T08:33:43-04:00",
"updated_at": "2017-05-13T21:56:20-04:00",
"width": 4500,
"height": 3000,
"color": "#919104",
"slug": null,
"downloads": 2835,
"likes": 64,
"views": 425961,
"liked_by_user": false,
"exif": {
"make": "Canon",
"model": "Canon EOS 6D",
"exposure_time": "25",
"aperture": "2.8",
"focal_length": "24",
"iso": 800
},
"location": {
"title": "Hovfjallet, Torsby, Sweden",
"name": "Hovfjallet",
"city": "Torsby",
"country": "Sweden",
"position": {
"latitude": 60.2928188177545,
"longitude": 12.9673533455078
}
},
"current_user_collections": [],
"urls": {
"raw": "https://images.unsplash.com/photo-1473683409080-b66239d1e547",
"full": "https://images.unsplash.com/photo-1473683409080-b66239d1e547?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=043cc47eeddbef09fc132b77f0bc9494",
"regular": "https://images.unsplash.com/photo-1473683409080-b66239d1e547?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=ac9893c66b73a7f91a8aa6dcf1ac7d6d",
"small": "https://images.unsplash.com/photo-1473683409080-b66239d1e547?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=6ac071858ad609f63b7c731ed70d936f",
"thumb": "https://images.unsplash.com/photo-1473683409080-b66239d1e547?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=22b3b68e25b0283afac75e6d56ad6d35"
},
"categories": [],
"links": {
"self": "https://api.unsplash.com/photos/6y6D3S_sEjw",
"html": "http://unsplash.com/photos/6y6D3S_sEjw",
"download": "http://unsplash.com/photos/6y6D3S_sEjw/download",
"download_location": "https://api.unsplash.com/photos/6y6D3S_sEjw/download"
}

So... `New Background` button is working but not the `Download` button right? — Louys Patrice Bessette, May 21 '17 at 01:25
@LouysPatriceBessette yes exactly, everything works except the download button. The only way to download a photo is through that download url so I am trying to call it. — Temple, May 21 '17 at 01:26

score 0 · Answer 1 · edited May 23 '17 at 12:18

Try this...
I adapted from this SO answer.

const client_id = 'client_id=hiddenForSecurityReasons';

const API = 'https://api.unsplash.com/';

let randomPhoto = API + 'photos/random/?' + client_id;

// Ajax Call

var link;

$("#newRB").click(function() {
    $.getJSON(randomPhoto, function (response) {
    let randomPhotoPicture = response.urls.regular;
    let randomPhotoTitle = response.location;
    let download = response.links.download + "?force=true";


    document.getElementById('preview').src = randomPhotoPicture;
    document.getElementById('randomTitle').innerHTML = randomPhotoTitle;
    //document.getElementById('downloadRB').load(download);

    // Create a link to be clicked by the download button
    link = document.createElement('a');
    link.href = download;
    link.download = 'Download.jpg';   // The file name suggestion for the user.
    document.body.appendChild(link);

    });
});

$("downloadRB").click(function(){
  link.click();
});

This didn't work for me unfortunately, thank you for the lead however. — Temple, May 21 '17 at 21:12

How to call download URL with JavaScript

1 Answers1