Home / Questions / 233867
Accepted
albertolg89
Asked: 2020-01-31 07:11:48 +0800 CST 2020-01-31 07:11:48 +0800 CST

Problem updating a photo using javascript and laravel

  • 772

I am trying to upload a photo and store it in a specific path. When in the controller function it is going to validate if in a hasFile type field it does if ($request->hasFile($request->input('avatar'))) not take the field as a file type and it does not save the uploaded photo in the specified path

This is the code I have implemented:

In blades:

<form id="example-form" method="post" enctype="multipart/form-data">
                                <span class="profile-picture">
                                    <input type="file" id="pic" name="avatar"/>
                                </span>

                                <div class="space-4"></div>
                                    <a onclick="change_imagen_avatar(12)" class="btn btn-sm btn-block btn-info">
                                        <span class="bigger-110">Aceptar</span>
                                    </a>
                                <div class="space-4"></div>
                                    <a id="cancelar_foto" class="btn btn-sm btn-block btn-grey">
                                        <span class="bigger-110">Cancelar</span>
                                    </a>
                            </form>

JavaScript:

function change_imagen_avatar(id){

            $.ajax({
                type: 'POST',
                url: '{{ route('regMiembros.change_imagen_avatar') }}',
                data: {
                    avatar: $('#id-input-file-3').val(),
                    miembro: id,

                },

                success: function (data) {

                    alert('Hola');
                    //$(location).attr('href', "{{ route('regMiembros.show', [$regMiembro->id]) }}");

                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $.smkAlert({
                        text: jqXHR.responseText,
                        type: 'danger'
                    });

                }
            });
        }

In Controller:

public function change_imagen_avatar(Request $request){

        $input = $request->all();

        $personas = Personas::find($input['miembro']);

        if ($request->hasFile($request->input('avatar'))) {
            $avatar = $request->file('avatar');
            $filename = $personas->nom_apellido . '.png';
            Image::make($avatar)->save(public_path('/uploads/hermanos/' . $filename));

            $input['avatar'] = $filename;
        }

        $personas->avatar = $input['avatar'];
        $personas->save();
    }
javascript

2 Answers

  1. your error is how you send the image to the server, it must be through formData .

    you must also add the csrf_token either in your form or in your meta in this example we will use the meta added in the head of the document! in case your js is external:

    <input type="hidden" name="_token" value="{{ csrf_token() }}">
<meta name="csrf-token" content="{{ csrf_token() }}">

    or add it to the ajax request as a header:

      function change_imagen_avatar(id){
            let _CSRF = { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') };
            var formData = new FormData();
            formData.append('miembro', id);
            formData.append('avatar', $('input[type=file]')[0].files[0]);

            $.ajax({
                type: 'POST',
                contentType: false,
                processData: false,
                headers: _CSRF,
                url: '{{ route('regMiembros.change_imagen_avatar') }}',
                data: formData,

                success: function (data) {

                    alert('Hola');
                    //$(location).attr('href', "{{ route('regMiembros.show', [$regMiembro->id]) }}");

                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $.smkAlert({
                        text: jqXHR.responseText,
                        type: 'danger'
                    });

                }
            });
        }
    • 1
  2. Best Answer

    HTML code

    <div class="row">
    <div class="col-xs-12">
        <!-- PAGE CONTENT BEGINS -->

        <div>
            <div id="user-profile-1" class="user-profile row">
                <div class="col-xs-12 col-sm-3 center">
                    <div>

                        <span id="imagen">
                            <ul class="ace-thumbnails profile-picture clearfix">
                                <li>
                                    <a href="{{ asset('uploads/hermanos/'.$regMiembro->persona->avatar) }}"
                                       title="Miembro del Cuadro" data-rel="colorbox">
                                        <img width="200" height="200" alt="180x180"
                                             src="{{ asset('uploads/hermanos/'.$regMiembro->persona->avatar) }}"/>
                                    </a>
                                </li>
                            </ul>
                        </span>

                        <span id="imagen_oculta" style="display: none">


                            <form id="example-form" method="post" enctype="multipart/form-data">
                                <span class="profile-picture">
                                    <input type="file" id="pic" name="avatar"/>
                                </span>

                                <div class="space-4"></div>
                                    <a onclick="change_imagen_avatar({{$regMiembro->persona->id}})" class="btn btn-sm btn-block btn-info">
                                        <span class="bigger-110">Aceptar</span>
                                    </a>
                                <div class="space-4"></div>
                                    <a id="cancelar_foto" class="btn btn-sm btn-block btn-grey">
                                        <span class="bigger-110">Cancelar</span>
                                    </a>
                            </form>
                        </span>

                        <div class="space-4"></div>

                        <div class="space-4"></div>
                        <div class="clearfix" id="cambiar">
                            <a id="cambiar_foto" class="btn btn-sm btn-block btn-success">
                                <i class="ace-icon fa fa-picture-o bigger-120"></i>
                                <span class="bigger-110">Cambiar Foto</span>
                            </a>
                        </div>
                    </div>

                    <div class="space-6"></div>
                </div>

                <div class="col-xs-12 col-sm-9">

                    <!-- PAGE CONTENT ENDS -->


                </div>
            </div>
        </div>
        <!-- PAGE CONTENT ENDS -->
    </div><!-- /.col -->
</div><!-- /.row -->

    There are several things to improve: In order controllerto verify if the file is present, you have to do it as follows:

    if ($request->hasFile('Nombre del file')) {
    //
}

    In the Client:

    function change_imagen_avatar(id){
        let data = new FormData();
        data.append('avatar', $('#id-input-file-3')[0].files[0]);
        data.append('miembro', id);
        $.ajax({
            method: 'POST',
            cache: false,
            contentType: false,
            processData: false,
            url: '{{ route('regMiembros.change_imagen_avatar') }}',
            data: data,

            success: function (data) {

                alert('Hola');
                //$(location).attr('href', "{{ route('regMiembros.show', [$regMiembro->id]) }}");

            },
            error: function (jqXHR, textStatus, errorThrown) {
                $.smkAlert({
                    text: jqXHR.responseText,
                    type: 'danger'
                });

            }
        });
    }
    • 1