diff --git a/index.html b/index.html
index 4a7553cc0..018fb4b9b 100644
--- a/index.html
+++ b/index.html
@@ -30,7 +30,7 @@
     <div class="right-fixed">
       <ul class="right-menu">
         <li onclick="buttonScreenshotTock()"> <a class="camera"  href="#"> <span> Capture image as PNG </span> <img src="ui_assets/camera-icon.svg"> </a></li>
-        <li onclick="document.querySelector('#default-street').addEventListener('loaded', (evt)=> {evt.target.setAttribute('streetmix-loader', 'inputStreetmix')})"> <a class="load"  href="#"> <span> Load Streetmix URL </span> <img src="ui_assets/streetmix-logo.svg"> </a></li>
+        <li> <a class="load"  href="#"> <span> Load Streetmix URL </span> <img src="ui_assets/streetmix-logo.svg"> </a></li>
         <!-- <li onclick="inputJSON()"> <a class="load"  href="#"> <span> Load JSON String </span> <img src="assets/ui_assets/upload-icon.svg"> </a></li> -->
         <li><a class="load"> <label for="inputfile" style="display: inherit; align-items: center; cursor: pointer"> <input type="file" id="inputfile" style="display:none" accept=".js, .json, .txt"> <span> Load JSON File </span> <img src="ui_assets/upload-icon.svg"></label></a></li>
         <li> <a id="custom-enter-vr-button" class="vr" href="#"> <span class="vr">Enter VR mode</span> <img src="ui_assets/vr-icon.svg"> </a></li>
@@ -73,6 +73,18 @@
   </body>
   <script>
 
+    document.querySelector('.load').addEventListener('click', ()=> {
+      const defaultStreetElem = document.getElementById('default-street');
+      if (defaultStreetElem) {
+        const streetmixURL = prompt(
+          'Please enter a Streetmix URL',
+          'https://streetmix.net/kfarr/3/example-street'
+        );
+        // set inputStreetmix attribute with any value to call input prompt
+        defaultStreetElem.setAttribute('streetmix-loader', 'inputStreetmix', streetmixURL);
+      }
+    });
+
     // only show VR button if headset connected
     AFRAME.registerComponent('vr-mode-ui-if-headset', {
       dependencies: ['vr-mode-ui'],
diff --git a/src/index.js b/src/index.js
index 2e92106b8..6930b17d2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -22,6 +22,17 @@ AFRAME.registerSystem('json-3dstreet', {
     jsonURL: { type: 'string' }
   },
   init: function() {},
+  fileJSON: function () {
+      // handle viewer widget click to open 3dstreet json scene
+      let reader = new FileReader();
+      reader.onload = function () {
+        AFRAME.scenes[0].setAttribute('metadata', 'sceneId', '');
+        AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', '');
+        createElementsFromJSON(reader.result);
+      };
+      reader.readAsText(this.files[0]);
+    
+  },
   loadFromURL: function (fileURL) {
     // load JSON file from URL
     console.log(fileURL)
@@ -123,23 +134,20 @@ AFRAME.registerComponent('streetmix-loader', {
     showBuildings: { default: true },
     name: { default: '' }
   },
-  prepareStreetElements: function() {
+  createStreetElements: function() {
     const streetContainerEl = jsonUtils.prepareStreetContainer();
 
-    let defaultStreet = streetContainerEl.querySelector('#default-street');
+    const defaultStreet = streetContainerEl.querySelector('#default-street');
     if (!defaultStreet) {
       defaultStreet = document.createElement("a-entity");
       streetContainerEl.appendChild(defaultStreet);
       defaultStreet.setAttribute('id', 'default-street');
     } 
-    this.defaultStreet = defaultStreet;
+    return
   },
-  // this use os text input prompt, delete current scene, then load streetmix file
-  inputStreetmix: function () {
-    streetmixURL = prompt(
-      'Please enter a Streetmix URL',
-      'https://streetmix.net/kfarr/3/example-street'
-    );
+  // load streetmix street from input prompt, delete current scene, then load streetmix file
+  setURLFromPrompt: function () {
+    const streetmixURL = this.data.inputStreetmix;
     setTimeout(function () {
       window.location.hash = streetmixURL;
     });
@@ -147,43 +155,28 @@ AFRAME.registerComponent('streetmix-loader', {
     AFRAME.scenes[0].setAttribute('metadata', 'sceneId', '');
     AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', '');
 
-    this.prepareStreetElements();
-    this.defaultStreet.setAttribute('streetmix-loader', 'streetmixStreetURL', streetmixURL);
+    this.data.streetmixStreetURL = streetmixURL;
+    this.data.streetmixAPIURL = '';
+    this.data.inputStreetmix = '';
 
   },
-  update: function (oldData) { // fired at start and at each subsequent change of any schema value
-    // This method may fire a few times when viewing a streetmix street in 3dstreet:
-    // First to find the proper path, once to actually load the street, and then subsequent updates such as street name
-    var data = this.data;
-
-    this.prepareStreetElements();
-    const el = this.defaultStreet;
-
-    if ((data.inputStreetmix !== '') && (data.streetmixStreetURL === '') && (data.streetmixAPIURL === '')) {
-      this.inputStreetmix();
-      data.inputStreetmix = '';
-      return;
-    }
-
-    // if the loader has run once already, and upon update neither URL has changed, do not take action
-    if ((oldData.streetmixStreetURL === data.streetmixStreetURL) && (oldData.streetmixAPIURL === data.streetmixAPIURL)) {
-      // console.log('[streetmix-loader]', 'Neither streetmixStreetURL nor streetmixAPIURL have changed in this component data update, not reloading street.')
-      return;
-    }
+  create3DStreet: function () {
+    // create 3dStreet object from streetmix JSON, received via URL
+    const data = this.data;
+    const el = this.el;
 
     // if no value for 'streetmixAPIURL' then let's see if there's a streetmixURL
     if (data.streetmixAPIURL.length === 0) {
       if (data.streetmixStreetURL.length > 0) {
-        const streetmixAPIURL = streetmixUtils.streetmixUserToAPI(data.streetmixStreetURL);
-        console.log('[streetmix-loader]', 'setting `streetmixAPIURL` to', streetmixAPIURL);
-        el.setAttribute('streetmix-loader', 'streetmixAPIURL', streetmixAPIURL);
+        data.streetmixAPIURL = streetmixUtils.streetmixUserToAPI(data.streetmixStreetURL);
+        console.log('[streetmix-loader]', 'setting `streetmixAPIURL` to', data.streetmixAPIURL);
+      } else {
+        console.log('[streetmix-loader]', 'Neither `streetmixAPIURL` nor `streetmixStreetURL` properties provided, please provide at least one.');
         return;
       }
-      console.log('[streetmix-loader]', 'Neither `streetmixAPIURL` nor `streetmixStreetURL` properties provided, please provide at least one.');
-      return;
     }
 
-    var request = new XMLHttpRequest();
+    const request = new XMLHttpRequest();
     console.log('[streetmix-loader]', 'GET ' + data.streetmixAPIURL);
 
     request.open('GET', data.streetmixAPIURL, true);
@@ -194,7 +187,8 @@ AFRAME.registerComponent('streetmix-loader', {
         const streetmixSegments = streetmixResponseObject.data.street.segments;
         const streetmixName = streetmixResponseObject.name;
         console.log('streetmixName', streetmixName);
-        el.setAttribute('streetmix-loader', 'name', streetmixName);
+        //el.setAttribute('streetmix-loader', 'name', streetmixName);
+        data.name = streetmixName;
 
         const currentSceneTitle = AFRAME.scenes[0].getAttribute('metadata').sceneTitle;
         if (!currentSceneTitle) { // only set title from streetmix if none exists
@@ -219,7 +213,22 @@ AFRAME.registerComponent('streetmix-loader', {
       // There was a connection error of some sort
       console.log('[streetmix-loader]', 'Loading Error: There was a connection error of some sort');
     };
-    request.send();
+    request.send();  
+  },
+  update: function (oldData) { // fired at start and at each subsequent change of any schema value
+    // This method may fire a few times when viewing a streetmix street in 3dstreet:
+    // First to find the proper path, once to actually load the street, and then subsequent updates such as street name
+    if (this.data.inputStreetmix !== '') {
+      this.setURLFromPrompt();
+    }
+
+    // if the loader has run once already, and upon update neither URL has changed, do not take action
+    if ((oldData.streetmixStreetURL === this.data.streetmixStreetURL) && (oldData.streetmixAPIURL === this.data.streetmixAPIURL)) {
+      // console.log('[streetmix-loader]', 'Neither streetmixStreetURL nor streetmixAPIURL have changed in this component data update, not reloading street.')
+      return;
+    }
+    this.create3DStreet();
+
   }
 });