Edit SRC in HTML - javascript

I have a problem with Node.js.
I want to save a link loaded in Node.js in my HTML document as a video element.
Can you help me with this? Can't find a solution to this...
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../Testggg/style.css">
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<section id="Search">
<div id="SearchContainer">
<form id="SearchField_Form">
<input id="SearchBar" placeholder="Type your Link here.." type="text">
<input type="submit" style="height: 0px; width: 0px; border: none; padding: 0px;" hidefocus="true">
</form>
</div>
</section>
<section id="VideoField">
<div id="VideoContainer">
<video id="VideoPlayer" src=""></video>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</body>
</html>
I don't have a JavaScript file because I need to include the link via Node.js.
I know how to embed normal YouTube videos with JavaScript. But I have not found a solution to Node.js.
I use the "YTDL-CORE" addon and have the direct YouTube link to the video read out in Node.js.
I would like to include this link in the HTML video src.
What exactly do I have to do?
I can't find a suitable answer.

If what you want to have happen is:
Click a button on the client side
Client sends a request to Node.js that includes a value
Node.js handles that value and returns a response to the client
Change the HTML on the client side based on that response
It sounds like the part you're missing is the client-side JavaScript.
While it also happens to be written in JavaScript, think of your Node.js backend as an entirely separate system.
Node.js handles requests at specified endpoints (the "backend") and responds with data
Javascript on the frontend is used to make requests to your Node.js backend
If you need to modify your HTML in the browser based on a user interaction, you will need some JavaScript in your HTML. Your HTML file needs to include some JavaScript which will send the request to your Node backend when that button is clicked.
Take a look at JavaScript's fetch method as one way to have your frontend JavaScript make a request to your backend.

Related

How to open files dialogue box to choose download destination in eel?

I know that in tkinter it is possible to open file dialogue box, but is there any way to do it in eel using python or even in javascript so that the download location can be obtained instead of hard coding to change the directory each time.
I used PyTube library of python,
from pytube import YouTube
link = input(" Enter YouTube video URL: ")
video = YouTube(link)
stream = video.streams.get_highest_resolution()
stream.download('local path')
And i created front end using front end technologies, it has only a box to paste url and a submit button.
On clicking submit button I'd want chrome to show a dialogue box to choose the download location to pass it inside stream.download('local path')
<!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>Downloader</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<h1>Downloader</h1>
<div class="line"></div>
<form action="">
<label for="">Enter YouTube video URL</label>
<input type="text" class="youtubeUrl" placeholder="Paste the URL here">
<button>Download</button>
</form>
</div>
</body>
</html>
Didn't give any class to the form, because it is going to be the only one in the web app.
Selecting a custom download location using pure JavaScript can be a pain because browser implementations severely limit the information (and access) they give you about the user's filesystem for security reasons. A web search for something like "HTML set custom download location" will bring up relevant results.
The good news here is that you can delegate that work Python, which will more easily allow you to select a download location (since Python is running outside of the browser's context). Since you already need to expose a Python function in order to get your Python code to run, just put the dialog box in that context... something like:
import tkinter
import eel
from pytube import YouTube
from tkinter import filedialog
root = tkinter.Tk()
root.withdraw() # hide this root window
eel.init("web")
#eel.expose
def download(link):
download_location = filedialog.asksaveasfile() # this will open the Save As dialog
video = YouTube(link)
stream = video.streams.get_highest_resolution()
stream.download(download_location.name)
eel.start("index5.html")
There are some non-standard/trick alternative options that may be supported on your target browser, so check out webkitdirectory, File_and_Directory_Entries_API, FileSaver.js, and Using HTML5/JavaScript to generate and save a file for more information about those if you want to stick with JavaScript.

How to transfer a file from my machine to another one in the vpn using only HTML5 and JavaScript

Is it possible to move a file from my local machine to another machine in my network using HTML5 and JavaScript only? If any jQuery or JavaScript plugin available can be used for this.
Thank you in advance.
Assuming you mean client side JavaScript embedded in a webpage: No, it isn't.
You can select a file using an HTML file input.
You can send that file using form submission or Ajax
However:
You can't delete the file from the client at all.
You can't make the destination machine do anything with the file submission.
If you were to use Node.js to run some or all of the JavaScript then:
You could write a (non-browser based) client that could send the file and delete the local version. This wouldn't have to use HTTP, so you could use SMB or SSH to transfer it instead.
You could write a server (such as an HTTP) to receive the file and save it to disc.
Actually Quentin is wrong in theory here, since "remote" was never mentioned. If your "other machine" has shares where you can save, you can run my example below. So YES, it is possible but it depends on file size. You can read out the params from a request with client-side code like JavaScript. File sizes acceptance defer per browser but this is tweakable with Chromium/Chrome for instance. It is even possible on some OS-es to do basic authentication by using the in URL authentication notation on the form action. So what you could do is:
Make a UI which makes you select a file in a form with method "GET"
On submit create a base64 encoded string with the FileReader API
Basic example without the FileReader API (index.html):
<!DOCTYPE HTML>
<html>
<head>
<title>"Upload" locally</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<form method="get" action="iwillsave.html">
<div class="input-group">
<label for="file">Pick a file:</label>
<input id="file" name="file" type="file">
</div>
<div class="form-actions">
<button type="submit">Submit</button>
</div>
</form>
</body>
</html>
In your "Save" page handle the file decoding and save it with the FileSystem API
Basic example without the FileSystem API (iwillsave.html):
<!DOCTYPE HTML>
<html>
<head>
<title>"Upload" locally</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="result"></div>
</body>
<script type="text/javascript">
function getParam(name){
if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search)) return decodeURIComponent(name[1]);
};
window.onload = function(){
var file = getParam('file');
document.getElementById('result').innerHTML = file;
};
</script>
</html>

Insert one HTML file into another HTML file [duplicate]

This question already has answers here:
Include another HTML file in a HTML file
(41 answers)
Closed 8 years ago.
I am making a huge website, with on all pages a navbar.
Is it possible to create the navbar in a .html file and import it into all the other pages,
and if so, how?
You can do this with HTML alone using Server Side Includes. Simplest example:
index.html
<html><head><title>Test</title></head>
<body>
<!--#include file="navbar.shtml" -->
</body>
</html>
navbar.shtml
<ul class="nav">
<li>Home</li>
<li>About</li>
</ul>
What you should never do is use framesets or iframes to do this. https://stackoverflow.com/a/15938545/822711
Please note, this will not work using the file:// protocol, it needs to run on a web server as it would in a live environment. This could be on a private or public server, or localhost using a server running on your computer such as wamp.
I prefer try to use Jquery,Like as
<!doctype html>
<html>
<head>
<title>Home page</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$('.header').load("header.html");
});
</script>
</head>
<body>
<div class="header"></div>
</body>
</html>
In same folder open a file with name header.html.Same thing you can apply for footer.
1) In html we can load other files into one html file using Iframe
<!DOCTYPE html>
<html>
<body>
<iframe src="header.html">
<p> display</p>
</iframe>
</body>
</html>
2) We can use jquery function to load the file into some specific div.
<script>
$(function(){
$('#header').load("header.html");
});
</script>
3) Use other languages like php , .net for that
we use php include and require for that
**Apart from using iframe there is no other way in html that we can include one html file to another.**
with PHP it's possible, but you have to change the files to .php files.
put this in the main file:
<?php
include("navbar.php");
?>
I don't know a good way with HTML
For this you need to add server side language if you are using PHP you can create a
nav.php file. In this file you can add the complete HTML of your navigation and you can
include this PHP file in your code instead of putting navigation HTML.
Like this
<?php include("nav.php");?>

Preview .doc/.docx/.pdf files before uploading to server

I'm using HTML5 File API to get some document(.doc/.docx/.pdf) uploaded. And I want to show that document preview before uploading it to server. Is there any way to do such thing on client side?
P.S. Google Docs Viewer isn't ok, because it requires document to be accessible from the internet.
I have tried to create little example and that would display PDF Preview before uploading PDF file.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript PDF Viewer Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function PreviewImage() {
pdffile=document.getElementById("uploadPDF").files[0];
pdffile_url=URL.createObjectURL(pdffile);
$('#viewer').attr('src',pdffile_url);
}
</script>
</head>
<body>
<input id="uploadPDF" type="file" name="myPDF"/>
<input type="button" value="Preview" onclick="PreviewImage();" />
<div style="clear:both">
<iframe id="viewer" frameborder="0" scrolling="no" width="400" height="600"></iframe>
</div>
</body>
</html>
Not sure if anyone still checks this thread, but i thought i'd share what i did.
Directly showing a preview isn't possible, but you can create a blob object of the selected file. Something like this (jQuery):
$('#input').change(function (event) {
var file = URL.createObjectURL(event.target.files[0]);
$('element').append('' + event.target.files[0].name + '');
});
This link will open a new browser tab and shows/downloads the file. This isn't really pretty but it works.
Here's an example: https://jsfiddle.net/j9gw023b/3/
No. This is not possible.
You want the browser to view a datafile it shouldn't. You have Office or PDF viewers (OK, granted, PDF ssems to be inside browsers now...) to view your data files.
If you want to show a preview in the browser, you have to upload it first and store it in a "for-preview" dir or something. When OK, move it to its final destination, otherwise, delete.
The File API will allow you to read the data from the file, but then you have the trouble of parsing it and rendering it. Mozilla have released a JavaScript PDF viewer, but I'm not aware of anything for MS Office files.
Back in the days you were able to do something like that:
<object data="word.doc">You do not have Word installed on your machine</object>
Not sure if this is still supported, but if so, you could use JS to inject that object onto the page to preview it.
Ajax upload your file,then after uploaded return path name and preview it.
blueimp's jQuery-File-Upload was great for me.
you can view its basic plugin.
https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin
You can do it with pdf, here is the tutorial:
https://usefulangle.com/post/87/javascript-preview-pdf-during-upload
Don't know if it is possible for doc/docx
You can do it using this web component: https://avipunes.github.io/file-viewer/
This web component under the hood uses some microsoft embedding endpoint:
https://view.officeapps.live.com/op/embed.aspx?src=${fileURI}
you can see an example here:
https://view.officeapps.live.com/op/embed.aspx?src=https://file-examples-com.github.io/uploads/2017/02/file_example_XLS_10.xls

Load data from text file with ajax/javascript into html problems

I want to load data from this text file that is in the same folder as the html file on my computer but it won't work. In process of learning Ajax and put together this little test for myself test.html and the text file test.txt. Any advice please, would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script>
function loadData()
{
var test;
test=new XMLHttpRequest();
test.onreadystatechange=function()
{
if (test.readyState==4 && test.status==200)
{
document.getElementById("test").innerHTML=test.responseText;
}
}
test.open("GET","test.txt",true);
test.send();
}
</script>
</head>
<body>
<div id="test"></div>
<button type="button" onclick="loadData()">Get data</button>
</body>
</html>
When I press the button, nothing happens. On the site where I saw a similar example the data from the text file is displayed above the button.
The problem is likely to be that you're accessing the files directly on your local system; web browsers have been designed not to allow this in order to prevent saved web pages loading personal files from your disks and uploading them to remote servers. In order to make it work, you'll need to run a web server locally and use that to view the files. I recommend the Apache web server, which is flexible and can be used on Windows, Linux or OSX.

Categories