I’m looking to implement Drag and Drop solution, than store the web page content and assets in the local storage using filesystem API.
My problem is that I need to move the files I’ve stored in the local storage to OS file system.
Would be interesting to hear few implementation for this.
Thanks!
HTML5 has a File System API included that allows you to read, write and create files in a secured virtual file system that are also domain-specific (no file crossing with other domains).
If you are just trying to store contents and assets for offline viewing, you can just whip up a Manifest Cache. I see no need for local storage, or drag and drop, or File System API, because these are very different tools for very different needs. Anyway, if you would still like to use File System API, check out this page from MDN.
Angela
Related
As I understand, h5p cannot be viewed on a local device, e.g. in offline mode (I'm aware of h5p-standalone but it requires setting up a local webserver)
and viewing requires a webserver that supports h5p, e.g. via WordPress plugin.
Assuming that I have a large h5p file (e.g. 1G Byte) with many images.
Does this large file needs to be uploaded first to the server?
Thanks
If you want to run H5P files, you will always have to have some form of runtime environment. That can be (PHP) based like the ones that you already mentioned, but there's also a node.js port of H5P core than can be used. That port is also the foundation of the editor/player named Lumi. It uses Electron to edit/play H5P files locally on Windows, MacOS and Linux. So the H5P file will not have to be provided on a webserver to run.
You can also use Lumi (or its functions) to convert H5P files into single HTML files that contain all the code and the stylesheets to run, also media (base64 encoded). Of course, that approach tends to generate large files and you have a lot of redundancy as all dependecies that are required to rum will be inside every single HTML file instead of being loaded as needed - but you can run that file in a browser either from a server or locally without the need for a webserver.
I've an embedded system which runs firmware and has USB mass storage with size 79kB. So when you plug in the device to any computer(MAC/Windows), it pops as a 79kB flash drive. The firmware creates files which has transaction records. The objective is to display these transactions (tables and simple graphs) to the user. I've narrowed down to a web browser. So the user (with MAC/Windows PC) can plug in the USB device mass storage and open an HTML file in the mass storage drive and view all the transactions in the form of tables and simple bar graphs. The tricky part comes here: the device(firmware) needs to update it's clock, and this time input has to be sourced from the MAC/Windows PC. How can this be achieved?
This is the minimum requirement. Further, through the web browser the user wants to write some configuration parameters for e.g. through a text box and a submit button in the HTML page.
NOTE: Here the device has USB mass storage type and the web browser approach were selected so that there is no prerequisites for the user.
Please suggest an alternative if this can be done using another approach for e.g. a different class of USB or some other application locally available on MAC/Windows desktop/laptop. For e.g. the application should run on both on Mac and Windows i.e. the code should be the same but can be built into separate packages one for Mac and the other (.exe) for Windows. Please suggest a platform for this that has same source but can be built for both mac and windows. Thanks!
As far as I know, there is no way a web browser could write to a file. If such a thing was possible, it would be a huge security issue.
You have to write a piece of native software to do all the tasks you name. That can be done in pretty much any programming language, and if you're developing embedded systems I reckon you must have some experience in programming.
I'm looking at doing something similar and have an idea, though you may be better equipped to run with it than I am. Have the define contain a directory called "SET_DATE" with files "YEAR15" through "YEAR99", "MON01" through "MON12", "DATE01" through "DATE31", "H00" through "H23", "M00" through "M59", "S00" through "S59", and "SET"; each such file should start at a different sector, though none of the sectors in question need to contain any data (they need not physically be stored anywhere). To set the date to July 4, 2020 at 12:34:56pm, read the following files in sequence:
SET_DATE/YEAR20
SET_DATE/MONTH07
SET_DATE/DATE04
SET_DATE/H12
SET_DATE/M34
SET_DATE/S56
SET_DATE/SET
The last access should cause the unit to set its clock. If a user might want to set the clock more than once, that could be accommodated by either having a bunch of essentially-identical directories under SET_DATE (so setting the date the first time would use SET_DATE/00/YEAR20, the second time SET_DATE/01/YEAR20, etc.) and/or having the drive unmount/remount itself if necessary to clear out any caching.
I would think it unwise to have directory fetches trigger actions, since Windows or an anti-virus tool might decide to pre-cache all the directories in a drive when it is mounted. I would not expect Windows or a browser to eagerly load files, however, so I would think one could have read accesses trigger actions.
For storing data offline WebApp can use:
session storage, "advanced version of cookies"
key/value based Web Storage (AKA local/global/offline/DOM storage)
sql-based Web SQL Database (deprecated) and Indexed Database API
FileReader and FileWriter API (requires user to select files each time the application loads)
But apparently there is no File Storage. Of course, there is a manifest-based caching, but it's just a cache and is not supposed to be used as a user data storage.
Does it mean that the user of WebApp is forced to use some sort of a cloud file storage?
Is there any way to save large files on user's local machine? Or maybe some way to select a local folder web application can use to store user data?
Edit. Security. HTML5 already has the ability to write big portions of data to user's local machine. I don't see any security issues if a browser will provide another, file-based abstraction to store data. It can be some virtual machine, virtual filesystem, whatever.
Hm, I think, it is possible to write JS filesystem and store it as a blob in SQL...
Similar questions.
Update:
Hm... recently I've found this and this. Maybe it is what I'm looking for... Yes, it is! See the answer below.
At last, I've found it! Here's the answer:
I’ll have the DOMFileSystem with a side of read/write access please wrote:
Eric Uhrhane of Google has been
working on the working draft of the
File API: Directories and System specification which defines a set of
APIs to create a sandboxed filesystem
where a web app can read and write
data to.
Wow! I'm so excited!
Why not use localStorage while the user is editing a document and the FileWriter API when they want to save it to disk? Most people are used to seeing a save dialog pop up when saving a document.
The only scenario I can think of that warrants userless access to the FileWriter API is an autosave feature, but autosaving to localStorage can be just as good.
There is a way to save relatively large files to a users hard drive if you are willing to use Flash. Look into Downloadify:
http://www.bitrepository.com/downloadify-client-side-file-generation.html
Downloadify allows you to send data to a SWF and have that SWF create a file on the users machine. My recommendation would be to store the data via one of the methods you listed, Webstorage, sqlite database, etc. Put all your assets, including the SWF in the manifest file so everything is cached locally to the browser. You can then pull information from your db or webstorage and use the SWF to create the files you need.
I'm not sure if you will be able to read these files back into your web application.
Another option to save data is by using link tags with the data URI scheme. However, I'm not sure if it is supported in all the major browsers at the moment.
For security reasons you can't write files to a user's local filesystem in case it gets used for nefarious purposes by evil people.
That's not likely to change, and that's a good thing.
The HTML5 FileSystem API started landing in Chrome 8 and is fairly complete as of now (Chrome 11).
There's a nice tutorial on it here: http://www.html5rocks.com/tutorials/file/filesystem/
http://fsojs.com wraps the FileSystem API effectively, if you want an easy solution
As mentioned by others here, the FileWriter and FileSystem APIs can be used to store files on a client's machine from the context of a browser tab/window.
However, there are several things pertaining to these APIs which you should be aware of:
Implementations of the APIs currently exist only in Chromium-based browsers (Chrome & Opera)
Both of the APIs were taken off of the W3C standards track on April 24, 2014, and as of now are proprietary
Removal of the (now proprietary) APIs from implementing browsers in the future is a possibility
A sandbox (a location on disk outside of which files can produce no effect) is used to store the files created with the APIs
A virtual file system (a directory structure which does not necessarily exist on disk in the same form that it does when accessed from within the browser) is used represent the files created with the APIs
IsolatedStorage, which hasn't been mentioned as of yet, also allows for file i/o from a tab/window context, but it is made available through solely through Silverlight and requires the use of managed code to access. It, like FileSystem, also exists in a sandbox and makes use of a virtual file system.
Given the high market penetration of both Chromium-based browsers and Silverlight (support for which, interestingly enough has been dropped by such browsers), you may find a solution which uses the first of the above approaches available on a client machine satisfactory.
BakedGoods, a Javascript library that establishes a uniform interface that can be used to conduct common storage operations in all native (including FileSystem), and some non-native (including IsolatedStorage) storage facilities, is an example of such a solution:
//Write file to first of either FileSystem or IsolatedStorage
bakedGoods.set({
data: [{key: "testFile", value: "Hello world!", dataFormat: "text/plain"}],
storageTypes: ["fileSystem", "silverlight"],
options: {fileSystem:{storageType: Window.PERSISTENT}},
complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});
Just for the sake of complete transparency, BakedGoods is maintained by this guy right here :) .
I have what seems like a typical usage scenario for users downloading, editing and uploading a document from a web page.
User clicks a link to download a document
User edits downloaded file
User saves the file
User goes back to the web page and uploads the new file with the changes
The problem is that downloaded files are typically saved in a temporary directory, so it can be difficult to find the file after it is saved. The application is for very non-technical users, and I can already imagine the problems with saved files being lost or the wrong versions being uploaded.
Is there a better way? Things I've thought about:
Using Google Docs or something similar.
Problems: forcing users to use new
application with less features,
importing legacy content, setting up
accounts for everyone to edit a
file.
Using WebDAV to serve the files. Not sure how this would work exactly, but seems like it should be possible
Some kind of Flash or Java app that manages downloads and uploads. Not sure if these even exist.
User education :)
If it matters, the files will be mostly Word and Powerpoint documents.
Actually, despite the fact that you have more flexibility with AJAX in developing application, the problem of uploading multiple files is not solved yet.
To the thoughts you've mentioned in your question:
Google Docs:
Online apps like Google docs are certainly appealing for certain use cases. However, if you'd like to upload Word and Powerpoint slides, you don't want the content to be changed once you've uploaded the document. The problem is that Google Docs uses its own data format and therefore changes some of the formats. If you go for an online app, I'd go for a Document Management Solution. I'm sure there are plenty (even free ones) out there; however, I didn't use any on them yet.
WebDAV It is possible and seems to me like the best solution. You can embed WebDav like any directory. Documents are locked until a user releases the document. Unfortunately, you don't have a web front end to manage the files or administer access restrictions.
It
Flash or Java app They do exist, for sure. I'd prefer Flash over Java since Flash Apps still run smoother within a browser. I would definitely not use a rich application, even if it is a Java Web Start app that can be downloaded and opens in a separate window. More and more, users seem to accept browser based web applications. Which brings me to point 4:
User education You can educate them, sure. But in the end you want them to want to use the system. Most often, users get easily used to a tool. However, if they don't like the tool, they're not going to use it.
Clear instructions to save to their desktop is a start. Then clear instructions to go to the desktop to re-up it. I've not run across an online MSWord viewer/editor or whatever format the file is, but I'm sure they exist, now that Google Docs and a few other online versions of MSOffice exist.
I would make sure that there are easy to follow instructions, plus a tutorial somewhere else (perhaps with a video too) to guide users through the process.
What is the best client side http library to upload multiple files? If it can handle directories that's a huge bonus. I'm looking for something that is open source or free. I'm looking for something like FTP, but that works over http, through the browser. Uploading multiple files through a normal HTML 4.x form is a bit of a hassle when it comes to uploading more than 5-6 files.
Feel free to share your personal experiences.
Uploadify is also another great multiple file uploader. It was built off of SWFUpload and they added new features to it.
Some of the features that I have found most helpful are:
The user can upload all the files at once using ctrl + clicking on all of
the files
As the files are being downloaded a queue is displayed which
shows the files being downloaded including a completeion bar.
As files are completed they are removed from the queue
It also allows you to specify which file types the user is
able to download (they can only see the ones you choose)
I'd recommend something like SWFUpload for that. It's main feature is its support for progress bars, but it also allows for queuing files which is particularly handy (this is actually the second time I've recommended it today).
Just to make sure other options are documented (SWFUpload is great) - another good solution is FancyUpload2.
You could use a Java based solution. I've been using JumpLoader on one of my web pages and haven't had any problems with it. It can also upload directories, which other solutions mentioned here do not support.
Another option that I have used before is uploading and then extracting ZIP files. I have used PEAR::Archive_Zip to extract. Requires more knowledge on the user's side, but supports directories and unlimited files (depending on the memory alloted to PHP).
Take a look at jquery-html5-upload it doesn't require Flash, and has a sexy jQuery API.