add chooser intent - to show both media and camera when clicking on b…

[avnermosh]

Code changes to show both the picker and camera when clicking on a button. The code changes are based on this link

I tested the code using the Jasonelle_and_React example with the code modifications below.

With these modifications, if using the Jasonelle_and_React.json example, when clicking on the button "Choose File" button the app in the Android phone, shows both the media picker and the camera to choose from (see snapshot)

cat app/src/main/res/values/strings.xml
<resources>
    <string name="app_name">Jasonette</string>
    <string name="url">file://Jasonelle_and_React.json</string>
    <string name="launch">file://preload.json</string>
</resources>

# --------------------------------------------------------------

cat jasonette/examples/Jasonelle_and_React/my-app/src/App.js
...
const openFromFile = () => {
    console.log("openFromFile");

    console.log("Media pickerAndCamera");
    window.$agent.trigger("media.pickerAndCamera");
};


// React component
function App() {

  const [photo, setPhoto] = useState(null);

  
  // Set the reference so Jasonette can update the photo with the hook
  setPhotoJasonette = setPhoto;

  useEffect(() => {
    if (photo) {
      // Photo was updated.
      console.log("Photo Loaded");
      console.log(photo);
    }
  }, [photo]);

  return (
    <div className="App">
      <header className="App-header">
        <button
          className="App-link"
          onClick={showCamera}
        >
          Open Camera
      </button>
        <label for="avatar">Choose a profile picture:</label>
        <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" onClick={openFromFile}/>
      </header>
    </div>
  );
}

# --------------------------------------------------------------


cat app/src/main/assets/file/Jasonelle_and_React.json
{
    "$jason": {
        "head": {
            "actions": {
                "camera.show": {
                    "type": "$media.camera",
                    "options": {
                        "type": "photo",
                        "quality": "high"
                    },
                    "success": {
                        "type": "$agent.request",
                        "options": {
                            "id": "$webcontainer",
                            "method": "window.savePhoto",
                            "params": ["{{$jason.data_uri}}"]
                        }
                    }
                },
                "media.pickerAndCamera": {
                    "type": "$media.pickerAndCamera",
                    "options": {
                        "edit": "true",
                        "type": "image"
                    },
                    "success": {
                        "type": "$util.alert",
                        "options": {
                            "title": "Selected {{$jason['content_type']}} at",
                            "description": "{{$jason.file_url}}"
                        }
                    }
                },
                "media.picker": {
                    "type": "$media.picker",
                    "options": {
                        "edit": "true",
                        "type": "image"
                    },
                    "success": {
                        "type": "$util.alert",
                        "options": {
                            "title": "Selected {{$jason['content_type']}} at",
                            "description": "{{$jason.file_url}}"
                        }
                    }
                }
            }
        },
        "body": {
            "background": {
                "type": "html",
                "url": "http://192.168.1.75:3000",
                "style": {
                    "background": "#ffffff",
                    "progress" : "rgba(0,0,0,0)"
                },
                "action": {
                    "type": "$default"
                }
            }
        }
    }
}

[clsource]

Thanks, There are a few improvements.

• 1 Is better to upgrade gradle in another PR, since this would need upgrading the android version and target too.
• 2 I prefer this to be a more general action like $media.chooser that you pass the intents like "camera", "file", "picker" in the options. $media.pickerAndCamera seems a little too narrow.

"type": "$media.chooser",
"options": {
   "type": ["camera", "picker", "file"]
}