adding large file uploads

css/base.css

@@ -1701,3 +1701,35 @@ ul.tabbar li.active > a:after {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
+
+/* File upload styles */
+.upload-container {
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  background-color: #CCF;
+  border-radius: 50%;
+}
+.upload-container .half {
+  position: absolute;
+  top: 0; left: 0; width: 1rem; height: 2rem;
+  border-radius: 1rem 0 0 1rem;
+  transform-origin: 1rem 1rem;
+}
+.upload-container .half.active {
+  background-color: #66F;
+}
+.upload-container .half.clip {
+  background-color: #CCF;
+}
+.upload-container .inner {
+  font-size: 80%;
+  position: absolute;
+  top: 0.25rem; left: 0.25rem; right: 0.25rem; bottom: 0.25rem;
+  text-align: center;
+  line-height: 1.5rem;
+  border-radius: 50%;
+  background-color: white;
+}

index.html

@@ -277,7 +277,11 @@
         var item = items[i];
         if (item.kind === "file") {
           var file = item.getAsFile();
-          if (file.type.split("/")[0] == "image") {
+          if (!file) {
+            console.log("Failed to get file object from pasted file item", item.kind, item.type);
+            continue;
+          }
+          if (file.type && file.type.split("/")[0] == "image") {
             // Handle inline image
             if (file.size > MAX_ATTACHMENT_SIZE) {
               imageFileScaledToBase64(file, MAX_IMAGE_SIZE, MAX_IMAGE_SIZE, false, onImageSuccess, onError);
@@ -691,10 +695,43 @@
         return avatar;
       }
     }
-
-
     /* END Lettertile */
 
+    /* File uload spinner with a cancel inside */
+    class FileUploadProgress extends React.PureComponent {
+      constructor(props) {
+        super(props);
+
+        this.state = {
+          progress: 0
+        };
+      }
+
+      render() {
+        var halfclip, progress1, progress2;
+        if (this.state.progress < 0.5) {
+          halfclip = {display: "block"};
+          progress1 = {transform: "rotate(" + (this.state.progress*360) + "deg)"};
+          progress2 = {display: "none"};
+        } else {
+          halfclip = {display: "none"};
+          progress1 = {transform: "rotate(180deg)"};
+          progress2 = {display: "block", transform: "rotate(" + (180 + (this.state.progress-0.5)*360) + "deg)"};
+        }
+        return (
+          <div className="upload-container">
+            <div className="half active" style={progress1}></div>
+            <div className="half clip" style={halfclip}></div>
+            <div className="half active" style={progress2}></div>
+            <div className="inner">{this.props.onCancel ?
+              <MenuCancel onCancel={this.props.onCancel} /> :
+              null}
+            </div>
+          </div>
+        );
+      }
+    }
+
     /* BEGIN In-place text editor. Shows text with an icon
      * which toggles it into an input field */
     var InPlaceEdit = React.createClass({