How to Download file on clicking submit on an html page?

Question

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;

}}

Answer 1

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

Answer 2

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>');