Javascript Project to Embed Google Drive Images & Files Using URL on Website
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Embed Google Drive Files Online Tool</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<form id="form">
<label for="url">Enter the Google Drive File URL:</label>
<div class="form-group">
<input type="text" id="url" placeholder="https://drive.google.com/file/d/1mTMlrsorXx7jFP2Fyf5DRKBMQIQYk71j/view?usp=sharing" required class="form-control">
</div>
<div class="form-group">
<label for="width">Enter the Width of Embed Image</label>
<input type="number" value="600" id="width" class="form-control" required>
</div>
<div class="form-group">
<label for="height">Enter the Height of Embed Image</label>
<input class="form-control" type="number" name="" id="height" value="600" required>
</div>
<div class="form-group">
<button class="btn btn-danger btn-block">
Get Embed Links
</button>
</div>
</form>
<div class="form-group">
<label for="directlink">Direct Image Link:</label>
<input class="form-control" type="text" name="" id="directLink" readonly>
</div>
<div class="form-group">
<label for="embedcode">Embed Image Code:</label>
<input class="form-control" type="text" name="" id="embedcode" readonly>
</div>
<div id="result"></div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$("#form").submit((e) => {
e.preventDefault()
let url = $("#url").val()
let id = getIdFromUrl(url)
$("#directLink").val("<h1>Direct Image Link is </h1>" + `https://lh5.googleusercontent.com/oxHHXd5MFnzwRLEqM7QrZZgExAbKvgiE8-hv-GOFQWuw--FRwv93X1SMVdWk-TdLlFA=w2400`)
$("#embedcode").val(`<a href="https://lh5.googleusercontent.com/d/${id}=w${$("#width").val()}?"><img src="https://lh5.googleusercontent.com/d/${id}=w${$("#width").val()}-h${$("#height").val()}-p"/></a>`)
$("#result").html(`<a href="https://lh5.googleusercontent.com/d/${id}=w${$("#width").val()}?"><img src="https://lh5.googleusercontent.com/d/${id}=w${$("#width").val()}-h${$("#height").val()}-p"/></a>`)
})
function getIdFromUrl(url) { return url.match(/[-\w]{25,}/); }
</script>
</html>
