File System Access API open file with local default application - javascript

In a web application I am working on I would like to be able to download files, modify them localy and reupload them to the server.
To make it as easy as possible for the users, I would like them to choose the download location and use a single button to upload the changes afterwards.
My current apporach is the following:
Use window.showSaveFilePicker to choose location and get a FileSystemFileHandle
Download the content and write it to the FileSystemFileHandle
Show a button which allows to upload the changes using FileSystemFileHandle#getFile to get the modified content.
This approach works pretty well but the user has to manually search and open the file after the download and I would like to support them in this step and make it as simple as possible.
Ideally the file should automatically be opened with the default application after the download but I couldn't find a way to do that.
One idea was to open the file in a new tab using the file://-URL, allowing the browser to decide what to do but the FileSystemFileHandle does not seem to expose the absoulte path.
Is there any way to open the downloaded file with the default application? If not, what other possibilities are there to make the mentioned use case as simple as possible?
Thanks in advance
EDIT:
I found that you can open certain applications using special urls like ms-excel:ofe|u|file://path/to/file.xls.
This would be enough for most use cases but for this to work I would need to get the file url from a FileSystemFileHandle.

For security reasons, there is no way for a Web app to open local apps. In the future, though, once file change events are implemented, you can await changes to the file, and then re-open it. This should solve your use case.

Related

Wimpy Player unable to play from local server?

It seems wimpy player tries to append http://root/link_i_provided to find the location of the file.
I already have the location of my file which is on another server. I can play this directly from the browser just fine so I know the link works.
wimpyButton.play('\\10.10.2.2\storage\calls\call1.wav')
It tries to turn my link into an http link like the following
http://mywebsite.com/10.10.2.2/storage/calls/call1.wav
Which of course it can't find. What do I need to change within the Wimpy Player js to stop this behavior? Or perhaps another solution?
EDIT
It looks like this may not be possilbe due to browser security. I'd have to turn the server that holds the recordings into a web server and provide the links that way it seems.
put your files needed on google drive inside a folder, then get the sharable link of that folder. with that you can reference files needed with www.googledrive.com/host/IdNumberOfFolderHere/fileNameOrNestedFolder/fileName.blah

Open network location in Javascript

Is there any way to open a file or a folder located on the network? I understand reasons Browsers dont allow that. And I know that I need to add extensions to Chrome and FireFox to get a network folder shown. When I meet these requirements and I have an href that looks like:
file://network volume/directory
then by clicking on it I get a folder open. Now I need to open it by clicking on a button. Is that even possible?
Thanks
Assuming you jumped all the hoops and completely unsecured your browser (which I did not, which makes this answer a guess rather then a solid answer), I suppose that javascript actions on window.location might work. e.g.
window.location.href = 'file://foo/bar/';
or the window.open API http://www.w3schools.com/jsref/met_win_open.asp
A side note, do check the HTML5's file APIs. They explicitely require that user picks the files explicitely and do not seem to allow what you require, but they are the endorsed file approach and if, by any chance, your requirements can be met by using them you'll save yourself from a world of pain and going against the flow... See http://www.html5rocks.com/en/tutorials/file/dndfiles/ for a good starter.
If I understand you correctly. You want to access a file on the local server.The following would work for you.
window.open("http://www.example.com");//opens a url
window.open("file://server/serverfolder/index.asp");// server side

How can I let users upload files by copy/paste?

I'm trying to create a web app based on ExtJS, and I'm working on the file-upload area of the app.
I want users to be able to upload files by copying and pasting them - not just copying and pasting the contents of the file, but the file itself. For example, in Windows, you can choose "Copy" or "Cut" from the Edit menu while a file is selected, then choose "Paste" later and copy or move the file - I'd like users to be able to upload files to my app in the Paste step, by just choosing Paste in their browser.
I've already tried HTML5's drag-and-drop API, but we don't want to use that - we want users to be able to copy/cut and paste files to upload their files (as long as they're smaller than 20 megabytes). If the user copies the path to their file and pastes that directly to the page, telling us where to find the file, that could also work.
Can anyone suggest a way to do this?
The thing is, that you're not able to access the clients filesystem with javascript. There is this new Filesystem API, but this just allows you to create a virtual sandboxed filesystem. I had the same problem, thought about it a while and came up with the following ideas.
Flash
Writing a Flash bridge which access the filesystem and let the javascript communicate with it via swliveconnect
Problem: Flash doesn't have filesystem access either.
Java applet
Same thing as Flash and again with LiveConnect
In my opinion this could work, but I didn't try it out, because my goal was to get filesystem access on a chromebook. And chromeOS doesn't support Java (at least without some hacking)
ActiveX
I also found some solutions with this. I gave up at the applet part so I didn't try this out either.
As Jared Farrish said, when you copy a file the os just saves the path to the file in the clipboard. Then if you receive the paste event on your webapp just get the string out of the clipboard and forward it to your file bridge.
I've seen that DropBox.com allows this to be done (in chrome- didn't seem to work in IE). I didn't do cut and paste specifically, but dragged files into a dropbox page from a local folder, and it uploaded the files. So, this doesnt directly answer your quesiton, but perhaps you can look at how this is done in their code.

Allow users to only open file but not save them

Is it possible to make user open a file on network BUT DON'T ALLOW them to save it?
When I Filenmae, i get options to Save or Open a file. I don't want users to save that file, they can only OPEN them and read/edit them.
Regards
This is handled by the web browser, not by code. In this case they're hitting the file system directly rather than a web server (so there's no place to override headers or anything like that) and the browser is acting accordingly. I'm thinking the only way to achieve what you seek is to configure the browser to always open the file in the associated program rather than prompt the user. If you're talking about a lot of web browsers, that could be a pain.
Also, since it's opening the file from the user's local file system, they can still save it. Once it's open in the associated program (in this case I'm assuming MS Word), they can save it from there. The only way to "not allow" them to save it in this case would be to remove their write access to the file at the OS level (I'm assuming Windows). This also assumes they don't have administrative rights. Otherwise, you'll want it on a file share on a server or something where you can control access.
But even then, they can just save it locally somewhere else.
It's not possible, unless you also make them open some other program that hijacks the basic saving/opening functionality on their computer.

Open a save file dialog for a js variable

In my web app I need to give the user the option to save a js variable as a file (when the user clicks download, the app offers him to save a file, preffereably as .js file).
Similarly as google docs offers you to save a file.
Is it possible for javascript to pass it's variable this way?
Check out Downloadify which allows exactly this.
Downloadify is a tiny JavaScript + Flash library that enables the generation and saving of files on the fly, in the browser, without server interaction.
it requires Flash installed in the user's browser to work, though.
I know of no other way of doing this without server interaction.
You might also want to check out OpenSave:
http://www.gieson.com/Library/projects/utilities/opensave/
... which looks much like Downloadify, but seems to have a few extra features (and not as complicated?).

Categories

Resources