Google Drive Direct Download Link Generator Tool in HTML, CSS, JavaScript
Do you want to make tool for direct downloading files from Google Drive with less time and effort? You will be glad to know that the Google Drive Direct Download Link Generator Tool in HTML, CSS, and JavaScript is ready for you.
Here I am going to provide you free source codes of your own tool, and guide you how you can develop it. What makes it great is that this tool does not have to be limited to WordPress sites but can be integrated into a custom HTML interface as well.
Features
The Google Drive Direct Download Link Generator Tool (gdocs2direct) comes with several notable features:
- Instant Direct Download Links: Create direct download links to files shared on Google Drive through one click and without going through the preview stage.
- User-Friendly Interface: Developed with a simple and clear interface where the users are able to paste the links and copy the direct download links.
- Cross-Platform Compatibility: Compatible with most of the contemporary CMS platforms such as WordPress and other HTML-based interfaces.
- Customizable Design: HTML, CSS and JavaScript can be easily modified to meet the need or style of the tool.
Technologies Used
Download Link Generator Tool uses the following programming languages:
- HTML
- CSS
- JavaScript
Video Preview
If you want to learn more about what the Google Drive Direct Download Link Generator Tool in HTML, CSS, JavaScript is and how it works, you can watch the video preview below.
Steps to Build Image Slider
Follow these simple steps to create your own Google Drive Direct Download Link Generator:
- Create a Folder: First, let’s create a folder named GoogleDriveProject.
- Create an HTML File: Within this folder, create a file with the name index.html.
- Create a CSS File: Thus, in the same folder, there should be a file that will be called style.css.
- Create a JavaScript File: Last, create a file named as script.js.
To implement code you may need VS Code Installation.
HTML
Here is the HTML code for your index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Drive Direct Download Link Generator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Google Drive Direct Download Link Generator</h2>
<input type="text" id="shareable-link" placeholder="Paste your Google Drive shareable link here">
<button onclick="generateLink()">Generate Direct Download Link</button>
<br><br>
<p><strong>Direct Download Link:</strong></p>
<input type="text" id="direct-link" readonly>
<br>
<button onclick="copyLink()">Copy Final Link</button>
<button class="button-secondary" onclick="testDownload()">Test Download</button>
<script src="script.js"></script>
</body>
</html>CSS
Here is the complete code for style.css file:
body {
font-family: Arial, sans-serif;
margin: 20px;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px 20px;
margin-top: 10px;
margin-right: 10px;
border: none;
border-radius: 4px;
background-color: #4CAF50;
color: white;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.button-secondary {
background-color: #008CBA;
}
.button-secondary:hover {
background-color: #007bb5;
}JavaScript
The JavaScript code takes care of the generation and management of direct download links.
function generateLink() {
let shareableLink = document.getElementById('shareable-link').value;
let fileId = shareableLink.match(/[-\w]{25,}/);
if (fileId) {
let directLink = `https://drive.google.com/uc?export=download&id=${fileId}`;
document.getElementById('direct-link').value = directLink;
} else {
alert("Invalid Google Drive link.");
}
}
function copyLink() {
let directLink = document.getElementById('direct-link');
directLink.select();
document.execCommand("copy");
alert("Link copied to clipboard!");
}
function testDownload() {
let directLink = document.getElementById('direct-link').value;
if (directLink) {
window.open(directLink, '_blank');
} else {
alert("Please generate a link first.");
}
}Download Source Code
You can download the free source code for Google Drive Direct Download Link Generator Tool. The code is free of any copyright so anyone can use it without any form of restrictions.
Conclusion
Google drive direct download link generator tool in HTML, CSS, JavaScript is one of the most powerful tools to generate direct download link for any file from Google Drive.
You can freely integrate it into your projects while linking back to JV Codes as the source. In case you have any questions or experience any problems, you can leave your comments below, and I will assist you. Please do not forget to subscribe our channel for more useful source codes.
