0

Tengo un modelo personalizado de usuarios en el cual quiero adicionar un campo de avatar del usuario:

class User(AbstractBaseUser, PermissionsMixin):

    # email
    # username
    # first_name
    # last_name  

    slug = models.SlugField(max_length=100,blank=True) 

    avatar = models.ImageField(upload_to='avatars',blank=True,null=True,verbose_name='Photo')

    # Con este signal indico que el valor del campo username se
    # almacene tambien en el campo slug, para generar un URL amigable
    # cuando quiera ir a los datos de un usuario tipo `preferences/username`
    @receiver(post_save, sender=User)
    def post_save_user(sender, instance, **kwargs):
        slug = slugify(instance.username)
        User.objects.filter(pk=instance.pk).update(slug=slug)

    @property
    def image_url(self):
        if self.avatar and hasattr(self.avatar, 'url'):
            return self.avatar.url

El método image_url() anterior, se ha definido de esa manera porque cuando se crea un usuario por primera vez, éste no tiene asociado ningún avatar o imágen.

Entonces cuando llamo en el template el campo avatar.url este método examina si campo avatar tiene el atributo url y lo retorna para pintarlo en el template de la siguiente manera:

<img src="{{ object.image_url|default_if_none:'#' }}" class="img-thumbnail" alt="User Image">

Esto lo estoy haciendo en un template llamado layout.html del cual heredan todos mis templates.

En caso de no poder extraer el url del avatar, lo cual se daría cuando un usuario no tenga una fotografía asignada al ser creado, entonces no se renderiza nada en el template, o tendría una fuente desconocida en la etiqueta img en su atributo source

introducir la descripción de la imagen aquí

De esta manera manejo un poco ese error que saldría que Cuando un usuario es creado, éste no tiene asociada, este error para ser más precisos:

raise ValueError("The '%s' attribute has no file associated with it." % self.field.name)
ValueError: The 'avatar' attribute has no file associated with it.
[13/Jun/2017 15:10:16] "GET /dashboard/ HTTP/1.1" 500 183409 

Esto salía porque antes en el template layout.html llamaba el campo avatar de la siguiente forma:

<img src="{{ userprofile.user.avatar.url }}" class="img-thumbnail" alt="User Image"> 

userprofile es un contexto que envio a este template en donde estan todos los datos del usuario, entre ellos el avatar

De alguna manera lo he gestionado de esa forma, teniendo el siguiente flujo de trabajo:

url(r"^preferences/(?P<slug>[\w.\-]+)/$",
        views.AccountSettingsUpdateView.as_view(),
        name='preferences'
    ),

Mi formulario UserUpdateForm() es bastante básico en donde llamo varios campos del usuario entre ellos el que me interesa que es avatar:

class UserUpdateForm(forms.ModelForm):
        class Meta:
            fields = ("first_name", "last_name", "avatar",)
            model = get_user_model()

Mi vista AccountSettingsUpdateView esta de la siguiente manera: Como según se dice, la vista que maneja este formulario recibirá el archivo de datos (mi imagen del campo avatar en este caso) en el request.FILES, como es el ejemplo, he dimensionado de alguna manera como podría quedar el manejo del request del formulario en mi vista, haciendo uso del método post():

Creo que mi problema puede estar acá con lo del request.POST, request.FILES solo que no me oriento bien en esta parte

class AccountSettingsUpdateView(LoginRequiredMixin, UpdateView):
    # Obtiene mi modelo de usuario personalizado
    model = get_user_model()
    # Obtiene el formulario a utilizar
    form_class = UserUpdateForm
    success_url = reverse_lazy('dashboard')
    context_object_name = 'preferences'

    def post(self, request, *args,**kwargs):
        form = self.get_form()
        if request.method=='POST':
            form = UserUpdateForm(request.POST, request.FILES)
            if form.is_valid():
                form.save()
                return super(AccountSettingsUpdateView, self).form_valid(form)
        else:
            return super(AccountSettingsUpdateView, self).form_invalid(form)


    '''
    # Tenia mis dudas si sobreescribia el form_valid()
    def form_valid(self, form):
        if self.request.method == 'POST':
            form = UserUpdateForm(self.request.POST, self.request.FILES)
            if form.is_valid():
                form.save()
                return super(AccountSettingsUpdateView, self).form_valid(form)
        else:
            return super(AccountSettingsUpdateView, self).form_invalid(form)
        #return render(self.request, 'user_form.html', {'form':form})
    '''

Mi template user_form.html en donde renderizo el formulario es el siguiente:

{% extends 'layout.html' %}
{% load bootstrap3 %}

{% block title_tag %}Accounts | Settings | iHost {{ block.super }}{% endblock %}

{% block body_content %}
<div class="container">
    <h1>Account Details</h1>
    <form enctype="multipart/form-data" method="POST">
        {% csrf_token %}
        {% bootstrap_form form %}
        <input type="submit" value="Save Changes" class="btn btn-default">
    </form>
</div>

{% endblock %}

Lo que me sucede es que cuando entro a la opcion de Settings en mi aplicación, lo que llama al url preferences/(?P<slug>[\w.\-]... referenciado anteriormente, ahí mi imagen es renderizada porque este url llama a mi vista AccountSettingsUpdateView la cual tiene el formulario UserUpdateForm() en el cual el campo avatar es renderizado para subir una imagen.

Pero cuando voy a otra parte de mi aplicación, la imágen de avatar no es renderizada. No se si me expliqué bien, pero adjunto esta imagen animada para explicar lo que me sucede.

introducir la descripción de la imagen aquí

¿Cómo puedo hacer para que mi imágen de avatar la cual la estoy renderizando en un form base que heredan todos los demas templates, persista en cualquier parte de mi aplicación?

¿Qué puede estar sucediendo? Sin duda debe haber algun detalle que estoy pasando por alto, tal vez en mi forms.py o en mi vista. Me inclino por esta última

2 respuestas 2

1

eso sucede porque el otras vistas no pasas la informacion del usuario, ya he pasado por eso y lo que hago es un mixin donde en el get_context_data le paso la información del perfil

class UserInformationMixin(object):

    def get_context_data(self, **kwargs):
        context = super(UserInformationMixin, self).get_context_data(**kwargs)
        user = User.object.get(username=self.request.user.username)
        return context

en en el template layout.html muestras la informacion del usuario

{{ user.username }}

actualizado para mostrar el avatar si el usuario esta autenticado sería mas o menos así:

{% if user.is_authenticated %}
    <img src={{ user.avatar.url }}>
{% else %}
    <img src='avatar_default.jpg'>
{% endif %}

o algo por el estilo

4
  • 1
    @bgarcial el problema es que esa informacion solo se va a mostrar cuando llames a la vista AccountSettingsUpdateView pero en las demas vistas no se muestra simplemente porque el contexto no es mandado por el servidor, la mejor manera para ahorarse codigo es hacer una clase mixin y que las demas hereden de ella. Saludos el 14 jun. 2017 a las 5:45
  • Claro, entiendo, pondría toda mi lógica de get_users_profiles en una sola clase y la heredo en todas mis vistas. Pensaré en como tener el valor del campo avatar ... Sería en esa misma consulta que haces user = User.object.get(username=self.request.user.avatar) ... mas o menos ...
    – bgarcial
    el 14 jun. 2017 a las 5:55
  • en todas las vistas cuyo template herede de layout.html debería heredar de la clase mixin que crees y no tendrías que tocar mas nada, solo la herencia de dichas vistas el 14 jun. 2017 a las 6:00
  • @bgarcial mira la actualización de la respuesta para que veas el 14 jun. 2017 a las 6:04
1

Seguramente no es lo que buscas.

Pero en mi caso se resolvió con un base64, existen librerias que toman tu imagen y la convierten a base64 con javascript asi cuando llega tu imagen, lo que llega es un string enorme codificado en base64.

    image_base64 = form.cleanded_data['image_base64']
    image = image_base64.decode('base64')
    bucket = s3.Bucket('mybucket')
    nombreimagen = 'miimagen'
    metadata = {'Content-Type': 'image/jpeg'}
    bucket.put_object(Key="{0}.jpg".format(nombreimagen), Body=image, Metadata=metadata)

Y listo eso guardara la imagen en el bucket. PERO como ves se necesita que este en base64. Si deseas mandar directamente el file, deberas codificar lo que te envía django. Para ello existen librerias como pillow (AKA PIL). Lo cual considero más complejo. Por que como menciono existen muchas liberias javascript que te generan la cadena en base64 que ademas te serviria como preview para el usuario vea la imagen que se va a subir.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.