diff --git a/src/assets/hud/mobile_media_picker.png b/src/assets/hud/mobile_media_picker.png
new file mode 100644
index 0000000000000000000000000000000000000000..af63116b547ba073bb97d95ff2e24e3cec5dd0ae
Binary files /dev/null and b/src/assets/hud/mobile_media_picker.png differ
diff --git a/src/assets/stylesheets/2d-hud.scss b/src/assets/stylesheets/2d-hud.scss
index edc8b391990a9c81dd67ca2579ffc2991a169ac3..7840e3168e3c3d768d838e09abd7e6675524d58e 100644
--- a/src/assets/stylesheets/2d-hud.scss
+++ b/src/assets/stylesheets/2d-hud.scss
@@ -16,6 +16,10 @@
   &:local(.bottom) {
     bottom: 20px;
   }
+
+  &:local(.aboveBottom) {
+    bottom: 120px;
+  }
 }
 
 :local(.panel) {
@@ -109,3 +113,7 @@
 :local(.iconButton.create-object:hover) {
   background-image: url(../hud/create_object-hover.png);
 }
+
+:local(.iconButton.mobile-media-picker) {
+  background-image: url(../hud/mobile_media_picker.png);
+}
diff --git a/src/react-components/2d-hud.js b/src/react-components/2d-hud.js
index 15168e999bd4576f80b0f4242ed60675f4557699..7ccaf1cdb90602d548a15fd2ec1f41adaa0e6d53 100644
--- a/src/react-components/2d-hud.js
+++ b/src/react-components/2d-hud.js
@@ -37,18 +37,45 @@ TopHUD.propTypes = {
   onToggleSpaceBubble: PropTypes.func
 };
 
-const BottomHUD = ({ onCreateObject }) => (
-  <div className={cx(styles.container, styles.bottom)}>
-    <div
-      className={cx("ui-interactive", styles.iconButton, styles.large, styles.createObject)}
-      title={"Create Object"}
-      onClick={onCreateObject}
-    />
+const mediaPickerInput = "media-picker-input";
+const BottomHUD = ({ onCreateObject, onMediaPicked }) => (
+  <div>
+    {onMediaPicked ? (
+      <div>
+        <input
+          id={mediaPickerInput}
+          type="file"
+          accept="image/*"
+          multiple
+          onChange={e => {
+            for (const file of e.target.files) {
+              onMediaPicked(file);
+            }
+          }}
+        />
+        <label htmlFor={mediaPickerInput} className={cx(styles.container, styles.aboveBottom)}>
+          <div
+            className={cx("ui-interactive", styles.iconButton, styles.large, styles.mobileMediaPicker)}
+            title={"Pick Media"}
+          />
+        </label>
+      </div>
+    ) : (
+      <div />
+    )}
+    <div className={cx(styles.container, styles.bottom)}>
+      <div
+        className={cx("ui-interactive", styles.iconButton, styles.large, styles.createObject)}
+        title={"Create Object"}
+        onClick={onCreateObject}
+      />
+    </div>
   </div>
 );
 
 BottomHUD.propTypes = {
-  onCreateObject: PropTypes.func
+  onCreateObject: PropTypes.func,
+  onMediaPicked: PropTypes.func
 };
 
 export default { TopHUD, BottomHUD };
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 36b5434714a0bca8af2fc7dc4f2f38d094952f3e..50093fde8d83a680f0a26a3e649e9cc706c63c48 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -526,8 +526,8 @@ class UIRoot extends Component {
     this.setState({ infoDialogType: null, linkCode: null, linkCodeCancel: null });
   };
 
-  handleCreateObject = url => {
-    this.props.scene.emit("add_media", url);
+  handleCreateObject = media => {
+    this.props.scene.emit("add_media", media);
   };
 
   render() {
@@ -910,6 +910,7 @@ class UIRoot extends Component {
               )}
               <TwoDHUD.BottomHUD
                 onCreateObject={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.create_object })}
+                onMediaPicked={AFRAME.utils.device.isMobile() ? this.handleCreateObject : null}
               />
             </div>
           ) : null}