0

Estoy montando un proyecto (en PHP - Laravel) y tengo diseñado un sistema para subir imágenes al servidor utilizando DropZone. El proceso de carga de la imagen es correcto, y cuando termina, asigno el valor al div escondido que tengo para poderlo capturar más tarde al guardar la información del usuario. Además, veo la imagen cargada en el cuadro. Sin embargo, no puedo eliminarla (la cruceta no funciona) y cuando me pongo encima, aparece un mensaje de error genérico.

En la consola, además, me aparece que la ruta es MethodNotAllowed, a pesar de que en la clase de enrutamiento está puesto correctamente.

Y este es el código de la vista:

<div class="row">
    <div class="col-12"> 
        <div class="m-portlet__body m-portlet--primary" data-portlet="true" m-portlet="true">
            {{ Html::ul($errors->all()) }}

            {{ Form::open(array('url' => '#', 'id'=>'form_alta_empresa', 'files' =>true,'enctype'=>'multipart/form-data')) }}

            <div class="form-group m-form__group row">
                <div class="col-12 ml-auto">
                    <h4 class="m-form__section">
                        {{Tr('Foto perfil')}}
                    </h4>
                </div>
            </div>

            <div class="form-group m-form__group row">
                <div class="col-md-12">
                    <label for="example-text-input"><b>Foto:</b></label>
                    <div class="m-dropzone dropzone dz-clickable" id="m-dropzone-foto" action="{{ route('configusuarios.fotoUpload') }}">
                        <div class="m-dropzone__msg dz-message needsclick">
                            <h3 class="m-dropzone__msg-title">Arrastra la imagen.</h3>
                        </div>
                    </div>
                    <input id="dropzone-foto" name="dropzone-foto" type="hidden" value="">
                </div>
            </div>

            {{ Form::close() }}
        </div>
    </div>
</div>

Y este el script que pone la imagen cargada:

<script type="text/javascript">
  $(function() {
    $("body").on('DOMSubtreeModified', "#m-dropzone-foto", function() {
      $("#dropzone-foto").val($("#m-dropzone-foto .dz-image > img").attr("src"));
    });
  })
</script>

Función "FotoUpload":

public function fotoUpload(Request $request)
{
    try {
        $image = $request->file('file');
        $name = $image->getClientOriginalName();

        try {
            $mime = $image->getMimeType();
        } catch (Exception $e) {
            Log::warning('FotoUpload - Mime not found');
            $mime = "image/jpeg";
        }
        Log::info('FotoUpload - Mime: ' . $mime);

        $data = file_get_contents($image);
        $data = base64_encode($data);

        if ($data) {
            Log::info('FotoUpload - 1');
            return "1";
        } else {
            Log::info('FotoUpload - 0');
            return "0";
        }
    } catch (Exception $e) {
        Log::error('FotoUpload: ' . $e->getMessage());
    }
}

Registro de la clase de enrutamiento:

Route::post('altausuarios/fotoUpload', ['uses' => 'usersController@fotoUpload', 'as' => 'configusuarios.fotoUpload']);

Y este, el resultante una vez la imagen está cargada en el control:

Error_Imagen

Y el error de la consola:

Error_Consola

También pongo la captura con el mensaje del log, pero tampoco aporta mucho...

Log

[2020-02-11 08:48:26] local.ERROR: Handler - Render - URL: http://nombredominio/altausuarios/fotoUpload - Referer: http://nombredominio/users/profile - Unknown error

A ver si alguien se ha encontrado con esta situación y me pudiera ayudar.

Saludos,

11
  • Revisa el log y dinos que devuelve. Sin más información es difícil saber que está pasando y añade también el código de del método implicado usersController@fotoUpload. A parte de eso y como recomendación los controladores y en general las clases, suelen nombrarse en PascalCase.
    – Xerif
    Commented el 8 feb. 2020 a las 12:22
  • Hola Xerif. Edito poniendo el código de la función. A ver si puedo revisar el log... Commented el 10 feb. 2020 a las 8:50
  • Al ver tu codigo noto que no tienes una etiqueta form con multipart/form-data o una input file con name file, y en tu codigo php quieres obtener un file, la verdad no sé de que forma estas utilizando la libreria, pero hasta donde veo no tienes nada de codigo funcional.
    – Shassain
    Commented el 10 feb. 2020 a las 13:04
  • Hola Shassain. Disculpa, he puesto el código entero de la vista para que veas el form Commented el 10 feb. 2020 a las 14:01
  • @Ferran cómo te indica el compañero debes decirle al formulario que admita archivos, revisa la documentación de LaravelCollective: laravelcollective.com/docs/6.0/html#opening-a-form simplemente añade 'files' => true dentro del array de open.
    – Xerif
    Commented el 10 feb. 2020 a las 14:34

1 respuesta 1

1
+50

Es posible que necesites poner el token de seguridad

<input type="hidden" name="_token" value="{{ csrf_token() }}">

Yo suelo usar Dropzone dentro de los tags de Formulario. Si no te funciona, puedes probar en añadir "_token" en los parámetros de la petición directamente.

4
  • Hola Gerard. Pero si te fijas, la llamada la hago directamente cuando hago el $("body").on('DOMSubtreeModified', "#m-dropzone-foto", function() , no tengo forma de asignar el token de ningún modo... Commented el 10 feb. 2020 a las 12:13
  • El usuario está utilizando LaravelCollective que ya añade el token automáticamente
    – Xerif
    Commented el 10 feb. 2020 a las 14:31
  • Correcto Gerard, era eso. Lo que he hecho ha sido utilizar la libreria Dropzone.js (descartar la de Laravel) y sobreescribir la llamada del Dropzone por un script de inicialización. Como veía que seguía sin funcionar, he añadido el token a la cabecera (el error se quejaba de TokenMismatch) y ya está, ya carga la imagen sin el error. Gracias! Commented el 11 feb. 2020 a las 10:02
  • Perfecto! Me había dejado descolocado el comentario anterior, este problema suele suceder. Para el tema de CORS, hay varios paquetes para Laravel para añadir excepciones. Si desarrollas APIs en algún momento llegarás a encontrarte con ese problema. Saludos
    – GerardMA
    Commented el 11 feb. 2020 a las 14:37

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.