Allow user to upload an image for their bot's avatar (front end).

(imported from commit e1de0df38fc06fabab8a715ba7bbee71d8bde7b9)

templates/zephyr/settings.html

@@ -135,7 +135,10 @@
       <table class="table table-condensed table-striped" id="bots_table">
         <tbody>
           <tr>
-            <th class="bot_name_header">Name</th><th>Username</th><th class="bot_api_key_header">API key</th>
+            <th class="bot_name_header">Name</th>
+            <th>Username</th>
+            <th>Avatar (optional)</th>
+            <th class="bot_api_key_header">API key</th>
           </tr>
           <tr id="create_bot_row">
             <td>
@@ -144,14 +147,24 @@
                        maxlength=100 placeholder="Bot name" value="" />
               </div>
               <div><label for="create_bot_name" generated="true" class="text-error"></label></div>
+            </td>
             <td>
               <div class="create_bot_control">
                 <input type="text" name="bot_short_name" id="create_bot_short_name" class="required bot_local_part"
                        placeholder="Bot username" value="" />-bot@{{ user_profile.realm.domain }}
               </div>
               <div><label for="create_bot_short_name" generated="true" class="text-error"></label></div>
-            <td><input type="submit" class="btn btn-primary"
+            </td>
-                       id="create_bot_button" value="Create Bot" />
+            <td>
+              <p>
+                  <input type="file" name="bot_avatar_file_input" id="bot_avatar_file_input" value="Upload avatar" />
+              </p>
+              <div id="bot_avatar_file_input_error"></div>
+            </td>
+            <td>
+              <input type="submit" class="btn btn-primary" id="create_bot_button" value="Create Bot" />
+              <div id="create_bot_spinner"></div>
+            </td>
           </tr>
         </tbody>
       </table>

zephyr/static/js/settings.js

@@ -2,9 +2,18 @@ var settings = (function () {
 
 var exports = {};
 
-function add_bot_row(name, email, api_key) {
+function add_bot_row(name, email, avatar_url, api_key) {
+    var avatar_cell;
+
+    if (avatar_url) {
+        avatar_cell = '<img src="' + avatar_url + '" height=60 width=60>';
+    } else {
+        avatar_cell = '(default)';
+    }
+
     var row = $('<tr></tr>').append($('<td>').text(name),
                                     $('<td>').text(email),
+                                    $('<td>').html(avatar_cell),
                                     $('<td class="api_key">').text(api_key));
     $('#create_bot_row').before(row);
 }
@@ -23,7 +32,7 @@ $(function () {
             $('#bot_table_error').hide();
 
             $.each(data.bots, function (idx, elem) {
-                add_bot_row(elem.full_name, elem.username, elem.api_key);
+                add_bot_row(elem.full_name, elem.username, elem.avatar_url, elem.api_key);
             });
         },
         error: function (xhr, error_type, xhn) {
@@ -37,27 +46,73 @@ $(function () {
                           },
                           "Please only use characters that are valid in an email address");
 
+    function clear_bot_avatar_file_input() {
+        var control = $('#bot_avatar_file_input');
+        var new_control = control.clone(true);
+        control.replaceWith(new_control);
+    }
+
+    $('#bot_avatar_file_input').change(function(e) {
+        if (e.target.files.length === 0) {
+            $('#bot_avatar_file_input_error').hide();
+        } else if (e.target.files.length === 1) {
+            var file = e.target.files[0];
+            if (file.size > 5*1024*1024) {
+                $('#bot_avatar_file_input_error').text('File size must be < 5Mb.');
+                $('#bot_avatar_file_input_error').show();
+                clear_bot_avatar_file_input();
+            }
+            else {
+                $('#bot_avatar_file_input_error').hide();
+            }
+        }
+        else {
+            $('#bot_avatar_file_input_error').text('Please just upload one file.');
+        }
+    });
+
     $('#create_bot_form').validate({
         errorClass: 'text-error',
         success: function () {
             $('#bot_table_error').hide();
         },
         submitHandler: function () {
-            var name = $('#create_bot_name').val();
+            var full_name = $('#create_bot_name').val();
             var short_name = $('#create_bot_short_name').val();
+            var formData = new FormData();
+            formData.append('csrfmiddlewaretoken', csrf_token);
+            formData.append('full_name', full_name);
+            formData.append('short_name', short_name);
+            jQuery.each($('#bot_avatar_file_input')[0].files, function(i, file) {
+                formData.append('file-'+i, file);
+            });
+            util.make_loading_indicator($('#create_bot_spinner'), 'Adding bot');
+            $('#create_bot_button').hide();
             $.ajax({
-                type: 'POST',
                 url: '/json/create_bot',
-                dataType: 'json',
+                type: 'POST',
-                data: {full_name: name, short_name: short_name},
+                data: formData,
+                cache: false,
+                processData: false,
+                contentType: false,
                 success: function (data) {
+                    util.destroy_loading_indicator($("#create_bot_spinner"));
                     $('#bot_table_error').hide();
                     $('#create_bot_name').val('');
                     $('#create_bot_short_name').val('');
+                    $('#create_bot_button').show();
+                    clear_bot_avatar_file_input();
 
-                    add_bot_row(name, short_name + "-bot@" + page_params.domain, data.api_key);
+                    add_bot_row(
+                            full_name,
+                            short_name + "-bot@" + page_params.domain,
+                            data.avatar_url,
+                            data.api_key
+                    );
                 },
                 error: function (xhr, error_type, exn) {
+                    util.destroy_loading_indicator($("#create_bot_spinner"));
+                    $('#create_bot_button').show();
                     $('#bot_table_error').text(JSON.parse(xhr.responseText).msg).show();
                 }
             });