Javascript Project to Embed Google Drive Images & Files Using URL on Website

You are currently viewing Javascript Project to Embed Google Drive Images & Files Using URL on Website

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>

Ranjith

Hi, I'm Manoj a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Diksha. Here, I post about programming to help developers.

Leave a Reply