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>
