Added basic image pick for browser

aogilvie commented 7 years ago

Basic (all options unsupported) image picker for browser.

Testing:

Tested Chrome 58.

Sample code:

<a id="addPhotoLink" >Add Photo</a>

document.querySelector('#addPhotoLink').addEventListener('click', function () {
    function cbSuccess(files) {
        // same as you would with URIs from iOS or Android
        // in this case, for browser platform it returns
        // an encoded base64 blob - ready for use
        var image = document.createElement('img');
        image.src = files[0];
        document.body.appendChild(image);
    }
    window.imagePicker.getPictures(cbSuccess... , cbError... , {
            maximumImagesCount: 1
        }
    );
});

Limitations:

Because of lacking FileReader API support in IE, this IE 10+ compat only

MitchellBouwman commented 7 years ago

Doesn't work.

Error: exec proxy not found for :: ImagePicker :: getPictures Error: Missing Command Error

aogilvie commented 6 years ago

This does work. Do you know how to add a platform and plugin for the browser?

Here is the full output from the terminal (my commands are code highlighted separately). I am demoing from this branch after cloning locally.

[ally@localhost cordova-imagePicker]$ gb
* feature/browser-platform
  master
[ally@localhost cordova-imagePicker]$ npm install cordova

npm WARN prefer global cordova@8.0.0 should be installed with -g
cordova-plugin-image-picker@1.1.3 /home/ally/Documents/cordova-imagePicker
└─┬ cordova@8.0.0 
  ├─┬ configstore@2.1.0 
  │ ├─┬ dot-prop@3.0.0 
  │ │ └── is-obj@1.0.1 
  │ ├── graceful-fs@4.1.11 
  │ ├─┬ mkdirp@0.5.1 
  │ │ └── minimist@0.0.8 
  │ ├── object-assign@4.1.1 
  │ ├── os-tmpdir@1.0.2 
 .... lots of modules
    │       ├── minimist@1.2.0 
    │       └── strip-json-comments@2.0.1 
    ├─┬ repeating@1.1.3 
    │ └─┬ is-finite@1.0.2 
    │   └── number-is-nan@1.0.1 
    ├── semver-diff@2.1.0 
    └── string-length@1.0.1

[ally@localhost cordova-imagePicker]$ node_modules/cordova/bin/cordova create "testing"

Creating a new cordova project.

[ally@localhost cordova-imagePicker]$ cd testing/
[ally@localhost testing]$ ../node_modules/cordova/bin/cordova platform add browser

Using cordova-fetch for cordova-browser@~5.0.1
Adding browser project...
Creating Cordova project for cordova-browser:
    Path: /home/ally/Documents/cordova-imagePicker/testing/platforms/browser
    Name: HelloCordova
Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the project
Installing "cordova-plugin-whitelist" for browser
Adding cordova-plugin-whitelist to package.json
Saved plugin info for "cordova-plugin-whitelist" to config.xml
--save flag or autosave detected
Saving browser@~5.0.3 into config.xml file ...

[ally@localhost testing]$ ../node_modules/cordova/bin/cordova plugin add ../

Installing "cordova-plugin-image-picker" for browser
Adding cordova-plugin-image-picker to package.json
Saved plugin info for "cordova-plugin-image-picker" to config.xml
[ally@localhost testing]$ ../node_modules/cordova/bin/cordova run browser
startPage = index.html
Static file server running @ http://localhost:8000/index.html
CTRL + C to shut down
200 /index.html (gzip)
200 /css/index.css (gzip)
200 /cordova.js (gzip)
200 /js/index.js (gzip)
200 /img/logo.png
200 /cordova_plugins.js
200 /plugins/cordova-plugin-image-picker/www/imagepicker.js (gzip)
200 /favicon.ico (gzip)
304 /css/index.css

Browser will open. Enter dev tools and add this to the page inside <body>

<a id="addPhotoLink">Add Photo</a>

Now copy paste this into the console

document.querySelector('#addPhotoLink').addEventListener('click', function () {
    function cbSuccess(files) {
        var image = document.createElement('img');
        image.src = files[0];
        document.body.appendChild(image);
    }
    window.imagePicker.getPictures(cbSuccess, null, {
            maximumImagesCount: 1
        }
    );
});

Look at your demo page and click on the Add Photo button. Voila.

wymsee / cordova-imagePicker

Added basic image pick for browser #238