custom sprite image upload; closes #498

Author: stevekrouse

create.html

@@ -1361,6 +1361,7 @@ <h4 class="modal-body text-danger" :style="{display: !getID() ? 'block' : 'none'
 
       firebase.database().ref().update(updates).then(function(){
         window.location.hash = name
+        setUserUploadImageListener() // sync user-uploaded photos for this project name
         myCode = firebase.auth().currentUser
         makeClean()
       }).catch(function(error){
@@ -1602,7 +1603,67 @@ <h4 class="modal-body text-danger" :style="{display: !getID() ? 'block' : 'none'
             }
         }, 10)
     }
-
+    
+    window.onmessage = function(e){
+      if (!(e.data instanceof File)){
+        return
+      }
+      if (!firebase.auth().currentUser) {
+        alert('Please login to upload images.')
+        return
+      }
+      if (!getID()) {
+        alert('Please save your project to upload images.')
+        return
+      }
+      if (!myCode) {
+        alert('Please save this project to your account to upload images.')
+      }
+      
+      var uniqueId = Math.random().toString(36).substring(2) 
+               + (new Date()).getTime().toString(36);
+      
+      var ref = firebase.storage().ref()
+        .child('UserImageUpload')
+        .child(firebase.auth().currentUser.uid)
+        .child(getID())
+        .child(uniqueId)
+
+      var file = e.data
+      ref.put(file)
+        .then(function(snapshot){
+          if (getID()) {
+            firebase.database().ref()
+              .child('code-image-uploads')
+              .child(getID())
+              .child(uniqueId)
+              .set(snapshot.downloadURL)
+          }
+        }).catch(function(error){
+          alert('There was an error uploading your image: ' + error.message)
+        })
+    };
+    
+    var ref
+    setUserUploadImageListener = function() {
+      ref && ref.off() 
+      ref = firebase.database().ref()
+        .child('code-image-uploads')
+        .child(getID())
+      ref.on('value', function(snapshot) {
+        var addImagesFunc = () => {
+          var images = snapshot.val() || {}
+          scratch.contentWindow.app.setUserUploadImages(Object.values(images))
+        }
+        if (scratch.contentWindow.app){
+          addImagesFunc()
+        } else {
+          scratch.contentDocument.addEventListener('DOMContentLoaded', addImagesFunc, false);
+        }
+      })  
+    }
+    getID() && setUserUploadImageListener()
+    
     function debounce(func, wait, immediate) {
       var timeout;
       return function() {

docs/index.html

@@ -68,6 +68,16 @@
             e.target.parentElement.nextElementSibling.childNodes[2].childNodes[0].innerHTML = e.target.value
             e.target.parentElement.nextElementSibling.childNodes[0].setAttribute("data-clipboard-text", e.target.value)
         }
+        
+        var browseImages = function() {
+          document.getElementById("uploadInput").click()
+        }
+        
+        var uploadFile = function(files) {
+          if (files.length === 1) {
+            window.top.postMessage(files[0], '*')
+          }
+        }
 
         Vue.component('vue-block', {
             template: "#block-template",
@@ -472,7 +482,11 @@
                          }
                         ],
                         Image: [
-                            
+                            {
+                              html: '<button class="btn btn-medium btn-info" onclick="browseImages()">Upload Image</button>' + 
+                                    '<input id="uploadInput" onchange="uploadFile(this.files)" style="display:none" type="file" name="pic" accept="image/*">',
+                              tags: "picture image custom external upload sprite"
+                            },
                             {
                                 url: "./images/kpU9y5M.png",
                                 code: 'var unicorn = new Image({\n  url: "./docs/images/unicorn.png",\n  width: 120, \n  height: 80,\n})',
@@ -2077,6 +2091,21 @@
                 },
             },
             methods: {
+                setUserUploadImages: function(images) {
+                    var newImages = this.menus['Sprites & Backgrounds']['Image'].filter(
+                        block => !block.userUploadImage
+                    )
+                    images.reverse() // show the newest first
+                    newImages.splice(1, 0, ...images.map(imageURL => {
+                        return {
+                            url: imageURL,
+                            code: 'var sprite1 = new Image({url: "' + imageURL + '"})',
+                            tags: "upload image picture",
+                            userUploadImage: true
+                        }
+                    }))
+                    this.menus['Sprites & Backgrounds']['Image'] = newImages
+                },
                 searchMenu: function(menu) {
                     if (this.search == '') {
                         return menu