(ReactJS) Saving a file to a particular user-selected folder - javascript

Working on a Data Management System in React. I want to open the explorer window to let the user choose where they want to download a particular file stored on a server. I want to override the browser setting. Only need Chrome functionality.
Researched a lot about this, I know it's apparently a browser-side security feature
But as of recent, Chrome's apparently started supporting some File System access api so if someone could help me out with that, I'd be much obliged.
Tried the saveAs package, tried this tutorial and a bunch of other stuff to no avail.
I did find some solutions for writing text to a .txt file but the problem here is that the downloaded file could be of literally any type.

Related

Uploading a file from client to server in python bokeh

We have set up a bokeh server in our institute, which works properly. We also have a python-based code to analyse fMRI data which at the moment uses matplotlib to plot and save. But I want to transfer the code to bokeh server and allow everybody to upload files into the server from the client and when the analysis is done in the server, save the output plots in their local HDD. This transfer file procedure seems to be lacking in bokeh atm. I saw a new feature recently added in github to upload json files, but my problem is fMRI files come in various formats, and asking (not necessarily tech-savvy) users to convert the files into a certain format beats the purpose. Also, I do not know any JS or the like, hence I do not know what solutions people usually use for such web-based applications.
If anybody has any solutions to get around this issue, it'd be happy to hear it. Even if it is a solution independent of bokeh (which would mean users need to open a separate page to upload the files, a page to run the analysis, and a page to save the output) please let me know. It won't be ideal, but at least better than no solution, which is the case in bokeh right now. Thanks!
I'm not sure where you are getting your information. The FileInput widget added in Bokeh 1.3.0 can upload any file the user chooses, not just JSON.

Checking for a valid file across domains from local file

Background:
We have a paid service that we download zip files from. The zip files are in a very predictable format like this
"file_<date>_Level1.zip"
"file_<date>_Level3.zip"
"file_<date>_Level7.zip"
"file_<date>_PG.zip"
The only interface to download there files are from a website that uses adobe flash and you have to traverse a navigation tree 4 levels deep, download a file, then traverse another tree 4 levels deep and download the next file. There are over 100 files and it takes a user about 1.5 days to do this.
Because the file names are very predictable - and have been for years, I am trying to generate a webpage that they can open locally on their laptop and the links point directly to the download, so when they click on the link it automatically downloads the file. something like:
www.contoso.com/resources/downloads/file__<date>_Level1.zip
www.contoso.com/resources/downloads/file__<date>_Level3.zip
www.contoso.com/resources/downloads/file__<date>_PG.zip
Every week, these files are updated and not all of the levels are there, so when I dynamically generate these links, about 25% of them fail.
Question:
I am looking for a way to check if the download link is valid, and if not perhaps gray it out or add an image that is now visible that is like a red x indicating that the file is not there.
What I tried:
I tried using AJAX, jquery, php, all kinds of things, and I mostly ran into what I believe are CORS issues? About cross-domain requests? I have spent probably 2 days on this with tons of trial and error and research. It seems like it would be such a simple thing: "Does the zip file exist at this url?"
Since the webpage with download links is really just a simple html file that they will probably have on their desktop, I also tried disabling CORS with something like chrome --disable-web-security --user-data-dir and other options.
So frustrated, any help is appreciate, also my level of AJAX, jquery, php etc. is basic, my career has been spent in SQL Server, Azure, etc.
Thanks,
Matt

Is there any way to edit a local file through a web page without running server software?

I've a web working on a web page that's basically just a big table of links. I use javascript to read from a text file, parse it, and create a table based on that.
I'd like to be able to have a button on the page to add new a row of links and add them to the text file (or another file type if it's better).
I know you can accomplish this with php, node.js, and others, but all the methods I've found require server software to be running. Is there any way around this? For example, is there a way to use javascript to call a python script, or any other way?
The page is just for personal use, so I'd like to avoid running server software just to use it if possible. I know you can set it to download a text file, and you can save it in the same location, but I'd also like to avoid that.
From the research I've done, it doesn't seem possible, but I just thought I'd ask before I give up. Thanks in advance.
You can only read from files locally in browser with javascript.
This would be a huge security vulnerability if scripts in browsers could write files to your machine.

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.

Saving a file from a chrome packaged app

I have a Chrome packaged app that has taken me a while to get my head around but I finally have it working. However I have now come across another problem.
Is it possible to save a variable from my app into a text file that's placed in my app/file directory?
I have looked over the chrome.fileSystem api but I don't really understand it.
I could be completely wrong and maybe you can't save files to the file directory?
Any examples or tutorials on this would be great!
Thanks!
I would suggest storing the file's contents in chrome.storage and then dynamically loading and saving the contents of your css file from there instead of using the filesystem. To me, this would be much easier to accomplish.
chrome.storage sounds like a good fit all right (though not too sure about your specific needs in accessing the css outside the app). It's main use case is for saving state and storing configuration settings/variables.
We've a code lab that walks through all kinds of chrome apps stuff, including chrome.storage here: http://developer.chrome.com/trunk/apps/app_codelab5_data.html
There's also the new syncFileSystem API, which really doesn't seem to fit your needs. This is document/file level synchronization, like getting access to user's files on hard drive, saving them in app, and syncing them.
But sure, if you are curious, here's the docs on working with Chrome File System and sync File System: http://developer.chrome.com/trunk/apps/app_storage.html
We're also working on a doc that explains the key concepts around storing data in the cloud (specifically for packaged apps). Hoping to have an early cut in trunk over the next week or so.
Keep us posted on how you get on!

Categories