realm-icon: Move upload widget to separate file.

This makes it possible to use the upload widget in the realm icon
organization settings on frontend.

.eslintrc.json

@@ -56,6 +56,7 @@
         "channel": false,
         "components": false,
         "viewport": false,
+        "upload_widget": false,
         "avatar": false,
         "feature_flags": false,
         "search_suggestion": false,

static/js/avatar.js

@@ -2,21 +2,6 @@ var avatar = (function () {
 
 var exports = {};
 
-function is_image_format(file) {
-    var type = file.type;
-    if (!type) {
-        return false;
-    }
-
-    var supported_types = [
-        'image/jpeg',
-        'image/png',
-        'image/gif',
-        'image/tiff',
-    ];
-    return _.indexOf(supported_types, type) >= 0;
-}
-
 exports.build_bot_create_widget = function () {
 
     // We have to do strange gyrations with the file input to clear it,
@@ -31,7 +16,7 @@ exports.build_bot_create_widget = function () {
     var clear_button = $('#bot_avatar_clear_button');
     var upload_button = $('#bot_avatar_upload_button');
 
-    return exports.build_widget(
+    return upload_widget.build_widget(
         get_file_input,
         file_name_field,
         input_error,
@@ -50,7 +35,7 @@ exports.build_bot_edit_widget = function (li) {
     var clear_button = li.find('.edit_bot_avatar_clear_button');
     var upload_button = li.find('.edit_bot_avatar_upload_button');
 
-    return exports.build_widget(
+    return upload_widget.build_widget(
         get_file_input,
         file_name_field,
         input_error,
@@ -59,89 +44,6 @@ exports.build_bot_edit_widget = function (li) {
     );
 };
 
-exports.build_widget = function (
-        get_file_input, // function returns a jQuery file input object
-        file_name_field, // jQuery object to show file name
-        input_error, // jQuery object for error text
-        clear_button, // jQuery button to clear last upload choice
-        upload_button // jQuery button to open file dialog
-) {
-
-    function accept(file) {
-        file_name_field.text(file.name);
-        input_error.hide();
-        clear_button.show();
-        upload_button.hide();
-    }
-
-    function clear() {
-        var control = get_file_input();
-        var new_control = control.clone(true);
-        control.replaceWith(new_control);
-        file_name_field.text('');
-        clear_button.hide();
-        upload_button.show();
-    }
-
-    clear_button.on('click', function (e) {
-        clear();
-        e.preventDefault();
-    });
-
-    upload_button.on('drop', function (e) {
-        var files = e.dataTransfer.files;
-        if (files === null || files === undefined || files.length === 0) {
-            return false;
-        }
-        get_file_input().get(0).files = files;
-        e.preventDefault();
-        return false;
-    });
-
-    get_file_input().on('change', function (e) {
-        if (e.target.files.length === 0) {
-            input_error.hide();
-        } else if (e.target.files.length === 1) {
-            var file = e.target.files[0];
-            if (file.size > 5*1024*1024) {
-                input_error.text('File size must be < 5Mb.');
-                input_error.show();
-                clear();
-            } else if (!is_image_format(file)) {
-                input_error.text('File type is not supported.');
-                input_error.show();
-                clear();
-            } else {
-                accept(file);
-            }
-        } else {
-            input_error.text('Please just upload one file.');
-        }
-    });
-
-    upload_button.on('click', function (e) {
-        get_file_input().trigger('click');
-        e.preventDefault();
-    });
-
-    function close() {
-        clear();
-        clear_button.off('click');
-        upload_button.off('drop');
-        get_file_input().off('change');
-        upload_button.off('click');
-    }
-
-    return {
-        // Call back to clear() in situations like adding bots, when
-        // we want to use the same widget over and over again.
-        clear: clear,
-        // Call back to close() when you are truly done with the widget,
-        // so you can release handlers.
-        close: close,
-    };
-};
-
 exports.build_user_avatar_widget = function (upload_function) {
     var get_file_input = function () {
         return $('#user_avatar_file_input').expectOne();
@@ -166,7 +68,7 @@ exports.build_user_avatar_widget = function (upload_function) {
         });
     });
 
-    return exports.build_direct_upload_widget(
+    return upload_widget.build_direct_upload_widget(
             get_file_input,
             $("#user_avatar_file_input_error").expectOne(),
             $("#user_avatar_upload_button").expectOne(),
@@ -174,61 +76,6 @@ exports.build_user_avatar_widget = function (upload_function) {
     );
 };
 
-exports.build_direct_upload_widget = function (
-        get_file_input, // function returns a jQuery file input object
-        input_error, // jQuery object for error text
-        upload_button, // jQuery button to open file dialog
-        upload_function
-) {
-
-    function accept() {
-        input_error.hide();
-        upload_function(get_file_input());
-    }
-
-    function clear() {
-        var control = get_file_input();
-        var new_control = control.clone(true);
-        control.replaceWith(new_control);
-    }
-
-    upload_button.on('drop', function (e) {
-        var files = e.dataTransfer.files;
-        if (files === null || files === undefined || files.length === 0) {
-            return false;
-        }
-        get_file_input().get(0).files = files;
-        e.preventDefault();
-        return false;
-    });
-
-    get_file_input().on('change', function (e) {
-        if (e.target.files.length === 0) {
-            input_error.hide();
-        } else if (e.target.files.length === 1) {
-            var file = e.target.files[0];
-            if (file.size > 5*1024*1024) {
-                input_error.text('File size must be < 5Mb.');
-                input_error.show();
-                clear();
-            } else if (!is_image_format(file)) {
-                input_error.text('File type is not supported.');
-                input_error.show();
-                clear();
-            } else {
-                accept(file);
-            }
-        } else {
-            input_error.text('Please just upload one file.');
-        }
-    });
-
-    upload_button.on('click', function (e) {
-        get_file_input().trigger('click');
-        e.preventDefault();
-    });
-};
-
 return exports;
 
 }());

static/js/upload_widget.js

@@ -0,0 +1,162 @@
+var upload_widget = (function () {
+
+    var exports = {};
+
+    function is_image_format(file) {
+        var type = file.type;
+        if (!type) {
+            return false;
+        }
+
+        var supported_types = [
+            'image/jpeg',
+            'image/png',
+            'image/gif',
+            'image/tiff',
+        ];
+        return _.indexOf(supported_types, type) >= 0;
+    }
+
+    exports.build_widget = function (
+        get_file_input, // function returns a jQuery file input object
+        file_name_field, // jQuery object to show file name
+        input_error, // jQuery object for error text
+        clear_button, // jQuery button to clear last upload choice
+        upload_button // jQuery button to open file dialog
+    ) {
+
+        function accept(file) {
+            file_name_field.text(file.name);
+            input_error.hide();
+            clear_button.show();
+            upload_button.hide();
+        }
+
+        function clear() {
+            var control = get_file_input();
+            var new_control = control.clone(true);
+            control.replaceWith(new_control);
+            file_name_field.text('');
+            clear_button.hide();
+            upload_button.show();
+        }
+
+        clear_button.on('click', function (e) {
+            clear();
+            e.preventDefault();
+        });
+
+        upload_button.on('drop', function (e) {
+            var files = e.dataTransfer.files;
+            if (files === null || files === undefined || files.length === 0) {
+                return false;
+            }
+            get_file_input().get(0).files = files;
+            e.preventDefault();
+            return false;
+        });
+
+        get_file_input().on('change', function (e) {
+            if (e.target.files.length === 0) {
+                input_error.hide();
+            } else if (e.target.files.length === 1) {
+                var file = e.target.files[0];
+                if (file.size > 5 * 1024 * 1024) {
+                    input_error.text('File size must be < 5Mb.');
+                    input_error.show();
+                    clear();
+                } else if (!is_image_format(file)) {
+                    input_error.text('File type is not supported.');
+                    input_error.show();
+                    clear();
+                } else {
+                    accept(file);
+                }
+            } else {
+                input_error.text('Please just upload one file.');
+            }
+        });
+
+        upload_button.on('click', function (e) {
+            get_file_input().trigger('click');
+            e.preventDefault();
+        });
+
+        function close() {
+            clear();
+            clear_button.off('click');
+            upload_button.off('drop');
+            get_file_input().off('change');
+            upload_button.off('click');
+        }
+
+        return {
+            // Call back to clear() in situations like adding bots, when
+            // we want to use the same widget over and over again.
+            clear: clear,
+            // Call back to close() when you are truly done with the widget,
+            // so you can release handlers.
+            close: close,
+        };
+    };
+    exports.build_direct_upload_widget = function (
+        get_file_input, // function returns a jQuery file input object
+        input_error, // jQuery object for error text
+        upload_button, // jQuery button to open file dialog
+        upload_function) {
+
+        function accept() {
+            input_error.hide();
+            upload_function(get_file_input());
+        }
+
+        function clear() {
+            var control = get_file_input();
+            var new_control = control.clone(true);
+            control.replaceWith(new_control);
+        }
+
+        upload_button.on('drop', function (e) {
+            var files = e.dataTransfer.files;
+            if (files === null || files === undefined || files.length === 0) {
+                return false;
+            }
+            get_file_input().get(0).files = files;
+            e.preventDefault();
+            return false;
+        });
+
+        get_file_input().on('change', function (e) {
+            if (e.target.files.length === 0) {
+                input_error.hide();
+            } else if (e.target.files.length === 1) {
+                var file = e.target.files[0];
+                if (file.size > 5 * 1024 * 1024) {
+                    input_error.text('File size must be < 5Mb.');
+                    input_error.show();
+                    clear();
+                } else if (!is_image_format(file)) {
+                    input_error.text('File type is not supported.');
+                    input_error.show();
+                    clear();
+                } else {
+                    accept(file);
+                }
+            } else {
+                input_error.text('Please just upload one file.');
+            }
+        });
+
+        upload_button.on('click', function (e) {
+            get_file_input().trigger('click');
+            e.preventDefault();
+        });
+    };
+
+    return exports;
+
+}());
+
+if (typeof module !== 'undefined') {
+    module.exports = upload_widget;
+}

zproject/settings.py

@@ -858,6 +858,7 @@ JS_SPECS = {
             'js/timerender.js',
             'js/tutorial.js',
             'js/templates.js',
+            'js/upload_widget.js',
             'js/avatar.js',
             'js/settings.js',
             'js/tab_bar.js',