Allow user to import a file from a Greasemonkey script? - javascript

From what I can gather this does not even seem possible but here goes:
I am finishing up a Greasemonkey script. In this script the end user is able to save certain things to an html5 localStorage variable (not the purpose of the script, only for one part of it).
Since a cache clear can wipe these storage values I have created an export feature which is simply an unknown datatype which forces a download of the file.
data:something;charset=utf-8,'+encodeURIComponent(somevariable)
My question is on creating an import feature. Since the file saves with no extension and this script will be used exclusively in Linux, opening the file directly in a text program and pasting the data into a textarea would be an easy way to import.
However, is there any way without some sort of server-side scripting or external server to let the user choose a file to import?
Such as a dialog box that allows the end-user to select the file from the computer in which I can then manipulate from my end?

HTML5 introduces the HTML5 File API
Using the File API, which was added to the DOM in HTML5, it's now possible for web content to ask the user to select local files, then read the contents of those files. This selection can be done by either using an HTML element, or by drag and drop.
You can hook on change events and check evt.target.files;
Also, you can use Blobs to handle your data, you don't have to rely on data uris.
Here is a good tutorial about it

HTML 5 File API to the rescue!
http://www.html5rocks.com/en/tutorials/file/dndfiles/
Not supported in IE9, but most modern browser do support it :
http://caniuse.com/#search=file%20api

Related

Reading and using data from user files in Javascript (web application), without uploading them

I'd like to have a way for a webpage -which is generated dynamically by my server- to read all the files in a specific user folder, manipulate them using javascript, within the web browser, and using them to show to the user some results (specific correlations between the data, dependent on the context and sometimes some graphs, drawn using these correlations).
Communication with the server about these data is neither required nor desired. Actually, since all the manipulations needed can be done via javascript and the files can be huge, for now I absolutely don't want that their content is uploaded to the server. Therefore there are no security risks (at least none that I can see).
Server side, I'm only interested to save the name of the folder, so that the user (who is registered) doesn't need to select the files one by one or to select them again every time a new page is dynamically created.
For now, the only hopes to find a solution that I have been able to gather are about using the Chrome FileSystem API (but I'd prefer a general solution, not dependent on a specific browser) or creating an extension that the user should install to use this feature when visiting the website (which, for me, is maybe even worse than relying on a specific browser).
So I wonder if there is a way to implement this feature using only pure javascript and HTML5 and using neither extensions nor browser dependent solutions.
Due to security reasons, JavaScript running in the browser should not be used to access the filesystem directly. But definitely you can access it using Node's fs module (but that's on the server side).
Another way is, if you let the user pick files using the <input type="file"> tag then you can use the File API to fetch the contents. But I think that is not what you are looking for.
Recommended reading: https://en.wikipedia.org/wiki/JavaScript#Security

How to make a HTML file auto savable?

I need to create a single html where the person can input text in text fields, then click a button and save the file itself, so he wont lose changes. The idea is similiar to what wysiwyg does to html documents, but I need that to be implemented on the doc itself.
Where do I start from? I can't find anything like that on Google, perhaps I'm searching the wrong therms.
Need something that uses HTML + Javascript, no server side scripting.
JavaScript alone does not have the ability to modify files on your file system. All browsers do this for (good) security reasons. You will not be able to make changes to the html document itself (but according to the comment by Sean below, you might be able to produce a new copy of the document).
You might try using cookies to store the input values (automatically write them and load them when the document opens). There are various jQuery plugins available to aide in reading and writing cookies.
In business or enterprise systems this is usually done with a database, which would require server-side scripting.
I think most of these answers are incorrect. Using the FileSystem API, content is only saved to a sandboxed hidden folder, the user has no control as to where it is saved.
As suggested by Sean Vieira, using TiddlyWiki is a good solution.
However, if you want to customise it, you can make a Flash/JS bridge in which the Flash SWF saves the actual content.

Async file upload in IE 9 and 10 only

Objective
I am creating a web application and have been looking for an async file upload solution other than iframe and form support.
Browser Support
I am fully willing to exclude everything but IE9+. IE tends to be the browser I have the most trouble with.
Goal
I have a table and I want to be able to click on a link, show a file dialog and then upload the file immediately after selection. No page refresh.
More specifically I am trying to figure out how Trello does their file uploads. After looking through the javascript, I found that they bind the the file input to an on change listener, but after that I can't see what they are doing. Im under the impression that they use websockets with node.js to transfer data, but after doing a little research, most people say that websockets wouldn't be good for that. Trello blocks all versions of IE except 9 and 10 so I looked into HTML5 File upload think that may be a solution. However, after some research IE9 does not support the HTML5 File API.
Question
So finally I am looking for some way to upload files without the iframe and form solution. Can someone list the possible methods I could use?
Sidenote
I am using Rails for backend and Ember.js for front end.
If the browser does not support the File API and XMLHttpRequest level 2, there is no other way to upload files in an async/"ajaxy" manner other than reverting to the hidden iframe method. You could, of course, use Flash or Java, but neither of those (especially Java) seem like a good solution to me.
Regardless of the browser, you will have to include a file input element on the page if you want to provide a file chooser for the user. The onchange listener you speak of is vital to determining when the user has actually selected a file or files. In browsers that support the File API, you can also allow users to drop files they wish to upload onto your page. This behavior alone does not require a file input element.
IE9 and older do not support the File API.
I'm quite familiar with this territory as I maintain a fairly popular javascript-only upload library: Fine Uploader.

Multiple File Select in IE9 and Passing FileReference Data to Javascript

So, Ive created a HTML5 XHR multi file uploader using javascript and jquery. Now I want to be able to offer a flash based fall back for browsers who only allow the selection of one file at a time (like Internet Explorer).
My question is, can I get flash to pass any of the raw file data over to javascript?
If I cannot get at the raw file data through an External Interface call, is there anyway I can give javascript enough information from flash for it to get the file data itself?
Failing all of this, what is the best way of offering multiple file selection in IE9?
TIA.
You should be able to pass ByteArray through ExternalInterface.
See http://ria.dzone.com/articles/javascript-flash

Is there any way to manipulate files located on disk via JavaScript or Chrome Extensions?

Im trying to develop little app that loads details from JSON and then manipulate files selected by user (these files are located on the local disk).
Is there any way to implement it in JavaScript, HTML5 or Chrome Extensions?
I've found solution using NPAPI, but that is too much effort for me (faster I'll make that app in Qt with Python, or Qt with C++...).
Cheers.
You can manipulate files that were selected by user (through the file input and HTML5 File IO), but without NPAPI, you have no direct [r/w]-access to the filesystem (with an exception to HTML5 localStorage, which is a sandboxed environment within your extension).
Thus - depending on your requirements, a standalone app might be a better choice.

Categories