I want to save a file with data input by the user on a website to the user's device using showSaveFilePicker() in Javascript (purely locally used).
This is currently not supported by all browsers, especially not on mobile devices.
I need a way to check, if the browser used is offering showSaveFilePicker(), so that I can offer a download to the standard folder if showSaveFilePicker() is not available.
How can I check for that?
Using try-catch does not work, as the error will also be thrown when the user aborts saving - which should of course not lead to a saving of the file.
I found the solution:
Check the availability with
if('showOpenFilePicker' in window){}
Related
We are currently looking at porting a enterprise silverlight application over to html5. The major roadblock that we have hit is the ability to open files from the user's local disk. Currently they have a document library which just links to files on their computer that they can open from within the app and view or print out. All that I read is that you can only access the local sandbox of the web app with the html5 file api's. We want to load these files from code.
Does anyone know of any workarounds to this?
Thanks
There is no way for html5 to access local file without user selection. But FSO: FileSystemObject works for IE and MAYBE could be regarded as a work around. But still there are some requirements to meet.
It is possible to use chrome's filesystem API to access files on a users local filesytem. So you'd have to be willing to make this a chrome only application.
Using java you can create a "Signed" applet which has access to the local filesystem. (if the applet is signed you can request filesystm permissions)
then there is a tutorial for accessing methods of your java code directly from javascript here: http://docs.oracle.com/javase/tutorial/deployment/applet/invokingAppletMethodsFromJavaScript.html
you should be able to perform something similar from silverlight.
There is no workaround in pure HTML5/Javascript. You need the use of plugins, such as Java or Silverlight (maybe you shouldn't port it after all). As for workarounds, HTML5 gives you an easy way drag and drop multiple files that you could transfer on the server and then display back to your users. Another workaround would be to install a custom agent (a software with only a tray icon) that would send the information about the current user "document library" to server and then again, you could display it back to the user.
Note: I've heard somewhere that browsers will eventually stop supporting plugins. http://www.howtogeek.com/179213/why-browser-plug-ins-are-going-away-and-whats-replacing-them/
Ya, I agree with Markain. However, if you were to limit your audience solely to chrome users, I daresay, you would most likely use some of your users. If Huazhihao is right, then your number of leaving customers should decrease but users who regularly use firefox won't be happy. Overall, I think that this will not work. Otherwise, there would be too many websites that trashed your hard driver (or at least wherever you have the rights to edit/delete files). I think it would be best if your product was setup to synchronize the file whenever an internet connection was detected and a change was made to the file. That way the user would not need to visit the website whenever the file was uploaded. If this is some kind of an error file, then it would be most beneficial if you were to make a link in the application that when clicked, would upload the file to the website and the website were to do whatever was necessary. If this is a purely online thing, then I don't see what business you would have looking through other peoples' files =-). Hope I helped!
Problem:
User has N browsers installed. As an application I want to store a data shared between all installed browsers.
Requirements:
Support IE9
Possible solution for now: WebSQL using polyfill.
Any another suggestions?
With HTML5 and some of the new JS APIs, there might be a few options.
The newish File API supports everything but IE9. As discussed in this question, you can fill in IE9 support using ActiveX or Java, which ought to do the trick. Because of the sandboxing, this may not immediately allow the browsers to completely interoperate.
If taking user input is an option, I would suggest having the user select and load their preferences file when the app loads. By opening a native file browse dialog, you allow the user to select whatever file they desire, and can use the file API to load the contents and process them.
You can use a similar technique for saving the data, either saving to the file sandbox or opening a specially-formed link (the download attribute) to indicate the browser should save a file. Again, you'll run into IE9 issues that will require ActiveX or Java to fill in.
You can see an example of reading a file from an <input type="file">, which is likely your best option. There are also multiple libraries for file upload (note, I have not personally used any of these).
The set-up in question:
I have a stand alone, offline, kiosk mode instance of Chrome running on a Windows machine. I have full access to the system and any admin rights. I can start Chrome with any flags set or unset.
The task:
I have been asked to create a log file which tracks user activity within the offline app I am coding. It's a simple form of analytics which will append each event to the end of the file separated with a comma. The file will then be sent to a server once a day via a scheduled task. (None of this is my idea so please don't troll me)
Ruled out:
Any server side code - I have lobbied for Node, PHP etc but as this will be distributed to many different installations so we cannot guarantee this will be installed.
Flash/ActiveX/Java - ideally would like to avoid this (even though these will be installed by default)
Possible solutions:
File API - I have looked at this but AFAIK if opens dialogue boxes to save the data to each file and this needs to happen in the background.
Security - I have read in other SO Questions that this can be achieved if the security settings are reduced but no-one goes on to explain which ones. Is there a simple flag which allows it?
How to enable local file system read write access from Google chrome? - similar question!
Ideal result: (something akin to PHP)
$file = 'log.txt';
$current = file_get_contents($file);
$current .= ",clicked:link";
file_put_contents($file, $current);
Possible ideal side result: proving this isn't possible and forcing PHP/Node/Java to be used ;)
In reply to those suggesting local storage : I'm not storing unique key/value pairs and that is very much like setting a cookie. Similarily there are file size limits.
To those suggesting web SQL such as SQLite in chrome - there are file size limits if it's not a chrome extension. The only way I see that working is if I were to find the location of the file in the windows directory (C:\Users\%USERNAME%\AppData\Local\Google\Chrome\User Data\Default\databases) and upload that from the schedules task. Perfectly feasible but it is not a desirable answer.
You could use HTML5?
http://diveintohtml5.info/storage.html
var foo = localStorage.getItem("bar");
// ...
localStorage.setItem("bar", foo);
You can use the Chrome Apps File API, you will need to grant access to the file via a user action once, but after that you can get access the file again by using restoreEntry
You can use localStorage to save offline data. It's impossible to access other files using Javascript since it's a violation of the sandbox.
From http://en.wikipedia.org/wiki/JavaScript#Security:
JavaScript and the DOM provide the potential for malicious authors to deliver scripts to run on a client computer via the web. Browser authors contain this risk using two restrictions. First, scripts run in a sandbox in which they can only perform web-related actions, not general-purpose programming tasks like creating files.
You may want to look into Local Storage which is part of the HTML5 spec.
This will only be supported in modern browsers though.
If you need to use older browsers then may still be able to achieve what you're after using dojox.storage
Use HTML5 features like Web Storage or Web SQL database to store your logs.
Whenever needed read logs from the client side storage and send it back to the server & delete the client storage.
Refer http://www.html5rocks.com/en/features/storage.
how can you retrieve the data from a document with javascript that isn't the page you are on if you have the url of the new document.
what i am trying to do is create a page that has a text field for providing a local file name and a button that retrieves the words from the document provided.
thanks.
HTML5 has a File API that lets you read local files. It's supported in at least Firefox (3.6 and later, I think) and Chrome. I don't know if any other browsers support it yet or not. If you need to support other browsers, you'll have to fall back to something like Flash, but I don't have any experience with that.
Unfortunately, by default Chrome doesn't allow local files to access other local files (each file is considered to be from its own domain). You can explicitly allow it by adding the --allow-file-access-from-files flag when you launch Chrome.
Here's a good introduction to the File API with several examples: http://www.html5rocks.com/en/tutorials/file/dndfiles/.
Browser security does not allow direct access to the local filesystem. If it could, web pages would be able to steal any file of your machine.
HTML5 local storage does allow local access, but on a different principle.
Is it possible to edit a local file without uploading to the browser?
Let's say the client has an HTML file, I want him to be able to use my site's javascript to edit the file without uploading it. Would this be possible?
Thanks.
Yes, it is possible, but only in HTML5 (and only as browsers add support for it...not all do yet), you can find the HTML5 File API here.
Note that the user has to give permission to access the file, from Section 5.9:
Once a user has given permission, user agents should provide the ability to read and parse data directly from a local file programmatically.
Nope, that's not possible and shouldn't be either due to security concerns it may pose otherwise.
Note: This feature is there in HTML5 as pointed out by #Nick Craver, you may want to go for but you should be aware of the fact that HTML5 isn't yet supported by all browsers.