I'm new in Node.js and I'm doing a local App with Node.js+HTML5+Javascript with which I would like to move files from one local folder to another local folder. The main functionality of this app is to get a local file "A", read its content, copy this content encrypted in another file "B", and then store "B" in other location and finally delete file "A" in the local system. The problem that I've found is on getting the real path of the first file, and I know that it is difficult to get it (as I've seen in several discussions) for security reasons, but I really need it in order to delete file "A". I realised that with my current code I only can get this real path in IE explorer. The main part of the code involved is the following, in which I'm only able to get the file name in both Firefox and Chrome:
index.ejs:
<!DOCTYPE html>
<html>
<head>
<script src="../scripts/get_file.js"></script>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<form method='get' action='/moveFile'>
<div id="page-wrapper">
<h1>File Browser</h1>
<div>
Select a file:
<input type="file" name="fileInput" id="fileInput">
<input type="submit" value="Upload File"/>
</div>
</div>
</form>
</body>
</html>
get_file.js:
window.onload = function() {
var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
});
}
fs_controller.js:
exports.moveFile = function(req,res) {
console.log(req.query.fileInput);
};
I've tried with the following options:
I've seen that bodyparser is only used for express 3.0, and I have
express 4.13.1.
I've tried with Busboy, without results.
I've tried with filepath utility, but it returns the path
where is the main script of the application, so it's not useful for
this case.
Formidable only returns a tmp path.
I've tried with multiparty, and it also returns a tmp path.
The only solution that may be could work is to modify some properties
in Firefox, like
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
and in Chrome, with --allow-file-access-from-files. However, I think
that it's not a clean solution.
I dont know if there are better solutions with Node.js to make this type of app. The main features that I actually need is to work with local files and folders (all types of basic operations with them), and to have a little database for storing the users of the app, and I would like to implement it with a MVC design pattern.
Thanks for your effort!
Related
To upload a local file to Google Drive, I have an HTML <form></form> (see code below) that displays in a modal overtop a Google Sheet the user has open. The HTML form has <input type="file" name="..."> in it, and when I click to send the form object, I successfully upload the file if this Google Apps Script is "bound" to a specific Sheets file (and was written using the Tools > Script Editor... menu).
If I save the script as a standalone script and then test it (installed and enabled) on a Sheets file of my choosing, then the <form>'s onclick action and the attempt to call google.script.run.aServerFunction(...) causes a "NetworkError: Connection failure due to HTTP 403". To clarify this is what I mean by creating a standalone script and testing it on a Sheets file: https://developers.google.com/apps-script/add-ons/#understand_the_development_cycle. In earlier code iterations I alternatively got a authorization scriptError of some kind. Same error when script is published privately for testers to use on a Sheet. Unfortunately, I think I need this as a standalone script that is later publishable as an add-on- not a side script bound to a single Sheet using the Tools > Script Editor... menu.
My first post to Stack Overflow- please forgive any jargon or typography mistakes, and thank you!
HTML adapted from tutorials:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
function failed(event) {
$("div.response").text(event);
//google.script.run.selectStuff();
//google.script.host.close();
}
</script>
</head>
<body>
<form id="myForm">
<label>Your Name</label>
<input type="text" name="myName">
<label>Pick a file</label>
<input type="file" name="myFile">
<input type="submit" value="Upload File"
onclick="google.script.run.withFailureHandler(failed)
.uploadFiles(this.parentNode);
return false;">
</form>
<div class="response"></div>
</body>
</html>
In the code.gs:
function uploadFiles(formObject) {
/*var sheet1 = SpreadsheetApp.getActiveSheet();
sheet1.setActiveRange(sheet1.getRange(2, 2, 4, 4));
var formBlob = formObject.myFile;
var driveFile = DriveApp.createFile(formBlob);
driveFile.addEditor("...");
SpreadsheetApp.getActive().toast(driveFile.getUrl());
sheet1.getRange(1,1,1,1).setValue(driveFile.getUrl());
return driveFile.getUrl();*/
return "it worked";
}
I believe the reason you are getting the HTTP 403 error is because form DOM elements are illegal arguments in google.script.run.myfunction(...) in sheet addons. Even though they are mentioned here as legal parameters here, I think add-on have the added restriction of not being able to pass any kind of DOM elements.
The solution I came up with is to convert the uploaded file to base64 encode string using Filereader.readAsDataUrl() function in native javascript and passing the string to google script and converting it back to a file to be uploaded into google drive.
The base64 encode string starts like this:
data:application/pdf;base64,JVBERi0xLjMKJcTl8uXrp/Og0MTG....
GAS
function uploadFiles(formObject) {
// extract contentType from the encoded string
var contentType = formObject.split(",")[0].split(";")[0].split(":")[1]
// New Blob(data,contentType,name)
// Use base64decode to get file data
var blob = Utilities.newBlob(Utilities.base64Decode(formObject.split(",")[1]), contentType, "trial")
var driveFile = DriveApp.getFolderById("your Folder ID here").createFile(blob);
//return contentType, can be anything you like
return blob.getContentType()
}
HTML script
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
</head>
<body>
<form id="myForm">
<label>Your Name</label>
<input type="text" name="myName">
<label>Pick a file</label>
<input type="file" id = "filemy" name="myFile">
<input type="button" value="Upload File"
onclick="upload(this.parentNode)">
</form>
<div class="response"></div>
</body>
<script>
function failed(event) {
$("div.response").text(event);
//google.script.run.selectStuff();
//google.script.host.close();
}
function upload(frmData){
var file = document.getElementById("filemy").files[0]
var reader = new FileReader()
//reader.onload is triggered when readAsDataURL is has finished encoding
//This will take a bit of time, so be patient
reader.onload = function(event) {
// The file's text will be printed here
console.log("File being Uploaded")
//console.log(event.target.result)
google.script.run.withFailureHandler(failed).withSuccessHandler(failed)
.uploadFiles(event.target.result);
};
reader.readAsDataURL(file);
console.log(reader.result)
}
</script>
</html>
Final notes: I have not extensively tested the code, I have got it to work with a pdf file and an image/png file with a Maximun size of 2.6MB. So please try these 2 file types out before going on to further types of file!
Also, files do take a while to upload so be patient(~5-10sec). Especially since there is no progress bar to show the upload progress, it feels like nothing is happening.
Hope that helps!
I have a problem trying to get the file path on chrome. This is my code with a javascript function:
<html>
<head>
<script language="javascript" type="text/javascript">
function getPath() {
var inputName = document.getElementById('ctrl');
var imgPath;
imgPath = inputName.value;
//alert(imgPath);
var x = document.createElement("INPUT");
x.setAttribute("type", "text");
x.setAttribute("value", imgPath);
document.body.appendChild(x);
}
</script>
</head>
<body>
<input type="file" name ="file1" id="ctrl" webkitdirectory directory multiple/>
<input type="submit" value="Enviar" onclick="getPath()"/>
</body>
</html>
when I press the button, the textfield show me this
C:\fakepath\ART.pdf
I tried to edit the internet explorer settings and it works fine, but I cant get the full path on chrome
Its any way to get the full path on chrome? Thanks
You are using the multiple and directory options so your paths will be avaible under inputName.files
For security reasons these will be relative paths. If you wish to read the files you need to use the FileReader API.
https://developer.mozilla.org/en-US/docs/Web/API/FileReader
I read in the comments that you are trying to save a file to a specific location. This can't be achieved through a browser. You just need to provide the file to be downloaded and the user will decide where to save it. Usually, it will be saved to the OS's default download folder.
I'm trying to take input from a form and save it into a text file that is in the same folder as the html file. This is what I have so far:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reservation</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<script>
function writeToFile(item, name, time)
{
alert("Hello " + item);
var fso = new ActiveXObject("Scripting.FileSystemObject");
var fh = fso.OpenTextFile("E:/labChart/etc/reserve.text", 8);
fh.WriteLine(item);
fh.Close();
}
function readFile()
{
var fso = new ActiveXObject("Scripting.FileSystemObject");
var fh = fso.OpenTextFile("reserve.text", 1, false, 0);
var lines = "";
while (!fh.AtEndOfStream) {
lines += fh.ReadLine() + "\r";
}
fh.Close();
return lines;
}
</script>
</head>
<body>
Reservation
<br>
<form>
Item:
<br>
<input type="text" name="item" id="item">
<br>
Name:
<br>
<input type="text" name="name" id="name">
<br>
Time:
<br>
<input type="date" name="time" id="time">
<br>
<br>
<input type="submit" value="Submit" onclick="writeToFile(document.getElementById('item').value, document.getElementById('name').value, document.getElementById('time').value)">
</form>
<script src="js/scripts.js"></script>
</body>
</html>
This does take the info from "item" and pass it to the function writeToFile() because the test alert does work. But whenever I check the file reserve.text nothing is written there. I'm very new to javascript and most of this is an amalgamation of code I saw other people using online for similar effects. Does anyone know why it is not working? Am I writing the path incorrectly? Am I not writing the script correctly?
The problem with this is simple: Lets say a developper created javascript code to go through all your filesystem and populate it with dummy files, ruining your hard drive in the process? That is why javascript won't allow you to do this kind of operation. When we want to save information, usually, its done using server-side code and not the client's computer (unless of course we are talking about things like cookies).
The point of my answer is to let you rethink who does the saving and to where. It should be up to the server to save and retain any information for a user, and so you would not write this kind of javascript code... It is best to save data somewhere your client cannot control or edit, like on the server for instance.
I could suggest some easy PHP code, and instead of storing inside a text file, try a database... PHP is a server-side language which will let you save things to files on your server computer, however your server must be able to run PHP, most computers don't come built in with the PHP language and so you will also need a webserver with php built-in..
In my opinion your entire approach is bad; you need to learn PHP and mySQL to store and load persistent data.
- Edit: accessing the file system from JavaScript is a huge security risk and therefore not allowed in general. Unless your goal is specifically to write files from JS, there are better alternatives.
Anyway, this code will only work on Internet Explorer, and only with the security settings way down. You shouldn't pursue this though.
If your end goal is to write a web app that stores and displays reservations, get XAMPP and find a beginner PHP + database tutorial.
I am trying to complete an exercise for one of my courses and my HTML file won't link with my Javascript file. I put the link between my HTML file and my Javascript file in the body of my HTML file but the files still won't connect. When I test this code in Microsoft Edge, the buttons simply do not work. Anybody know what the problem is?
HTML
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>HTML Page</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<button onclick = "startWorker()">Start Worker</button>
<button onclick = "stopWorker()">Stop Worker</button>
<ul id = "output">
</ul>
<script type = "text/javascript" src = "/js/script.js"></script>
</body>
</html>
Javascript
var worker;
function startWorker(){
worker = new Worker ("js/mod4_worker.js");
worker.onmessage = function(event){
document.getElementById("output").innerHTML += '<li>' + event.data + '</li>';
};
}
function stopWorker(){
worker.terminate();
}
Files
So, I would try my comments :
Change the script.js path to : "../js/script.js"
Change the worker passed script to "../js/mod4_worker.js"
As GGG said, using a path starting with "/", a slash, use the path from root. The full path is either :
Windows : file://DriveLetter:\REST_OF_PATH
Unix/Linux/OSX : file:///REST_OF_PATH
WebServer : http://domain/REST_OF_PATH
If the structure is from /webapp/ :
html/index.html
js/script.js
Accessing script.js from index.html needs to go back one folder (..) and then set the path seen here (js/script.js) which gives (../js/script.js) OR using full path (/webapp/js/script.js) which I wouldn't recommend because if you change "webapp" directory of location or URL (on WebServer)
Remove the / from your src in the index.html. So it should be
src = "js/script.js"
Why? When you begin the src value with a /, that means you're referring to an absolute path (in other words, it starts the path from your drive's root). My devtools shows it as
file:///C:/js/script.js
By removing the first / in your src, you're now doing relative pathing, and it will look in the correct place.
Permissions & File locations
(Stumbled on this Q and here's the only way I solved it...)
For me, I found it was a permissions and file location issue...
I'm running a local webserver on Ubuntu 18 Desktop, working with dev from a local folder linked to the web directory: /var/www/html/MY_DEV -> /home/me/MY_DEV. So, the www-data user couldn't actually "own" them like it needed to.
I use this setup just fine for PHP, HTML, and CSS just fine. But, if I include a javascript file via src="", no matter what I do, it doesn't work.
The only way I could get it to work on my desktop is if BOTH the served file (somefile.php or somefile.html) are physically at /var/www/html/...
And, of course accessing them at localhost/...
And, of course owning them obsessively with sudo chown -R www-data:www-data /var/www/html
Goal:
To sum it up, I'm trying to replace an excel spreadsheet. I'm creating an application that will run in IE9, but does not connect to the internet or an intranet (I know, I know. Just bear with me. If you're curious read more below). It needs to use CRUD (create, read, update, and delete) methods on a set of data that changes daily. The dataset must persist even when the browser is closed.
Question:
What options are available, using javascript and html, for storing data on the local computer the web page is accessed on? I'm doing this at work, so there will be no server-side to this. I also will not be able to install any software on the computer, although I can download javascript plugins. The webpage will be loaded from a file on the computer, using Win 7 and IE9.
Background:
This deserves an explanation. I use an excel spreadsheet to track a set of data that changes daily. I'm learning HTML and javascript, and I can create a much better (and easier to use) solution as a webpage. I can create the UI / UX, but I'm having a difficult time figuring out how to store the data on the local computer. Any good suggestions?
Attempts:
Unfortunately, it seems localStorage is not an option. I'm attempting to use jStorage, but I've been running into problems there, also. A similar set of problems has been encountered using simpleStorage.
Thank you for considering, please let me know if any more info is needed, or if I need to clarify something.
Addendum:
Localstorage, and other forms of HTML5 storage, do not work. Officially it does, unofficially it is very buggy. See blog post here, and SO answer here. Either way, with the following simple code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Backlog Tracker</title>
<script src="jquery-2.1.1.min.js"></script>
<script src="backlog_localstorage.js"></script>
</head>
<body>
</body>
</html>
and javascript (ref as "backlog_localstorage.js" above):
$(document).ready(function(){
$("body").append("<button>Try It</button>");
$("button").click(function(){
localStorage.setItem("key1", "Hello");
console.log(localStorage.getItem("key1"));
});
});
... I get the following error: "SCRIPT5007: Unable to get value of the property 'setItem': object is null or undefined" on the line localStorage.setItem("key1", "Hello");
HTA (which is really just an html file with one extra tag and a different file extension) is one possible solution for windows users:
Important: Save as demo.hta to run on windows as an app
<!DOCTYPE html>
<html> <!-- some parts lifted from
http://msdn.microsoft.com/en-us/library/ms536496(v=vs.85).aspx
http://msdn.microsoft.com/en-us/library/ms536473(v=vs.85).aspx
-->
<head>
<title>State Saving Demo</title>
<hta:application id="App"
application="yes"
applicationname="demo"
icon="calc.exe"
border="thin"
caption="yes"
sysmenu="yes"
showintaskbar="yes"
singleinstance="yes"
sysmenu="no"
maximizeButton="yes"
minimizeButton="yes"
navigable="no"
scroll="yes"
contextmenu="no"
selection="no"
windowstate="normal" >
<!-- Use Internet Explorer 10 Standards mode (to use JSON, CSS3, etc...) -->
<meta http-equiv="x-ua-compatible" content="IE=10">
</head>
<body onload=loadMe() >
<h1 id=h1>Command-line args: </h1>
<h3>Persisted Text</h3>
<textarea rows=20 cols=100 id=mydata onchange=saveMe() >
You can change me and i won't forget!
</textarea>
<script>
document.title+=" - Today is " + Date(); // task/title bar demo
h1.innerHTML+= JSON.stringify( App.commandLine ); // optional invocation info here (much like a real app)
// app-specific custom code:
FILENAME="state.txt";
function saveMe(){save(FILENAME, mydata.value); }
function loadMe(){mydata.value=load(FILENAME) || mydata.value;}
// generic utils:
function load(filename) { //IE FSO file Loader
var file,
text="",
fso= new ActiveXObject('Scripting.FileSystemObject');
try{
file = fso.OpenTextFile(filename, 1, false);
text = file.readAll();
file.Close();
}catch(y){}
return text;
}
function save(filename, sData){ //IE FSO file Saver
var file,
fso = new ActiveXObject('Scripting.FileSystemObject');
file = fso.CreateTextFile(filename, 2, false);
file.write(sData);
file.Close();
return file;
}
</script>
</body>
</html>
I recently re-discovered HTAs, and they are not half bad. I don't think I would want to distribute and maintain them, but HTA's are an easy way to make simple desktop app using HTML, CSS, and JS. Its nice not to have to build anything to "recompile" the app after changes are made. saves a few steps compared to node-webkit, packaged apps, air, cordova, etc, but HTA's have a major downside: they only work on windows afaik...
Looks to me like you can use LocalStorage, the big question is how are you trying to store it? You can easily store an object/array into LocalStorage, and that object/array can be your data, then JS can output this into a table. If you're looking to store actual files then you're looking at something more like an ActiveX plugin.
http://caniuse.com/#search=localstorage
Alternatively if you have internet access through a desktop or a phone you can put this on Google Drive. This would be far easier than reinventing the wheel.