Skip to content

Added basic image pick for browser #238

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
aogilvie wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added basic image pick for browser #238

aogilvie wants to merge 1 commit into from

Conversation

@aogilvie
Copy link

@aogilvie aogilvie commented Jun 21, 2017

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
Copy link

MitchellBouwman commented Aug 22, 2017

Doesn't work.

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

@aogilvie
Copy link
Author

aogilvie commented Jan 16, 2018 •
edited
Loading

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@aogilvie @MitchellBouwman