Added basic image pick for browser #238

aogilvie · 2017-06-21T04:19:39Z

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 · 2017-08-22T18:08:28Z

Doesn't work.

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

aogilvie · 2018-01-16T07:06:59Z

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 [email protected] should be installed with -g
[email protected] /home/ally/Documents/cordova-imagePicker
└─┬ [email protected] 
  ├─┬ [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
 .... lots of modules
    │       ├── [email protected] 
    │       └── [email protected] 
    ├─┬ [email protected] 
    │ └─┬ [email protected] 
    │   └── [email protected] 
    ├── [email protected] 
    └── [email protected]

[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.

Added basic image pick for browser

9a4b292

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added basic image pick for browser #238

Added basic image pick for browser #238

aogilvie commented Jun 21, 2017

MitchellBouwman commented Aug 22, 2017

aogilvie commented Jan 16, 2018 •

edited

Loading

Added basic image pick for browser #238

Are you sure you want to change the base?

Added basic image pick for browser #238

Conversation

aogilvie commented Jun 21, 2017

MitchellBouwman commented Aug 22, 2017

aogilvie commented Jan 16, 2018 • edited Loading

aogilvie commented Jan 16, 2018 •

edited

Loading