Question posted in
You can find the official documentation here.

How to Download file on clicking submit on an html page? – Jquery ajax

I have a radio button that lists file names from my google drive. I want to be able to select a file and download it to my local device using the download url.
I am getting the download url using HTTP GET request using the ajax /jquery from the Drive API.
Here is the success function which is inside my get request.

    success: function (data) {
                   console.log(data);
                   console.log(data.items[0].alternateLink);

                   $.each(data.items, function(key, value) {
                    
                    const uri = value.alternateLink;
                    var uri_dec = decodeURIComponent(uri);
                    
                    
                    $('ul').append('<li class="list-group-item"> <input type="radio" name="recording" id="recording" value="' +uri_dec+ '">  '+value.title+' </li>');
                    //$("ul").append("<li class="list-group-item">"+value.title+"</li>");
                    console.log(uri_dec);
                    
                    document.getElementById("Decoded").innerHTML = uri_dec;

}}
Tags:

2

Answers


  1. 0

    do you need to render radio buttons? If not, this snippet will create a list of download links:

    const uri = value.downloadUrl;  // try this or value.webContentLink

$('ul').append('<li class="list-group-item"><a href="' + uri + '">'+value.title+' </a></li>');

    You should be able to click any of the links to download the file.

    Reading the Google Drive API documentation, I think downloadUrl or webContentLink might be the properties you’re looking for:

    https://developers.google.com/drive/api/v2/reference/files

    If you still need help, check out Google’s guide:

    https://codelabs.developers.google.com/codelabs/gsuite-apis-intro/#0

    Login or Signup to reply.
  2. 0

    you need to add download attribute

    const uri = value.downloadUrl;

$('ul').append('<li class="list-group-item"><a href="' + uri + ' download ">'+value.title+' </a></li>');

    if you want to give name to your file you can also give value to download attribute like this :-

    $('ul').append('<li class="list-group-item"><a href="' + uri + ' download ='theFileName' ">'+value.title+' </a></li>');
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search