Accessing sqlite database from js/html file on users PC - javascript

I am trying to build a simple application for managing a database (most likely sqlite) of members of a society. The resulting app needs to be useable on windows and OSX and ideally be packaged as a single file.
My plan was to use a single HTML file that embeds all the javascript needed within the same file, which would be stored on the user's computer. The user could then simply double-click and open the page in their favourite browser, where the JS would be executed to handle the user interactions with the database and so on. On first running the sqlite database would be created on the user's machine which would persist the data and could also be backed up as needed.
My question is, how can I go about creating and modifying the database file from within the browser? Traditionally this has been a big no-no (for obvious security reasons) but looking into things like app.js and others I feel like there might be another option for achieving this simply. An option might be to have a "save/load" dialog if nothing else. The key factor is to avoid having the user install any extra dependencies like node.js etc, as this is a very simple tool.

You can create html and js desktop applications with AIR or XUL. AIR needs the AIR runtime and will be one file to install your application and XUL needs either xulrunner or Firefox to start it. You can deliver XUL applications as a zip file and run them with firefox --app application.ini.
There may be more options out there

Html5 supports both key/value and sqlite type persistence out of the box. Depending on your needs you may be to use either or both. They are mostly portable among most browsers now.

Related

JavaScript, Reading and Writing files for a locally hosted application

I have read several posts on this site that ask similar questions but the key difference is they involve a client and a server. For my use, this is not the case. I am simply pasting a file directory on my computer into my browser in order to view a local HTML file, packed with CSS and some jQuery.
I've been looking around and the answers I've found are "No; a client can not write to a server", and "No; a server can not write to a client". But there is no answer to "can a client write to a client with JavaScript?"
Use case:
I'm building a webapp (website? JS app?) as a college project for a stock management tool that will be locally hosted and never connect to the internet. Sure, I could knock one together in python in a couple hours, but I wouldn't learn anything. I need to create an access a txt file containing an array of the current stock of all the items so that when the application is loaded, the user doesn't have to manually enter anything but the changes to stock levels.
Honestly, I'm a beginner at JS and JQ and I'm only going off of what makes sense based on a mix of HTML and Python that I know.
Maybe PHP would be the better option for this particular option, or maybe JS will work well enough.
You still won't be doing client-to-client, your browser will just act as though the local file system is the server using the file:// protocol which means the same rules about a "client" (the browser) cannot write to a "server" (your local file system) apply.
If you wan't to be able to write an application that can interface directly with the filesystem, then look into something like Electron which is essentially an augmented website that gives you APIs to interact with the actual computer the app is being run on, including filesystem stuff.

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

Cross Browser, Object Persistence Library for Client Application

I'm creating a client based application in HTML Application (HTA) and I would like to know if there's a object persistent library similar to python's shevle that meets the following criteria:
Should be able to read and write on file
Cross browser: should work at least on both HTA and on Firefox (through XULRunner) so that I'll be not tied to any vendor.
Written in JavaScript form
TiddyWiki is able to save itself, regardless of the browser used, though the codes that saves and retrieves files has to be refactored to meet my need.
Well, I wasn't aware that TiddyWiki has a github repository, and they organized the files by module.
I could just take the FileSystem.js file and build a nice api on top of it to simulate shelve functionality.

work on the files in a directory using html javascript

Trying to see if this is possible -
1.) User logs into our site
2.) Points to a directory
3.) The javascript code reads contents of the directory, shows thumbnails for any jpeg/gif in those directories. This all without uploading all the photos to the server. Kind of a semi desktop app.
Point 3 is something I have never done, is this possible for an online application to do ?
You can't do this...yet (unless you're using a prerelease of Chrome 9). There are some APIs coming down the pike that will make this possible in browsers that support them; there's a description of using them in this article.
But right now, no. To do this, you'll need to use a technology that allows local file access, such as a signed Java applet (normal unsigned ones obviously can't do this) or, on a severely limited number of platforms and browsers, an ActiveX control.
Update: Sorry, the new JavaScript APIs I mentioned above don't give you (user-granted) access to any old directory on their system. They do give you access to the file system, but it's a sandboxed file system. So you'd have to have the users move the files into the sandbox (which you could do via the File API and with drag-and-drop, keeping it an entirely client-side thing, no uploading required). But that isn't quite what you described.
No; this is not possible.
Javascript cannot directly interact with the user's local filesystem
No, it is not possible to access any of the clients files using JavaScript as that would be a security risk.

Cross-platform JS access to local filesystem via plugin?

I have a javascript photo-organizer built on the YUI JS libs which can organize photos from many sites via REST api. I want to know if I can resuse any of this code to organize photos on the local filesystem.
I need a cross-browser (i.e. PC/Mac) solution to the following (in order of increasing privilege):
persistent file access to read/write local XML datafile (between sessions)
ability to manage large uploads of thumbnails to my server
FOLDER+file access to scan JPGs in a folder tree. permission granted by user via drag-drop
ability to execute local shell script to generate thumbnails
I've looked at the following and found some short-comings:
BrowserPlus - no way to save access to local FS between sessions
GoogleGears - local access to files via dialog box, only
Adobe Air - is this a possible solution??? can I reuse my javascript?
Can someone tell me if this is possible in Air, or if there are any other plugin options/strategies?
NOTE: I could live with a download and install solution like Adobe Air, as long as I don't have to write both PC/Mac versions. Does that make it NOT a security hole? Also, can I reuse my YUI/Javascript inside AdobeAir - or do I have to start from scratch?
tia, m.
Adobe Air is a standalone runtime. It will let you do what you want, but it does not run inside Browser, and will instead require users to install application to their desktop first (though it is cross browser and cross-platform).
Flash (or Flex) plugin inside Browser may be able to do some of the things you want, but I doubt it will let you free reign on the local file system for managing photos. You will be able to store some persistent data in local shared objects (kind of like Cookies), but very little amounts.

Categories