Node.JS Express Advanced YouTube Video Thumbnail Downloader in Javascript & EJS

You are currently viewing Node.JS Express Advanced YouTube Video Thumbnail Downloader in Javascript & EJS

Node.js Express Advanced Youtube Video Thumbnail Downloader in Javascript & EJS

const getVideoId = require("get-video-id");
const download = require("image-downloader");
const express = require('express')
 
const bodyparser = require("body-parser")
 
const app = express()
 
app.use(bodyparser.urlencoded({ extended: false }))
app.use(bodyparser.json())
 
app.set('view engine','ejs')
 
app.get('/', (req, res) => {
    res.render('index')
})
 
app.post('/downloadthumbnail', (req, res) => {
    const { id } = getVideoId(req.body.url);
 
    const thumbnailpath = __dirname + "/" + Date.now() + "thumbnail.jpg"
 
    const options = {
      url: "https://i.ytimg.com/vi/" + id + "/maxresdefault.jpg",
      dest: thumbnailpath, // will be saved to /path/to/dest/image.jpg
    };
 
    download
      .image(options)
      .then(({ filename }) => {
          console.log("Saved to", filename); // saved to /path/to/dest/image.jpg
          res.download(thumbnailpath, () => {
              console.log("successfully downloaded")
          })
      })
      .catch((err) => console.error(err));
})
 
 
// download the thumbnail
 
 
app.listen(5000, () => {
    console.log("App is listening on port 5000")
})

<!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>Advanced Youtube Video Thumbnail Downloader in Node.js & Express</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1 class="text-center">
            Youtube Thumbnail Downloader
        </h1>
        <form action="/downloadthumbnail" method="post">
            <div class="form-group">
                <input type="text" class="form-control" name="url" placeholder="Enter Youtube Video URL" required id="">
            </div>
            <div class="form-group">
                <button class="btn btn-danger btn-block">
                    Download Thumbnail
                </button>
            </div>
        </form>
    </div>
</body>
</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