Offline image upload for Meteor.js app - javascript

There is a Meteor.js app, which is suppose to stay fully functional in offline mode. This app enables users to upload their images and use those images to create content within the app.
Question - how to approach image upload in the Meteor.js app, so that the app stays fully functional in offline mode?
My thoughts so far:
--There is Meteor Offline Data project, but it is still very much work in progress, and it only works for text content: https://github.com/awwx/meteor-offline-data
--In offline, when adding the image in the app, I could detect offline mode and utilize HTML5 File API for using the image locally
--When online is detected, the image is uploaded to the server behind the scenes
--In online content with images is downloaded to the app and saved for offline usage using App Cache
There are still many things unclear, so any hints are appreciated at this point.

You may want to try collectionFS, https://atmosphere.meteor.com/package/collectionFS, as it make a client side collection that the file is added to. The clientside collection should sink when the internet reconnects.

Related

JavaScript Local Folder Access

I am looking a functionality like follows for a web application,
User select a local folder with high resolution images.
Resize this images and send to server for processing.
Make folders in the local file system and copy the original high resolution images according to the server response
Can we achieve this without using any locally installed application but with a web application only. Please guide me, which method/technology can I start with.
Browsers will not allow to access local file system due to security reasons. Image any website able to play with local files. Browser provides sandbox where your js app can run.
You best options could be to use webstorage. You have limited capacity there though and it is not accessible directly to user. Different browsers can be varying implementations.
You can do this with node.js and sharp or Imagemagick.
As others have mentioned in browser Javascript cannot access a local file system for security reasons. So you'd have to provide an upload interface to upload the image to a node server first, then you can convert the image into a buffer/data stream resize the buffer and save it again on the server ready to be downloaded.
NodeJs is a Javascript runtime
https://nodejs.org/en/
Express is a application framework you can build a webserver that can execute your javascript
https://expressjs.com/
(You've already said you'd prefer not to but) You could build it as an node desktop application using electron which would have access to the filesystem, but it would be a self contained app not a in browser application.
https://electronjs.org/
Sharp and imagemagick plugins are the most popular nodejs based image processors
https://www.npmjs.com/package/sharp
https://www.npmjs.com/package/imagemagick
Hope this helps you get started

Store (cache) files localy in html/js

(please apologize my english)
I have to do a public screen ad app for clients (who want screens in their showcases).
The screens will be plugged to an android device and I thougth that if I made the app in html/js instead of full-android, it will be possible to "visualise" the supposed content of a screen in a browser (computer / mobile).
Basically, the app must request instructions at the server, instructions that will tell which files (and where they are) the app must show.
To avoid the systematic fetching of files, I want to store / cache the file on the client so the next time the html/js file is opened, it have all the files witout having to request them...
I have to store images and videos, but I see everywhere that the maximum weigth is (average) 5Mb, doesn't existe a way to store more ?
Thank you in advance for your answers !
You can use FSO.js. It's a JavaScript library for temporary and permanent client-side file storage.
A friend show me PhoneGap (Cordova), a library / tool that allow to create an android app (among other) in html/css/js.
That make me able to code a single "presentation-code" and to use it inside and outside the android app :-)
Thanks for yours answers anyway, I didn't knew FSO before...

cordova/phonegap app - load js css and html from server

I'm developing an cordova app for Android which has a lot of logic (js) and design (html/css) same as my web application. I want to share these assets among web app and android app. Now I had compiled all these js and css in apk, but when some code is changed, I have to prepare an update and put in the play store. If it would be possible to load code and css from server after app started, it would reduce need for upgrading. Is there any way?
I'm considering loading shared resources via ajax and dynamically creating stylesheets and scripts in DOM, but maybe there is better approach, isn't it?
You could download the files from server every time, but i think that is not what you want because it would not be availibe offline at all and if the app it big and the connection bad it will take much time to download.
a better way is to download the files if they change. you can do that with FileTransfer.download() yourself or use a ready solution like the cordova-standalone-hydration
BUT your app will not be accepted by for example Apple because they deny an app with code they can not check
I found a plugin where you can update all your files in the WWW folder on startup or later.
Link: https://www.npmjs.com/package/cordova-plugin-dynamic-update

Auto updating an html/angular app in client side

I'm building an app using angular. The app will run on the clients computer. When an update is there it will download a zip file from the server and upgrade the required files.
I guess js and html is incapable of copying and modifying files. Our first idea was to run a background application on the os to check for updates and do the updates as necessary. But what other approaches are there to achieve this?
Even if the application is offline, you can still host it, just use AppCache or something like it.
See this post for a tutorial:
http://www.sitepoint.com/creating-offline-html5-apps-with-appcache/

HTML5 Synchronization Between User and Server

I am trying to create a HTML5 app that will allow an user to automatically upload files from a user's computer to my server (similar to Dropbox for Windows where file transfers are updated between computer and server in the background).
The user will have around 100+ .csv files in a single folder. The HTML5 app will ask the user to select the folder. Afterwards, the files will be uploaded to the server in the background.
Is this possible in HTML5 using WebSockets or FileStream? Any advice will be appreciated! Thanks.
You can achieve this by using JWebSocket framework.Visit https://jwebsocket.org/. it has got lot of plug-ins and one such plug-in is FileUpload plug-in.http://enapso.org/jwsForum219/posts/list/59.page.Hope this will help you.

Categories

Resources