CODEWITHSUNDEEP
javascripthtmlnode.jsvue.jsexpress
Emiel VdV
Emiel VdV

Reputation: 297

How to access file accessed from server.js and display it in the html

I am creating a youtube video downloader with express, html, javascript and later on I want to switch to vue.js.

This is my code:

Index.html

<!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>Document</title>
</head>
<body>
    <h1>My Own Youtube downloader</h1>
    <input class="URL-input" type="text" placeholder="enter...">
    <button class="convert-button">Convert</button>

    <script src="script.js"></script>
</body>
</html>

Script.js

var convertBtn = document.querySelector(".convert-button");
var URLinput = document.querySelector(".URL-input");

convertBtn.addEventListener("click", function () {
  console.log("URL : ${URLinput.value}");
  sendURL(URLinput.value);
});

function sendURL(URL) {
  window.location.href = `http://localhost:4000/download?URL=${URL}`;
}

Server.js

const express = require("express");
const cors = require("cors");
const ytdl = require("ytdl-core");
const app = express();

app.use(cors());

app.listen(4000, () => {
  console.log("Server is working at port 4000 !!");
});
app.get("/download", (req, res) => {
  var URL = req.query.URL;

  res.header("Content-Disposition", 'attachment; filename="video.mp4');

  ytdl(URL, {
    format: "mp4",
  }).pipe(res);
});

Right now, everything works fine. I just want to implement the functionality so you can see the youtube video on the frontend in the html.

Does anyone know how to implement this functionality?

PS: I rather don't use a database, only node and express for now

Upvotes: 1

Views: 176

Answers (1)

Sheikh Haziq
Sheikh Haziq

Reputation: 244

on server.js use

app.get("/download/:URL", (req, res) =>  {
var URL = req.params.URL;
res.header("Content-Disposition", 'attachment; filename="video.mp4');
ytdl(URL, {
    format: "mp4",
    }).pipe(res);
});

and main file, use

document.getElementById('video').src=`localhost:8080/download/${URL}`;

And in html file add

<video id="video" width="320" height="240" controls>
   
</video>

Upvotes: 1

Related Questions