3

he estado buscando soluciones por muchas partes y he tenido he llegado a la conclusión de postear la pregunta acá. Estoy realizando una web donde contiene un perfil de usuario, dentro de el tengo un form para cambiar cierto tipo de información personal más una foto de perfil. La foto de perfil la añadí hace un par de días, la información se guardaba sin problemas, pero ahora me esta sucediendo una serie de errores con la subida de imagen.

Modelo:

class Usuario(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)
    ap_materno = models.CharField(max_length=45)
    fecha_nacimiento = models.DateField()
    fono_fijo = models.BigIntegerField(blank=True, null=True)
    fono_movil = models.BigIntegerField(blank=True, null=True)
    direccion = models.CharField(max_length=45, blank=True, null=True)
    ruta_foto = models.ImageField(upload_to='foto_perfil', blank=True)
    actualizado_el = models.DateField(blank=True, null=True)
    perfil_usuario_id = models.BigIntegerField()
    genero_id = models.BigIntegerField()
    comuna_id = models.BigIntegerField()
    estado_civil_id = models.BigIntegerField(blank=True, null=True)

    class Meta:
        db_table = 'usuario'

    def __str__(self):
        return self.user.username

Form:

from django import forms
from generales.models import Usuario
from django.forms import FileInput

class UserProfileForm(forms.ModelForm):
    class Meta:
        model = Usuario
        fields = ('ap_materno','fecha_nacimiento','fono_fijo','fono_movil','direccion','genero_id','comuna_id')

class formFoto(forms.ModelForm):
    class Meta:
        model = Usuario
        fields = ['ruta_foto',]
        widgets = {
            'ruta_foto': FileInput(attrs={'id':'algo', 'name':'ruta_foto'}), #agrego atributos al field de foto
        }
        labels = {
            'ruta_foto': (''), # deja el label vacio
        }

Vista:

from django.shortcuts import render
from django.http import HttpResponse, JsonResponse

from django.contrib.auth.mixins import LoginRequiredMixin

from django.views import generic
from generales.models import Region, Comuna, Genero, Usuario, User, DocumentoCliente
from django.core import serializers

from django.db import connection
import cx_Oracle
from django.template import loader


from .forms import formFoto
from datetime import datetime
from django.utils.datastructures import MultiValueDictKeyError
# Create your views here.
### Generando template views de las páginas
class Perfil(LoginRequiredMixin, generic.TemplateView):
    template_name = 'perfil/perfil.html'
    login_url = 'generales:iniciar_sesion'

    def get_context_data(self, **kwargs): # en esta definicion se agrega un contexto al templateview, permitiendo asi poder modificar el contexto que retorna la clase creada
        context = super(Perfil, self).get_context_data(**kwargs) # le indica que de la vista misma modifique el contexto
        context['form'] = formFoto() #crea un contexto llamado form la cual contiene los fields del formulario formFoto
        return context # retorna el contexto hacia la clase anterior y lo lleva a la pagina

def getDataPerfil(request):
    if request.method == 'GET':

        user = User.objects.get(username=request.user.username)
        ## CONEXION ##
        d_cursor = connection.cursor() # se crea la variable d_cursor y le pasa como valor la conexión a la base de datos para que pueda realizar QUERYS
        cursor = d_cursor.connection.cursor() # crea la variable cursor donde le indico el valor de la conexion más la propiedad .connection.cursor()
        out_args = cursor.var(cx_Oracle.CURSOR) # se crea la variable out_args que le paso como valor el TIPO DE DATO cursor, es decir, cursor es un arrayList[]
        result = cursor.callproc("sp_usuario", [str(user),out_args])[1] # en la variable result le pasamos el valor de cursor donde le agregamos la propiedad callproc() para llamar a un procedimiento almacenado de la BD  \
        # Además, dentro del paréntesis van estos parámetros ("NOMBRE DEL PROCEDURE", [LOS PARAMETROS IN, OUT])[I] // DONDE [I] ES UN INDICE O INDEX
        l_usuarios = [] # VARIABLE TIPO LISTA
        for line in result: # INICIAR UN FOR
            l_usuarios = {
            "segundo_apellido":line[0],
            "genero":line[1],
            "fecha_nacimiento":line[2],
            "fono_fijo":line[3],
            "fono_movil":line[4],
            "region":line[5],
            "comuna":line[6],
            "direccion":line[7]
            }
            pass
        ####Cursor documentos####
        docu_cursor = connection.cursor()
        cursor_docu = docu_cursor.connection.cursor()
        args_docu = cursor_docu.var(cx_Oracle.CURSOR)
        documentos = cursor_docu.callproc("sp_documentos", [str(user),args_docu])[1]
        l_documentos = []
        for d in documentos:
            l_documentos.append({"ruta":d[0], "documento":d[1]})
            pass
        ####Info region####
        regionList = Region.objects.all()
        regiones = []
        for r in regionList:
            regiones.append({"id": r.id, "titulo": r.titulo})
            pass
        ####Info comunas####
        comunaList = Comuna.objects.all()
        comunas = []
        for c in comunaList:
            comunas.append({"id": c.id, "titulo": c.titulo, "id_region": c.region_id})
            pass
        ####Info genero####
        generoList = Genero.objects.all()
        generos = []
        for g in generoList:
            generos.append({"id": g.id, "titulo": g.titulo})
            pass
        ####JSON####
        lista = []
        lista = ({"regiones":regiones,"comunas": comunas, "generos": generos, "l_usuarios": l_usuarios, "l_documentos": l_documentos})
        return JsonResponse(lista, safe=False)

def postPersonal(request):
    if request.method == 'POST':

        form = formFoto(request.POST, request.FILES)

        if form.is_valid():

            newfile = Usuario(file = request.FILES['ruta_foto'])
            Usuario.objects.filter(pk=1).update(ruta_foto=newfile)

        ## variables ##
        genero = request.POST.get('genero')
        fonoMovil = request.POST.get('numMovil')
        fonoFijo = request.POST.get('numFijo')
        comuna = request.POST.get('comuna')
        direccion = request.POST.get('direccion')
        actualizado = datetime.now()
        ## id del usuario ##
        current_user = request.user
        ## conexion a procedure ##
        personal_cursor = connection.cursor()
        cursor_personal = personal_cursor.connection.cursor()
        cursor_personal.callproc("sp_personal", (int(current_user.id),int(genero),int(fonoMovil),int(fonoFijo),int(comuna),str(direccion),actualizado))
        ## respuesta a ajax ##
        if request.is_ajax():
            data = {
                'message':'form is saved'
            }
            return JsonResponse(data)

def postCorreo(request):
    if request.method == 'POST':
        ## variables ##
        correo = request.POST.get('correo')
        actualizado = datetime.now()
        ## id del usuario ##
        current_user = request.user
        ## conexion a procedure ##
        correo_cursor = connection.cursor()
        cursor_correo = correo_cursor.connection.cursor()
        cursor_correo.callproc("sp_correo", (int(current_user.id),str(correo),actualizado))
        ## respuesta a ajax ##
        if request.is_ajax():
            data = {
                'message':'form is saved'
            }
            return JsonResponse(data)

def postFoto(request):
    if request.method == 'POST':
        foto = formFoto(request.POST, request.FILES)
        print(foto)

Urls.py:

path('',Perfil.as_view(), name='perfil'),

#métodos get
path('getDataPerfil/', getDataPerfil, name='getDataPerfil'),

#métodos post
path('postPersonal/', postPersonal, name='postPersonal'),
path('postCorreo/', postCorreo, name='postCorreo'),
path('postFoto/', postFoto, name='postFoto'),

HTML:

<form class="form" action="" method="post" enctype="multipart/form-data" data-url="postPersonal/" id="infoPersonalForm">
                                        {% csrf_token %}
                                        <div class="row">
                                            <div class="col-sm-3 col-md-2 col-5">
                                                <label style="font-weight:bold;">Foto perfil</label>
                                            </div>
                                            <div class="col-md-8 col-6">
                                                {{form.ruta_foto}}
                                            </div>
                                        </div>
                                        <hr />
                                        <div class="row">
                                            <div class="col-sm-3 col-md-2 col-5">
                                                <label style="font-weight:bold;">Género</label>
                                            </div>
                                            <div class="col-md-8 col-6">
                                                <div class="form-control" name="genero" id="genero"></div>
                                            </div>
                                        </div>
                                        <hr />
                                        <div class="row">
                                            <div class="col-sm-3 col-md-2 col-5">
                                                <label style="font-weight:bold;">Número móvil</label>
                                            </div>
                                            <div class="col-md-8 col-6">
                                                <input type="text" class="form-control" name="numMovil"
                                                    id="numMovil" value="{{user.usuario.fono_movil}}" max="99999999"
                                                    maxlength="8">
                                            </div>
                                        </div>
                                        <hr />
                                        <div class="row">
                                            <div class="col-sm-3 col-md-2 col-5">
                                                <label style="font-weight:bold;">Número fijo</label>
                                            </div>
                                            <div class="col-md-8 col-6">
                                                <input type="numFijo" class="form-control" name="numFijo"
                                                    id="numFijo" value="{{user.usuario.fono_fijo}}" max="9999999"
                                                    maxlength="7">
                                            </div>
                                        </div>
                                        <hr />
                                        <div class="row">
                                            <div class="col-sm-3 col-md-2 col-5">
                                                <label style="font-weight:bold;">Región</label>
                                            </div>
                                            <div class="col-md-8 col-6">
                                                <div class="form-control" name="region" id="region"></div>
                                            </div>
                                        </div>
                                        <hr />
                                        <div class="row">
                                            <div class="col-sm-3 col-md-2 col-5">
                                                <label style="font-weight:bold;">Comuna</label>
                                            </div>
                                            <div class="col-md-8 col-6">
                                                <div class="form-control" name="comuna" id="comuna"></div>
                                            </div>
                                        </div>
                                        <hr />
                                        <div class="row">
                                            <div class="col-sm-3 col-md-2 col-5">
                                                <label style="font-weight:bold;">Dirección</label>
                                            </div>
                                            <div class="col-md-8 col-6">
                                                <input type="text" class="form-control" name="direccion"
                                                    id="direccion" value="{{user.usuario.direccion}}">
                                            </div>
                                        </div>
                                        <hr />
                                        <div id="carga-personal" style="display:none;">
                                            <!-- div para cargar un loader -->
                                            <div class="form-group d-flex">
                                              <img src="{% static 'base/images/load_contacto.gif' %}">
                                              <p> Guardando...</p>
                                            </div>

                                          </div>
                                          <div id="mensaje_personal" style="display:none;">
                                          </div>
                                        <input type="submit" class="btn btn-primary py-3 px-5"
                                            onclick="validarPersonal()" value="Guardar" id="guardarPersonal">
                                        <button class="btn btn-lg" type="reset"><i
                                                class="glyphicon glyphicon-repeat"></i>
                                            Reiniciar</button>

Cuando empieza el método de la vista después de validar si el request es POST realicé el los pasos del FILES

Error:

Internal Server Error: /perfil/postPersonal/
Traceback (most recent call last):
  File "C:\Users\XX\miniconda3\lib\site-packages\django\utils\datastructures.py", line 76, in __getitem__
    list_ = super().__getitem__(key)
KeyError: 'ruta_foto'

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "C:\Users\XX\miniconda3\lib\site-packages\django\core\handlers\exception.py", line 34, in inner
    response = get_response(request)
  File "C:\Users\XX\miniconda3\lib\site-packages\django\core\handlers\base.py", line 115, in _get_response
    response = self.process_exception_by_middleware(e, request)
  File "C:\Users\XX\miniconda3\lib\site-packages\django\core\handlers\base.py", line 113, in _get_response
    response = wrapped_callback(request, *callback_args, **callback_kwargs)
  File "C:\Users\XX\Desktop\lindasonrisa proyecto\proyecto\lindasonrisa\perfil\views.py", line 90, in postPersonal
    newfile = Usuario(file = request.FILES['ruta_foto'])
  File "C:\Users\XX\miniconda3\lib\site-packages\django\utils\datastructures.py", line 78, in __getitem__
    raise MultiValueDictKeyError(key)
django.utils.datastructures.MultiValueDictKeyError: 'ruta_foto'

Actualización

Gracias a este vídeo pude solucionar este problema: https://www.youtube.com/watch?v=VUP_cyjD32s&list=PLxm9hnvxnn-j5ZDOgQS63UIBxQytPdCG7&index=44&t=541s

PD: Sugiero seguir este canal ya que explica muy bien y es expedito, se nota que sabe del tema.

8
  • Adjunta todo el código del form formFoto, y todo el código de la vista postPersonal, para así ayudarte. Commented el 27 may. 2020 a las 16:27
  • @JulioCesar , hola, te compartí todo el código que pude
    – Javier
    Commented el 27 may. 2020 a las 16:32
  • Javier, imprime en la vista postPersonal, el request.FILES, así: print(request.FILES) y dime que es lo que imprimio. Commented el 27 may. 2020 a las 16:58
  • Imprime esto: <MultiValueDict: {}>
    – Javier
    Commented el 27 may. 2020 a las 17:02
  • No estas cargando ningún archivo, por eso el error. Estas seguro que estas haciendo la petición POST correctamente? La petición la haces por AJAX? Commented el 27 may. 2020 a las 17:07

1 respuesta 1

3

El problema es que estas enviando los datos con $('form').serialize(); en este caso solo tomara los componentes de tipo input select, etc pero jamas trabajara con tipo file para eso debes trabajar con FormData.

Ejemplo seria asi: var parameters = new FormData(this); // this seria tu formulario

$.ajax({
    url: window.location.pathname,
    type: 'POST',
    data: parameters, 
    dataType: 'json',
    processData: false,
    contentType: false,
}).done(function (data) {
    // se efectuo bien
}).fail(function (jqXHR, textStatus, errorThrown) {
    alert(textStatus + ': ' + errorThrown);
}).always(function (data) {

});

No te olvides que en tu ajax debes poner: processData: false, contentType: false

Para que te permita enviar este tipo de datos. Con eso ahora si tu vista recibirá la imagen.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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