Add the ability to upload files via the create object dialog.

src/assets/stylesheets/info-dialog.scss

@@ -75,6 +75,106 @@
   }
 }
 
+.input-border {
+    margin: 2% 1% 2% 1%;
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    background:white;
+    @extend %rounded-border;
+    @extend %default-font;
+}
+
+.small-button {
+    width: 8%;
+    padding-right: 2%;
+    padding-left: 2%;
+}
+
+.url-input {
+    border: none;
+    padding-left: 2%;
+    flex-grow: 1;
+    text-align: center;
+    background:transparent;
+    color:black;
+    font-size: 1.1em;
+}
+
+.file-name {
+    text-align: center;
+    flex-grow: 1;
+    align-self: center;
+    color: black;
+}
+
+.form {
+    width: 80%;
+}
+
+.hide-file-input {
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+}
+
+#upload-svg {
+    fill: #222222;
+}
+
+#upload-svg.unhover {
+    animation-name: upload-button-unhover;
+    animation-duration: 0.5s;
+    animation-timing-function: ease-in;
+    animation-fill-mode: forwards;
+}
+
+#upload-svg.hover{
+    animation-name: upload-button-hover;
+    animation-duration: 0.2s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: forwards;
+}
+
+#cancel-svg {
+    fill: #FF9E9D;
+}
+
+#cancel-svg.unhover{
+    animation-name: cancel-button-unhover;
+    animation-duration: 0.5s;
+    animation-timing-function: ease-in;
+    animation-fill-mode: forwards;
+}
+
+#cancel-svg.hover{
+    animation-name: cancel-button-hover;
+    animation-duration: 0.2s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: forwards;
+}
+
+@keyframes upload-button-hover {
+    from { fill : #222222;}
+    to {fill : #c431bd;}
+}
+@keyframes upload-button-unhover {
+    from {fill : #c431bd;}
+    to { fill : #222222;}
+}
+
+@keyframes cancel-button-hover {
+    from { fill : #FF9E9D;}
+    to {fill : #FF3D7F;}
+}
+@keyframes cancel-button-unhover {
+    from {fill : #FF3D7F;}
+    to { fill : #FF9E9D;}
+}
+
 .invite-form, .add-media-form, .custom-scene-form {
   display: flex;
   flex-direction: column;
@@ -82,32 +182,6 @@
   text-align: center;
   margin: 0;
 
-  &__input_fields {
-      position: relative;
-  }
-
-  &__file {
-      width: 0.1px;
-      height: 0.1px;
-      opacity: 0;
-      overflow: hidden;
-      position: absolute;
-      z-index: -1;
-  }
-
-  &__file_label {
-      font-size: 1.25em;
-      font-weight: 700;
-      color: white;
-      background-color: black;
-      display: inline-block;
-      top: 19px;
-      right: 24px;
-      bottom: 19px;
-      position: absolute;
-      line-height: 30px;
-  }
-
   &__buttons {
     display: flex;
     flex-direction: row;

src/react-components/create-object-dialog.js

@@ -8,6 +8,17 @@ const attributionHostnames = {
 };
 
 const DEFAULT_OBJECT_URL = "https://asset-bundles-prod.reticulum.io/interactables/Ducky/DuckyMesh-438ff8e022.gltf";
+const isMobile = AFRAME.utils.device.isMobile();
+const instructions = "Paste a URL or upload a file";
+const desktopTips = "Tip: You can paste links directly into Hubs with Ctrl+V";
+const mobileInstructions = <div>{instructions}</div>;
+const desktopInstructions = (
+  <div>
+    {instructions}
+    <br />
+    {desktopTips}
+  </div>
+);
 
 let lastUrl = "";
 
@@ -15,7 +26,7 @@ export default class CreateObjectDialog extends Component {
   state = {
     url: "",
     file: null,
-    text: ""
+    fileName: ""
   };
 
   static propTypes = {
@@ -24,9 +35,7 @@ export default class CreateObjectDialog extends Component {
   };
 
   componentDidMount() {
-    this.setState({ url: lastUrl }, () => {
-      this.onUrlChange({ target: this.input });
-    });
+    this.setState({ url: lastUrl });
   }
 
   componentWillUnmount() {
@@ -34,23 +43,25 @@ export default class CreateObjectDialog extends Component {
   }
 
   onUrlChange = e => {
-    if (e && e.target.value && e.target.value !== "") {
-      this.setState({
-        url: e.target.value,
-        text: e.target.value,
-        attributionImage: e.target.validity.valid && attributionHostnames[new URL(e.target.value).hostname]
-      });
-    } else {
+    let url;
+    try {
+      url = new URL(e.target.value);
+    } catch (_) {
       this.setState({
-        text: ""
+        url: e.target && e.target.value
       });
+      return;
     }
+    this.setState({
+      url: e.target && e.target.value,
+      attributionImage: e.target && e.target.value && e.target.validity.valid && attributionHostnames[url.hostname]
+    });
   };
 
-  onFileChange = (e) =>{
+  onFileChange = e => {
     this.setState({
       file: e.target.files[0],
-      text: e.target.files[0].name
+      fileName: e.target.files[0].name
     });
   };
 
@@ -59,36 +70,61 @@ export default class CreateObjectDialog extends Component {
     this.props.onCloseDialog();
   };
 
+  reset = e => {
+    e.preventDefault();
+    this.setState({
+      url: "",
+      file: null,
+      fileName: ""
+    });
+  };
+
+  onHover = e => {
+    e.currentTarget.children[0].classList.add("hover");
+    e.currentTarget.children[0].classList.remove("unhover");
+  };
+
+  onHoverExit = e => {
+    e.currentTarget.children[0].classList.remove("hover");
+    e.currentTarget.children[0].classList.add("unhover");
+  };
+
   render() {
+    const withContent = (
+      <label className="small-button" onClick={this.reset} onMouseEnter={this.onHover} onMouseLeave={this.onHoverExit}>
+        <svg id="cancel-svg" viewBox="0 0 512 512">
+          /* font awesome : times-circle-regular*/
+          <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z" />
+        </svg>
+      </label>
+    );
+    const withoutContent = (
+      <label htmlFor="file-input" className="small-button" onMouseEnter={this.onHover} onMouseLeave={this.onHoverExit}>
+        <svg id="upload-svg" viewBox="0 0 512 512">
+          /* font awesome : upload-solid*/
+          <path d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z" />
+        </svg>
+      </label>
+    );
+    const fileName = <label className="file-name">{this.state.fileName}</label>;
+    const urlInput = (
+      <input
+        className="url-input"
+        placeholder="Image/Video/glTF URL"
+        onChange={this.onUrlChange}
+        value={this.state.url}
+      />
+    );
+
     return (
       <div>
-        {!AFRAME.utils.device.isMobile() ? (
-          <div>
-            Paste a URL from the web to create an object in the room.
-            <br />
-            Tip: You can paste directly into Hubs using Ctrl+V
-          </div>
-        ) : (
-          <div>Paste a URL from the web to create an object in the room.</div>
-        )}
-
+        {isMobile ? mobileInstructions : desktopInstructions}
         <form onSubmit={this.onCreateClicked}>
           <div className="add-media-form">
-            <div className="add-media-form__input_fields">
-              <input
-                ref={el => (this.input = el)}
-                type={this.state.file ? "text" : "url"}
-                placeholder="Image, Video, or GLTF URL"
-                className="add-media-form__link_field"
-                value={this.state.text}
-                onChange={this.onUrlChange}
-              />
-              <input className="add-media-form__file"
-                id="file"
-                type="file"
-                onChange={this.onFileChange}
-              />
-              <label className="add-media-form__file_label" htmlFor="file">Choose a file</label>
+            <input id="file-input" className="hide-file-input" type="file" onChange={this.onFileChange} />
+            <div className="input-border">
+              {this.state.file ? fileName : urlInput}
+              {this.state.url || this.state.fileName ? withContent : withoutContent}
             </div>
             <div className="add-media-form__buttons">
               <button className="add-media-form__action-button">