Camera Plugin - Prerequisite

For any other framework, please use appropriate ways to add camera plugin. For this post purpose, I have added cordova-plugin-camera version 4.0.3

PS: Input file will not show camera option if camera plugin is not added to project. This is a prerequisite step if camera option is needed.

Use Input [type=file]

The purpose of using an input file is basically for two reasons:

Gives an option to browse files in file explorer

Allow selection of multiple files in a single go.

With Cordova camera plugin in markets, It is very difficult to find an appropriate plugin which allows multiple selections. This was my strong reason to use Input[type=file]

Step by step process of solution

Step 1: we should be able to select photos or take photos. For this, we need to handle onchange event on the input file. We can handle that in Angular by creating a directive and binding change event with a method like below:

Step 3: With above input element, once files are selected, they will be passed to onFilesSelection method of the controller which will perform a reading of files/images binary data. This is possible with FileReader web API. By calling readAsDataURL, we can read the binary data of files and display them accordingly with provided base64 encoded string

Step 4: Put base64 encoded string in an array to show images on UI in thumbnails. The best way to display all files is to check the extension.

If files are images, use their base64 as it is in src attribute of img tag.

If files are non-images, replace src with pre-defined images for every extension like pdf, txt etc.

Step 5: Provide a fullscreen view to show full-screen images with some standard actions on thumbnails click.

Screenshots

PS: Screenshots are taken from IOS simulator which don't support camera. This is the reason Take a photo option is not coming. This works absolutely fine on device considering camera plugin prerequisite.

Full Code - FilePicker

Hope this will help to understand the core concepts of file handling stage 1 which is reading files.

As I said in my introduction post, Please try to do hands-on and see how far you can go & extend this solution to achieve point 2 in my introduction post i.e. Save images/files locally. You can also go to my introduction post by clicking on button at bottom of this page.

Please do give your feedback if you like this post or want to improve something in solution. I will soon write another post for covering point 2 mentioned above.

Stay tuned!!

Today, I am starting this tutorial Offline Pro to give basic step to step process to handle Salesforce files on mobile specifically in offline mode. This is something I designed recently and want to share my knowledge amongst all.

In this post, I will give a basic introduction to all the steps that are needed to design this solution. To make this tutorial interactive and easy, I am breaking the full solution in multiple posts and will write them one by one.

At the end of every post, I would really recommend everyone to do some hands-on and try to find the next bit of solution. If you guys are able to find the next bit before my next post, please do comment so that we can cross check. If you guys think, the solution can be better or you need more info, please write in comments sections and we will discuss that further.

Below is the screenshot of two basic operations that we need to perform.

Screenshot

Following will be my discussion points in various posts:

Create a File Picker to enable camera(to take pictures) or to pick photos or files and preview them.

Save images/files somewhere on your device to be picked at the time of sync.

Pick images/files(from stored location) and sync with Salesforce

Delete/Archive images when not needed.

Create a File Downloader to download images on demand or automatic on sync.

Important

For the purpose of this tutorial, I have used Ionic1/Angular1 to make a hybrid app but the concepts are same. You can use any language for hands-on.

To start, please click on button at bottom of page to go to first part of it.

I have come with another interesting scenario which might help people to detect wifi status of your machine. This is a great feature that helps to work applications/pages in offline. mode.

I have come across this situation wherein I wanted my user to stay on a page and give a small online test with clock. Issue was that if wifi goes down for some reason,Clock continued to run as it was made through JavaScript. Clock should also stop in order to avoid wastage of time for user.

I have read many articles and it was written that there is no standard way or function comes in JavaScript that can detect it. A very simple solution could be to hit a public file or url and if response comes ok then that means wifi is working. I have tried to do same thing in Salesforce using Visualforce Remoting that will hit controller's method on server side and checks for connection.