2

Holaa, tengo una función para cambiar la foto de perfil y al ejecutar en localhost en el navegador me esta saliendo este error en la consola POST jquery 404 (no encontrado): jquery.min.js:4. Alguien tiene una idea de como solucionarlo? Estuve viendo las rutas, pero no me resulto, sigue sin funcionar y no se como solucionarlo. Cualquier ayudita me vendría bien.

mi archivo .blade

<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Croppie css -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.css">
<!-- Font Awesome 5 -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

        <div class="card-body">
            <h5 class="card-title">Actualizar perfil</h5>
            <div class="profile-img p-3">
                <img src="{{ asset('/images/icon-cam.png') }}" id="profile-pic">
            </div>
            <div class="btn btn-dark">
                <input type="file" class="file-upload" id="file-upload" 
                name="profile_picture" accept="image/*">
                Seleccionar nueva foto
            </div>
        </div>
<div class="modal" id="myModal">
        <div class="modal-content">                
            <div class="modal-body">
                <button class="btn btn-block btn-dark" id="upload" >Continuar</button>
            </div>
        </div>
</div>

<!--  jQuery and Popper.js  -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!-- Boostrap 4 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Croppie js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.min.js"></script>
{{-- archivo js --}}
<script src="{{ asset ('photo/js.js') }}"></script>

Este es mi controlador

public function showJqueryImageUpload() 
{
    return view('demos.jqueryimageupload');
}

public function saveJqueryImageUpload(Request $request)
{
    $validator = Validator::make($request->all(), [
        'profile_picture' => 'required|image|max:1000',
    ]);

    if ($validator->fails()) {

        return $validator->errors();            
    }

    $status = "";


    if ($request->hasFile('profile_picture')) {
        $image = $request->file('profile_picture');
        $filename = time().'.'.$image->guessExtension();

        $path = $request->file('profile_picture')->storeAs(
             'profile_picture', $filename
        );

        $status = "uploaded";            
    }

    return response($status,200);
}

y este mi archivo js con la funcion

$("#upload").on("click", function() {
    croppie.result('base64').then(function(base64) {
        $("#myModal").modal("hide"); 
        $("#profile-pic").attr("src","/images/ajax-loader.gif");

        var url = "{{url('demos/jquery-image-upload')}}";
        var formData = new FormData();
        formData.append("profile_picture", $.base64ImageToBlob(base64));

        $.ajaxSetup({
            headers: {  
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            type: 'post',
            url: url,
            data: formData,
            processData: false,
            contentType: false,
            success: function(data) {
                if (data == "uploaded") {
                    $("#profile-pic").attr("src", base64); 
                } else {
                    $("#profile-pic").attr("src","/images/icon-cam.png"); 
                    console.log(data['profile_picture']);
                }
            },
            error: function(error) {
                console.log(error);
                $("#profile-pic").attr("src","/images/icon-cam.png"); 
            }
        });
    });
});

Routes:

Route::get('demos/jquery-image-upload','DemoController@showJqueryImageUpload');
Route::post('demos/jquery-image-upload','DemoController@saveJqueryImageUpload');

introducir la descripción de la imagen aquí ..................................................................

4
  • 1
    ¿Puedes colocar tu archivo routes?, porfavor Commented el 19 nov. 2019 a las 5:56
  • Es necesario que muestres tu archivo de rutas. Commented el 19 nov. 2019 a las 18:32
  • El archivo routes es un archivo php que se localiza en la dirección routes/web.php que nos servirá para distinguir hacia a donde dirige la ruta demos/jquery-image-upload Commented el 19 nov. 2019 a las 18:56
  • ok, lo agregue abajo Commented el 19 nov. 2019 a las 19:07

2 respuestas 2

2

Tu error está en que estás usando un helper de laravel en el lugar equivocado, verás, todo lo que esté dentro de {{ }} es código que se ejecuta del lado del servidor, por lo tanto, un archivo .js se ejecuta del lado del cliente, entonces, tu variable url tendrá como valor la cadena de texto: {{url('demos/jquery-image-upload')}} literalmente. Para poder usar la ruta tendrías que declararla en el archivo blade.php como lo siguiente:

<script type="text/javascript">
   var url = "{{ url('demos/jquery-image-upload') }}";
</script>

{{-- archivo js --}}
<script src="{{ asset ('photo/js.js') }}"></script>

No olvides eliminar la parte de asignación de valor en el archivo js una vez que la agregues en el archivo blade.

No es muy buena práctica tener variables globales, pero es un ejemplo de como debes de incrustar el valor en el archivo blade. También te recomendaría fuertemente asignarle alias a tus rutas con el método name:

Route::get('demos/jquery-image-upload','DemoController@showJqueryImageUpload')->name('image.upload.get');

Route::post('demos/jquery-image-upload','DemoController@saveJqueryImageUpload')->name('image.upload.post');

Y cuando requieras de alguna puedes usar el helper route() en vez del helper url(), ya que así evitas cambiar código en tus vistas si tu url necesita cambiar:

var url = "{{ route('image.upload.post') }}";
9
  • Muchas gracias por tu ayuda. Otra consulta, ¿cuál seria la forma correcta de declarar la variable global en mi .blade? estuve probando y no me toma luego en mi archivo js Commented el 20 nov. 2019 a las 2:29
  • Lo agregué en un script, pero ahora me da error 500 (Internal Server Error) en la consola del navegador Commented el 20 nov. 2019 a las 2:39
  • @PriscilaDuarte Olvidé poner la variable url entre etiquetas <script></script> no sé si tu si lo pusiste correctamente. Ya lo corregí Commented el 20 nov. 2019 a las 5:38
  • @PriscilaDuarte Con respecto al error 500, ¿en tu html si está la etiqueta meta que contiene el token?, es decir, la siguiente: <meta name="csrf-token" content="{{ csrf_token() }}">. Commented el 20 nov. 2019 a las 5:40
  • si, coloque el url en las etiquetas script, y si, también tengo agregado la etiqueta con el token, pero igual me sale el error 500 :c Commented el 20 nov. 2019 a las 5:42
1

Ya solucione el problema, ahora funciona correctamente sin devolver el error 500 (Internal Server Error) en la consola del navegador. Lo que hice fue cambiar la funcion saveJqueryImageUpload en mi controlador.

public function saveJqueryImageUpload(Request $request)
{
    $status = "";

    $this->validate($request, [
        'profile_picture' => 'required|image:png,jpeg,jpg'
    ]);

    if($request->hasfile('profile_picture'))
    {
        $image = $request->file('profile_picture');
        $ext = $image->guessExtension();
        $filename = time().'.'.$ext;

        $path = $request->file('profile_picture')->storeAs(
            'profile_pictures', $filename
        );

        $status = "uploaded"; 
    }        

    return response($status,200);
}

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.