How do I use fs.writeFile in HTML (using node.JS)? - javascript

So I've been searching for hours on this topic, and still have not found any real way to achieve what I'm trying to do here.
Simply, I just want to write some text to a text file through the use of a button in HTML. This is what I have:
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
</head>
<body>
<button onclick="write_text()">WRITE FILE</button>
<script>
function write_text(){
var fs = require('fs');
fs.writeFile("test.txt", "okay this is epic", function(err){
if (err) return console.log(err);
console.log("Nice");
});
};
</script>
</body>
</html>
I'm unsure as to why this doesn't work, do I need to make a separate .js file for the function that the button references?
Any help would be appreciated,
Thanks.
EDIT: I'm trying to save the file to my GoDaddy server so that I can access it later, not just download the file. Testing it locally, it should create a file in the directory of my html document.

As was stated before, you do not do it right.
it is very important to say that node.js is a runtime environment, and simply putting an HTML file with JS code on GoDaddy does not make it "server-side", since the code runs on the browser and not on the server.
What you really want to do is either using Blob as stated before or doing something like this (if you want to use node.js):
var express = require('express')
var app = express()
app.post('/<your_path>', function (req, res) {
writeToFilexx(/*Here you may want to pass data using body parser*/)
})
/*
Here you will start the server
*/
Please note, writeToFilexx is a function you have to implement using fs.
on the client side, you will have to send the server a request with the data you want to write to a file.
It goes like this:
1. client sends data to the server.
2. server gets data (handles the request).
3. server process, and stores data.
As you have probably guessed, the file will be saved on the server, not on client's PC.

You can't do it in the way you want (not server side, no node, then no fs in this context), but there is a workaround creating a blob:
function downloadURL(url, name) {
var link = document.createElement("a");
link.download = name;
link.href = url;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
delete link;
}
function downloadFile() {
var data = "okay this is epic";
var blob = new Blob([data], {type: 'text/txt'});
var url = window.URL.createObjectURL(blob);
downloadURL(url, "test.txt");
}
Call downloadFile() in your button.

Related

Why my ZIP file from NodeJS server is not readable?

I'm making a web service that will return some generated zip files to a client.
Currently I did a really simple code for my test and when I query directly this service the ZIP file is well returned. In a near future, I'll need to pass some parameters through the header and so a simple link on the client side will not do the job.
So I decided to use XmlHttpRequest on my client to query the resource and download it as a simple file. The problem comes here, when I generate the download with the server response, the zip file doesn't work.
Here is the NodeJS code (with express) :
.get('/myservice', function(req, res)
{
res.setHeader('Content-Type', 'application/zip');
const JSZip = require('jszip');
const zip = new JSZip();
zip.file('hello.txt', 'Hello world\n');
zip
.generateAsync({type: 'nodebuffer'})
.then(function(content)
{
res.send(content)
}.bind(res));
}
Here is the client side Javascript that call the service and then make a file from the answer :
var req = new XMLHttpRequest();
req.open("GET", "https://mydomain/myservice", false);
req.send(null);
function download(filename, text)
{
var element = document.createElement('a');
element.setAttribute('href', 'data:application/zip;charset=base64,' + text);
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
console.log(req.responseText)
download('test.zip', req.responseText);
I think that I completely miss understand the encoding on the client, but I didn't find the solution.
The downloaded file, when unzip, give me a file that contain the same zip that also do the same thing.
When I call the service with XmlHttpRequest, it is well called and does not throw any error.
I'm using JSZip to generate the zip.
I precise that I can't use blob on generateAsync from JSZip because that throw me an error.
Any solution ?
You dont need to make it so complicated. As you are piping a file already. Just use window.open('/myservice'); as the browser will handle the fact its a file and keep the current page open and download the file.
https://codesandbox.io/s/hardcore-euclid-9nkft

How to download a file in the browser directly from the node.js server side without any variable?

My app is created with mean and I am a user of docker too. The purpose of my app is to create and download a CSV file. I already created my file, compressed it and placed it in a temp folder (the file will be removed after the download). This part is in the nodejs server side and works without problems.
I already use several things like (res.download) which is supposed to download directly the file in the browser but nothing append. I tried to use blob in the angularjs part but it doesn't work.
The getData function creates and compresses the file (it exists I can reach it directly when I look where the app is saved).
exports.getData = function getData(req, res, next){
var listRequest = req.body.params.listURL;
var stringTags = req.body.params.tagString;
//The name of the compressed CSV file
var nameFile = req.body.params.fileName;
var query = url.parse(req.url, true).query;
//The function which create the file
ApollineData.getData(listRequest, stringTags, nameFile)
.then(function (response){
var filePath = '/opt/mean.js/modules/apolline/client/CSVDownload/'+response;
const file = fs.createReadStream(filePath);
res.download(filePath, response);
})
.catch(function (response){
console.log(response);
});
};
My main problem is to download this file directly in the browser without using any variable because it could be huge (like several GB). I want to download it and then delete it.
There is nothing wrong with res.download
Probably the reason why res.download don't work for you is b/c you are using AJAX to fetch the resource, Do a regular navigation. Or if it requires some post data and another method: create a form and submit.

How to download a URL in JavaScript (Nodejs)?

I used this link to make an original link into a download link:
https://milanaryal.com/2015/direct-linking-to-your-files-on-dropbox-google-drive-and-onedrive/
Now how do I actually use that download link to download the file in JavaScript? I want to do something like:
link = 'https://drive.google.com/uc?export=download&id=FILE_ID';
let x = download(link); //now x is the download file
I looked it up and it seems like there are ways of doing this with HTML/jQuery, but I am not using those because I am working on the server side with Nodejs. I am doing this download thing because I want to check if the file is a pdf or text, parse the text, and then search through it using Elasticsearch.
It's easiest to use a module such as Request to do a HTTP get from a node script.
For example:
var request = require('request');
request.get('https://drive.google.com/uc?export=download&id=FILE_ID',
function(err, res, body){
if(err) return console.log(err);
console.log(body);
});
Once the file has downloaded, the callback function is run with the downloaded file in the body variable
If you only want to download the file, open it, search for data and delete it, you can easily edit this code snippet: https://stackoverflow.com/a/11944984/642977

How to stream video data to a video element?

I have a Node.js process which outputs a video stream into my Node.js app.
On the client end, there is a <video> tag. I would like to stream the video from Node.js into the src attribute of the video tag. My previous experience tells me that we must use the blob object for this. However, I'm not a hundred percent certain how and why I would use it.
Another possible solution I'm thinking of is to create some sort of a temporary file on my server, then write the stream to that file, then serve that file as the source for the video. However, that doesn't seem intuitive. I was wondering, then, if there is a more established solution for an issue like this.
m3u8 format is commonly used for streaming.
Video streaming/transcoding is a resource intensive thing. I would suggest you to use third party service to do so, if you have that option.
Probably you might want to look at the following options:
BinaryJS. It's bidrectional realtime binary data transfer tool based on websockets.
JSMpeg stream-server (in case of capturing) from Phoboslab guys. All you need to do is start ffmpeg and point it to the domain and port where the nodejs script is running.
More info you can find here.
Pipe a stream directly. Good answer is posted here. In few words you just need to specify Accept-Ranges, Content-Range, Content-Length and Content-Type headers, then create relevant Read stream (with start and end options) and pipe it to the response object.
I've actually tried this at a hackathon two weeks ago. I ended up barely getting this flv stream to work, which I've posted below. My intent was to make a library to automate much of the processes this would entail.
As you can see, I've opened a new port on the server to handle the separate stream of data flowing to the client. This is reflected in the client's src tag.
THREE THINGS YOU NEED:
This Linux version of ffmpeg.
Flowplayer on the js side.
npm fluent-ffmpeg
// StreamServer.js
var express = require('express'),
app = express(),
ffmpeg = require('fluent-ffmpeg');
module.exports = function () {
app.stream(req, res)
{
res.contentType('flv');
// make sure you set the correct path to your video file storage
var pathToMovie = '/path/to/storage/' + req.params.filename;
var proc = ffmpeg(pathToMovie)
// use the 'flashvideo' preset (located in /lib/presets/flashvideo.js)
.preset('flashvideo')
// setup event handlers
.on('end', function () {
console.log('file has been converted succesfully');
})
.on('error', function (err) {
console.log('an error happened: ' + err.message);
})
// save to stream
.pipe(res, { end: true });
};
}
//routes.js
'use strict';
var stream = require('../controllers/streaming.server.controller'),
streamServer = require('../controllers/StreamServer.js'),
express = require('express');
//streaming.server.controller.js
module.exports = function (app) {
app.get('/api/stream', function (req, res) {
streamServer.stream(req, res);
});
};
var path = require('path'),
express = require('express'),
app = express(),
routes = require('../routes/routes.js')(app),
ffmpeg = require('fluent-ffmpeg');
app.listen(4000);
EDIT: Client side part:
https://github.com/fluent-ffmpeg/node-fluent-ffmpeg/tree/master/examples/flowplayer
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="/flowplayer.min.js"></script>
<title>node-fluent-ffmpeg</title>
</head>
<body>
<!-- this A tag is where your Flowplayer will be placed. it can be anywhere -->
<a
href="http://localhost:4000/api/stream"
style="display:block;width:520px;height:330px"
id="player">
</a>
<!-- this will install flowplayer inside previous A- tag. -->
<script>
flowplayer("player", "/flowplayer.swf");
</script>
</body>
</html>
(Just change the href attribute)

Save File From Local Data in Javascript

Heres the scenario:
User comes to my website and opens a webpage with some javascript functionality.
User edits the data through javascript
User clicks on a save button to save the data, thing is, it seems like they shouldn't need to download this data because its already in javascript on the local machine.
Is it possible to save data from javascript (executing from a foreign webpage) without downloading a file from the server?
Any help would be much appreciated!
For saving data on the client-side, without any server interaction, the best I've seen is Downloadify, is a small JavaScript + Flash library allows you to generate and save files on the fly, directly in the browser...
Check this demo.
I came across this scenario when I wanted to initiate a download without using a server. I wrote this jQuery plugin that wraps up the content of a textarea/div in a Blob, then initiates a download of the Blob. Allows you to specify both file name and type..
jQuery.fn.downld = function (ops) {
this.each(function () {
var _ops = ops || {},
file_name = _ops.name || "downld_file",
file_type = _ops.type || "txt",
file_content = $(this).val() || $(this).html();
var _file = new Blob([file_content],{type:'application/octet-stream'});
window.URL = window.URL || window.webkitURL;
var a = document.createElement('a');
a.href = window.URL.createObjectURL(_file);
a.download = file_name+"."+file_type;
document.body.appendChild(a);
a.click(); $('a').last().remove();
});
}
Default Use : $("#element").downld();
Options : $("#element").downld({ name:"some_file_name", type:"html" });
Codepen example http://codepen.io/anon/pen/cAqzE
JavaScript is run in a sandboxed environment, meaning it only has access to specific browser resources. Specifically, it doesn't have access to the filesystem, or dynamic resources from other domains (web pages, javascript etc). Well, there are other things (I/O, devices), but you get the point.
You will need to post the data to the server which can invoke a file download, or use another technology such as flash, java applets, or silverlight. (i'm not sure about the support for this in the last 2, and I also wouldn't recommend using them, depends what it's for...)
The solution to download local/client-side contents via javascript is not straight forward. I have implemented one solution using smartclient-html-jsp.
Here is the solution:
I am in the project build on SmartClient. We need to download/export data of a grid
(table like structure).
We were using RESTish web services to serve the data from Server side. So I could not hit the url two times; one for grid and second time for export/transform the data to download.
What I did is made two JSPs namely: blank.jsp and export.jsp.
blank.jsp is literally blank, now I need to export the grid data
that I already have on client side.
Now when ever user asks to export the grid data, I do below:
a. Open a new window with url blank.jsp
b. using document.write I create a form in it with one field name text in it and set data to export inside it.
c. Now POST that form to export.jsp of same heirarchy.
d. Contents of export.jsp I am pasting below are self explanatory.
// code start
<%# page import="java.util.*,java.io.*,java.util.Enumeration"%>
<%
response.setContentType ("text/csv");
//set the header and also the Name by which user will be prompted to save
response.setHeader ("Content-Disposition", "attachment;filename=\"data.csv\"");
String contents = request.getParameter ("text");
if (!(contents!= null && contents!=""))
contents = "No data";
else
contents = contents.replaceAll ("NEW_LINE", "\n");
//Open an input stream to the file and post the file contents thru the
//servlet output stream to the client m/c
InputStream in = new ByteArrayInputStream(contents.getBytes ());
ServletOutputStream outs = response.getOutputStream();
int bit = 256;
int i = 0;
try {
while ((bit) >= 0) {
bit = in.read();
outs.write(bit);
}
//System.out.println("" +bit);
} catch (IOException ioe) {
ioe.printStackTrace(System.out);
}
outs.flush();
outs.close();
in.close();
%>
<HTML>
<HEAD>
</HEAD>
<BODY>
<script type="text/javascript">
try {window.close ();} catch (e) {alert (e);}
</script>
</BODY>
</HTML>
// code end
This code is tested and deployed/working in production environment, also this is cross-browser functionality.
Thanks
Shailendra
You can save a small amount of data in cookies.

Categories