CODEWITHSUNDEEP
javascriptpythondownloadclient-side-scripting
Zeeshan Hasnain
Zeeshan Hasnain

Reputation: 25

How to download and rename the list of google drive links on real time during the download process

I've a javascript code that has tow columns "Image URLs" and "Renamed Text" which performs the downloading function that it downloads the list of URLs and also renames the images or files with the adjacent column text on the real time during the downloading process. For example in the given list of URLs in column of "Image URLs" of files or images when the first url will be downloaded that will not only be downloaded but that will rename that first URL file with the text of first line or entry of the adjacent column which is the column of "Renamed Text" on real time during the download process. That's cool! but there is a hurdle that most of my work involves the drive links I'm unable to download the Google drive links this way as it working due to the the reason as it has been masked google's url and several other layers.

I know that there are unmasking methods by which we can retrieve the direct URL of a file or image such can be achieved by below:

https://drive.google.com/uc?export=view&id=1VYA6jy_VgaLsLlicS8b0N1H-vIA4HcUO

or there might me other techniques for direct urls of images or files of google drive links. But it even is not working for that download functionality, I just want the list of the google drive urls to be downloaded and renamed with the given text in "renamed text" column on the real time.!

In short, the way my program is currently working I just want that it should be working for my list of google drive links as well!

I'D BE VERY MUCH GLAD IF YOU GUYS TYPE OUT THE THINGS WHICH IS MISSING IN MY PROGRAM OR RECTIFY MY SCRIPT TO BE WORKING FINE FOR THE CASE OF GOOGLE DRIVE LINKS. IT IS REQUESTED TO PLASE WRITE UP THE FULL SCRIPT AND PLEASE SHARE THAT IN COMMENTS.

PICTURE ILLUSTRATION:

https://i.sstatic.net/tjhDu.png

HERE IS THE FULL SCRIPT:

<!DOCTYPE html>
<html>
<head>
<title>Image Downloader with Renaming</title>
<style>
body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
  margin: 0;
  padding: 20px;
}

 .container {
  display: flex;
}

.column {
  flex: 1;
  margin-right: 20px;
}

h3 {
  margin-top: 0;
}

textarea {
  width: 100%;
  height: 200px;
  resize: vertical;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  background-color: #4caf50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}
</style>
</head>
<body>
<h1>Image Downloader with Renaming</h1>
<div class="container">
<div class="column">
  <h3>URLs</h3>
  <textarea id="urlList" rows="10" cols="30"></textarea>
</div>
<div class="column">
  <h3>Renamed Text</h3>
  <textarea id="renamedTextList" rows="10" cols="30"></textarea>
 </div>
 </div>
<button id="downloadAllButton">Download All</button>

<script>
function downloadImage(url, renamedText) {
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', renamedText);
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

function handleDownloadAll() {
  const urlList = document.getElementById('urlList').value.trim().split('\n');
  const renamedTextList = document.getElementById('renamedTextList').value.trim().split('\n');

  if (urlList.length === renamedTextList.length) {
    for (let i = 0; i < urlList.length; i++) {
      const url = urlList[i].trim();
      const renamedText = renamedTextList[i].trim();
      const image = new Image();
      image.crossOrigin = 'anonymous';

      image.onload = () => {
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        canvas.width = image.width;
        canvas.height = image.height;
        context.drawImage(image, 0, 0);

        const link = document.createElement('a');
        link.href = canvas.toDataURL();
        link.setAttribute('download', renamedText);
        link.style.display = 'none';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      };

      image.src = url;
    }
  } else {
    alert('Number of URLs and Renamed Text entries should match!');
  }
}

const downloadAllButton = document.getElementById('downloadAllButton');
downloadAllButton.addEventListener('click', handleDownloadAll);
</script>
</body>
</html>

Upvotes: 0

Views: 171

Answers (0)

Related Questions