permite usuario subir uma foto como avatar

bikeanjo · May 27, 2015 · b91b874 · b91b874
1 parent 2239b13
commit b91b874
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 4 deletions.
diff --git a/assets/scripts/main.js b/assets/scripts/main.js
@@ -73,6 +73,20 @@
             $this.prop('tabindex', i + 1);
         });
 
+        $('[data-file-preview]').each(function(){
+            var $image = $(this);
+            var $target = $($image.attr('data-file-preview'));
+
+            $target.change(function(evt){
+                if (this.files && this.files[0]) {
+                    var reader = new FileReader();
+                    reader.onload = function (e) {
+                        $image.attr('src', e.target.result);
+                    };
+                    reader.readAsDataURL(this.files[0]);
+                }
+            });
+        });
     });
     $(document).on('keydown.radio.data-api', '[data-toggle^=radio], .radio', function (e) {
         if( e.type === 'keydown' && e.keyCode === 32 ){

diff --git a/assets/styles/base/common.less b/assets/styles/base/common.less
@@ -27,6 +27,13 @@ body {
     text-transform: uppercase;
 }
 
+label.btn,
+.forms label.btn {
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 1.6em;
+}
+
 .close {
     opacity: 0.9;
 }

diff --git a/cyclists/migrations/0002_user_avatar.py b/cyclists/migrations/0002_user_avatar.py
@@ -0,0 +1,19 @@
+# -*- coding: utf-8 -*-
+from __future__ import unicode_literals
+
+from django.db import models, migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('cyclists', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='user',
+            name='avatar',
+            field=models.ImageField(upload_to=b'avatars', verbose_name='Avatar', blank=True),
+        ),
+    ]
diff --git a/cyclists/models.py b/cyclists/models.py
@@ -1,8 +1,11 @@
 # -*- coding: utf-8 -*-
+import os
 from datetime import date
+from django.conf import settings
 from django.contrib.auth.models import AbstractUser
 from django.db import models
 from django.utils.translation import ugettext_lazy as _
+from django.core.files.storage import FileSystemStorage
 
 GENDER = (
     ('male', _('Male')),
@@ -55,11 +58,37 @@
 )
 
 
+class AvatarStorage(FileSystemStorage):
+    def get_available_name(self, name):
+        if self.exists(name):
+            os.remove(name)
+        return name
+
+    def url(self, name):
+        basename = os.path.basename(name)
+        subfolder = getattr(type(self), 'subfolder', '')
+        relative = os.path.join(subfolder, basename)
+        return super(AvatarStorage, self).url(relative)
+
+    @classmethod
+    def set_folder(cls, subfolder=''):
+        cls.subfolder = subfolder
+        base_folder = os.path.join(settings.MEDIA_ROOT, subfolder)
+
+        def _path_gen(user, filename):
+            extension = filename.rsplit('.', 1)[-1]
+            new_name = '%s.%s' % (user.username, extension)
+            return os.path.join(base_folder, new_name)
+        return _path_gen
+
+
 class User(AbstractUser):
     class Meta:
         verbose_name = _('User')
         verbose_name_plural = _('Users')
 
+    avatar = models.ImageField(_('Avatar'), upload_to=AvatarStorage.set_folder('avatars'),
+                               storage=AvatarStorage(), blank=True)
     country = models.CharField(_('Country'), max_length=32, blank=True)
     city = models.CharField(_('City'), max_length=32, blank=True)
     gender = models.CharField(_('Gender'), max_length=24, blank=True)
@@ -72,6 +101,9 @@ class Meta:
     accepted_agreement = models.BooleanField(_('Accepted agreement'), default=False)
 
     def get_avatar_url(self):
+        if self.avatar:
+            return self.avatar.url
+
         social = self.socialaccount_set.first()
         if social:
             return social.get_avatar_url()

diff --git a/front/forms.py b/front/forms.py
@@ -217,7 +217,7 @@ class Meta:
 
 class BikeanjoUserInforForm(forms.ModelForm):
     class Meta:
-        fields = ('first_name', 'last_name', 'email', 'country', 'city', 'gender', 'birthday',)
+        fields = ('avatar', 'first_name', 'last_name', 'email', 'country', 'city', 'gender', 'birthday',)
         model = models.User
 
 
@@ -226,7 +226,7 @@ class RequesterUserInforForm(forms.ModelForm):
     bike_use = forms.ChoiceField(label=_('Bike user'), choices=models.BIKE_USE)
 
     class Meta:
-        fields = ('first_name', 'last_name', 'email', 'country', 'city', 'gender', 'birthday',
+        fields = ('avatar', 'first_name', 'last_name', 'email', 'country', 'city', 'gender', 'birthday',
                   'ride_experience', 'bike_use', 'initiatives',)
         model = models.User
 

diff --git a/templates/bikeanjo_dashboard_userinfo.html b/templates/bikeanjo_dashboard_userinfo.html
@@ -9,7 +9,7 @@
 
             <section class="dashboard-content col-md-7">
 
-                <form class="card list" method="POST">{% csrf_token %}
+                <form class="card list" method="POST" enctype="multipart/form-data">{% csrf_token %}
                     <header class="card-header negative">
                         <h2 class="card-title"><a href="{% url 'user_register' %}"><i class="fa fa-arrow-left"></i><span class="sr-only">Voltar</span></a> Cadastro pessoal</h2>
                     </header>
@@ -26,6 +26,25 @@ <h2 class="card-title"><a href="{% url 'user_register' %}"><i class="fa fa-arrow
 
                         <div class="forms">
                             {% csrf_token %}
+                            <div class="form-group">
+                                <label class="primary-label">Avatar</label>
+                                <span class="user-icon">
+                                    <img src="{{ user.get_avatar_url }}"
+                                         data-file-preview="#{{ form.avatar.auto_id }}"
+                                         class="img-circle"
+                                         width="85" height="85" 
+                                         title="{{ user.get_full_name }}"
+                                         alt="{% trans "Photo from" %} {{ user.get_full_name }}"/>
+                                </span>
+
+                                <label  for="{{ form.avatar.auto_id }}" 
+                                        class="col-sm-offset-2 btn btn-success">Adicionar</label>
+
+                                <div class="hidden">
+                                    <input id="{{ form.avatar.auto_id }}" name="{{ form.avatar.html_name }}" type="file"/>
+                                </div>
+                            </div>
+
                             <div class="form-group {% if form.first_name.errors %}has-error has-feedback{% endif %}">
                                 <label class="primary-label" for="{{ form.first_name.id_for_label }}">{{ form.first_name.label }}</label>
                                 <input class="form-control" type="text" name="{{ form.first_name.html_name }}" id="{{ form.first_name.id_for_label }}" value="{{ form.first_name.value|default:"" }}" placeholder="Seu nome completo">

diff --git a/templates/requester_dashboard_userinfo.html b/templates/requester_dashboard_userinfo.html
@@ -9,7 +9,7 @@
 
             <section class="dashboard-content col-md-7">
 
-                <form class="card list" method="POST">{% csrf_token %}
+                <form class="card list" method="POST" enctype="multipart/form-data">{% csrf_token %}
                     <header class="card-header negative">
                         <h2 class="card-title"><a href="{% url 'user_register' %}"><i class="fa fa-arrow-left"></i><span class="sr-only">Voltar</span></a> Cadastro pessoal</h2>
                     </header>
@@ -26,6 +26,26 @@ <h2 class="card-title"><a href="{% url 'user_register' %}"><i class="fa fa-arrow
 
                         <div class="forms">
                             {% csrf_token %}
+
+                            <div class="form-group">
+                                <label class="primary-label">Avatar</label>
+                                <span class="user-icon">
+                                    <img src="{{ user.get_avatar_url }}"
+                                         data-file-preview="#{{ form.avatar.auto_id }}"
+                                         class="img-circle"
+                                         width="85" height="85" 
+                                         title="{{ user.get_full_name }}"
+                                         alt="{% trans "Photo from" %} {{ user.get_full_name }}"/>
+                                </span>
+
+                                <label  for="{{ form.avatar.auto_id }}" 
+                                        class="col-sm-offset-2 btn btn-success">Adicionar</label>
+
+                                <div class="hidden">
+                                    <input id="{{ form.avatar.auto_id }}" name="{{ form.avatar.html_name }}" type="file"/>
+                                </div>
+                            </div>
+
                             <div class="form-group {% if form.first_name.errors %}has-error has-feedback{% endif %}">
                                 <label class="primary-label" for="{{ form.first_name.id_for_label }}">{{ form.first_name.label }}</label>
                                 <input class="form-control" type="text" name="{{ form.first_name.html_name }}" id="{{ form.first_name.id_for_label }}" value="{{ form.first_name.value|default:"" }}" placeholder="Seu nome completo">