1

Cordial saludo compañeros, tengo el siguiente problema, estoy desarrollando una aplicacion en la cual se pueden subir imagenes y para ello uso el plugin dropzone js, mi problema es que al subir la imagen me sale el siguiente error:

introducir la descripción de la imagen aquí

Estoy instanciando dropzone en un div.

adjunto el codigo de la vista:

@extends('layouts.layout')

<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.css">



@section('contenido')

<div>

<p>Album: {{ $foto->id }}</p>

</div>
<form action="{{ route('fotos') }}" method="POST" enctype="multipart/form-data">

        {{ csrf_field() }}  

<div class="form-group">


//div que utilizo para el dropzone
<div class="dropzone">



</div>

<div class="form-group">

        <button type="submit" class="btn btn-primary">Cargar</button>

    </div>
</form>
</div>

@stop

Codigo donde inicializo dropzone:

@push('scripts')

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.js"></script>






<script >




var myDropzone = new Dropzone('.dropzone', {

// Ruta especificada
url: '/fotos',

// con esta sentencia le decimos a dropzone que solo acepte archivos de imagen y con el * le decimos que acepte imagenes con cualquier extension
acceptedFiles: 'image/*',

// con esta sentencia le definimos a dropzone la restriccion de tamaño del archivo a subir en Mega Bytes
maxFilesize: 2,

// con esta sentencia restringimos la cantidad de archivos que se pueden subir
// maxFiles: 1,

paramName: 'photo',



headers: {

    // verificacion del token
    'X-CSRF-TOKEN': '{{ csrf_token() }}'

},

// esta sentencia cambia el mensaje por defecto que aparece en la caja de dropzone
dictDefaultMessage : 'Arrastra las imagenes aqui para subirlas'

});

myDropzone.on('error', function(file , res){

console.log(res);

});

// con esta sentencia le decimos a dropzone que no se active automaticamente, solo cuando le demos clic
Dropzone.autoDiscover = false;

</script>


@endpush

Codigo de la ruta establecida para el formulario :

Route::get('fotos','FotoController@upload')->name('fotos');

Funcion upload del FotoController:

 public function upload(Request $request)
    {

        $file = $request->file('photo');
        $fileUrl = $file->store('public');

        return 'imagen guardada';



    }

Alguna idea de que puede estar mal?

1 respuesta 1

0

Al parecer solo es problema de rutas.

Cuando se utiliza rutas de laravel en script no es recomendable escribir solo la ruta, tendrias que utilizar siempre(es lo que recomiendo) una funcion de rutas, las cuales pueden ser url(),route() y hasta para importar documentos es recomendable utilizar funciones como: public_path(), Storage::get() o asset().

Entonces al parecer tu problema radica en la inizalizacion de tu dropzone especificamente en la ruta o url:

url: '/fotos',//esta linea estaria mal, lo digo sin probarlo solo por experiencia

Tendria que estar de la siguiente manera:

url: '{{url("fotos")}}',

Ó en todo cado como tienes definido el ->name('fotos') en tu ruta tambien puedes llamarlo con route.

url: '{{route("fotos")}}',

Otro error parece ser la respuesta, muchas librerias se adaptan a una comunicacion standar de respuestas, asi que es hora de empezar a acostumbrase a enviar respuesta con codigos como el success y el error.

En tu caso sera algo como esto:

public function upload(Request $request)
{

    $file = $request->file('photo');
    $fileUrl = $file->store('public');
    // algunas cosas mas para saber si se subio correctamente y luego...
    if( $si_se_subio_correctamete ) {
        return Response::json('success', 200);
    } else {
        return Response::json('error', 400);
    }

}

Otro problema es la confusion en el tipo de ruta, en tus rutas en get y en tu formulario esta post.

Para subir de forma correcta tu imagen te recomiendo el siguiente codigo:

    $file = Input::file('photo');//foto es tu variable de formulario

    $extension = File::extension($file['name']);
    $directory = path('public').'uploads/'.sha1(time());
    $filename = sha1(time().time()).".{$extension}";

    $upload_success = Input::upload('file', $directory, $filename);

    if( $upload_success ) {
        return Response::json('success', 200);
    } else {
        return Response::json('error', 400);
    }

Espero que es te ayude.

4
  • Gracias de antemano por tu ayuda, agregue los cambios y aun asi me sigue apareciendo el mismo error. Commented el 23 may. 2018 a las 13:27
  • @KevinBurbano, ahora lo veo mejor, es tu ruta que esta en get y tu formulario es de tipo post, eh ahi otro horror perdon error, razon por la cual no encuentra la ruta especificada
    – Shassain
    Commented el 23 may. 2018 a las 13:31
  • Exacto me acabo de dar cuenta tambien, ya lo corregi y funciono tu solucion, ahora me tira es un problema al tratar de guardarla me dice Call to a member function store() on null. Commented el 23 may. 2018 a las 13:34
  • Las imagenes se guardan, en la carpeta pero en la pagina me muestra ese error. Commented el 23 may. 2018 a las 13:39

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.