Changed user avatar upload

avatar/views.py

@@ -78,17 +78,25 @@ def add(request, extra_context=None, next_override=None,
             messages.success(request, _("Successfully uploaded a new avatar."))
             avatar_updated.send(sender=Avatar, user=request.user, avatar=avatar)
             return HttpResponseRedirect(next_override or _get_next(request))
-    return render_to_response(
-            'avatar/add.html',
-            extra_context,
-            context_instance = RequestContext(
-                request,
-                { 'avatar': avatar, 
-                  'avatars': avatars, 
-                  'upload_avatar_form': upload_avatar_form,
-                  'next': next_override or _get_next(request), }
-            )
-        )
+        else:
+            messages.error(request, upload_avatar_form.errors['avatar'])
+
+        return HttpResponseRedirect(_get_next(request))
+    else:
+        # Only allow post request to change avatar.
+        raise Http404
+
+    # return render_to_response(
+    #         'avatar/add.html',
+    #         extra_context,
+    #         context_instance = RequestContext(
+    #             request,
+    #             { 'avatar': avatar, 
+    #               'avatars': avatars, 
+    #               'upload_avatar_form': upload_avatar_form,
+    #               'next': next_override or _get_next(request), }
+    #         )
+    #     )
 
 @login_required
 def group_add(request, gid):

profile/templates/profile/set_profile.html

@@ -4,9 +4,16 @@
 {% block right_panel %}
 <div id="user-basic-info">
     <h2>{% trans "Profile Setting" %}</h2>
+
+    <label>{% trans "Avatar:" %}</label>{% avatar request.user.username 60 %}
+    <form id="id_avatar_form" enctype="multipart/form-data" method="POST" action="{% url avatar_add %}" style="display:inline-block;">
+      <span class="fileinput-button">
+        <a href="#">{% trans "Change picture" %}</a>
+        <input type="file" name="avatar" id="id_avatar" />
+      </span>
+    </form>
+
     <form action="" method="post">
-        <label>{% trans "Avatar:" %}</label>{% avatar request.user.username 60 %}
-        <a href="{{ SITE_ROOT }}avatar/add/">{% trans "Update" %}</a><br />
         <label>{% trans "Password:" %}</label><a href="{{ SITE_ROOT }}accounts/password/change/">{% trans "Update" %}</a><br/>
         <label>{% trans "Nickname:" %}</label><input type="text" name="nickname" value="{{ form.data.nickname }}" class="text-input" />
         {% for error in form.nickname.errors %}
@@ -22,3 +29,35 @@
     </form>
 </div>
 {% endblock %}
+
+{% block extra_script %}
+<script type="text/javascript">
+$('#id_avatar').change(function() {
+    // check file extension
+    var file = $(this).val();
+    var extension = file.substr((file.lastIndexOf('.') +1));
+    var allowed_ext = ['jpg', 'png', 'jpeg', 'gif'];
+    var allow = false;
+    for (e in allowed_ext) {
+        if (extension == allowed_ext[e]) {
+            allow = true;
+            break;
+        }
+    }
+    if (!allow) {
+        var err_msg = extension + ' is an invalid file extension. Authorized extensions are : ' + allowed_ext;
+        feedback(err_msg, 'error');
+        return false;        
+    }
+
+    // check file size is less than 1MB
+    if (this.files && this.files[0].size > 1024*1024) {
+        feedback('Your file is too big, the maximum allowed size is 1MB', 'error');
+        return false;        
+    }
+    
+    $('#id_avatar_form').submit();
+    return false;
+})
+</script>
+{% endblock %}

templates/snippets/file_upload_progress_js.html

@@ -52,16 +52,17 @@ $('#upload-file-form .submit').click(function () {
         return false;
     }
 
-    var total = 0;
-    $.each($('#upload-file-form input[type=file]'), function() {
-        if($(this).val()) {
-            total += this.files[0].size;
+    if (this.files) {
+        var total = 0;
+        $.each($('#upload-file-form input[type=file]'), function() {
+            if($(this).val()) {
+                total += this.files[0].size;
+            }
+        });
+        if (total > {{ max_upload_file_size }}) {
+            $('#upload-file-form .error').html('{% trans "File size surpasses the limit." %}').removeClass('hide');
+            return false;
         }
-    });
-
-    if (total > {{ max_upload_file_size }}) {
-        $('#upload-file-form .error').html('{% trans "File size surpasses the limit." %}').removeClass('hide');
-        return false;
     }
 
     $('#upload-file-form .error').addClass('hide');