Edit image Ajax


I'm getting into laravel and I had a problem when trying to edit some images. When creating or registering a product with its respective image there is no problem as I do not use ajax. but at the time of editing I can not access the data generated by the image selector

1: result in console: link

  • Because of this I can not change to a unique name, copy the image etc etc

2: ajax code:

        var id = $("#id").val();
        var name = $("#name").val();
        var unit_cost = $("#unit_cost").val();
        var image= $("#image").prop('files')[0];
        var route = "{{url('admin/products/')}}/"+id+"";
        var token = $("#token").val();
        url: route,
        headers: {'X-CSRF-TOKEN': token},
        type: 'PUT',
        dataType: 'json',
        processData: false,
        data: { '_token': '{{ csrf_token() }}',name:name,unit_cost:unit_cost,image:image},
        success: function(data){
         if (data.success == 'true')

            window.location = '{{ route('products.index')}}' ;*/

            if (data.status == 422) {


3: controller: link

public function update (Request $ request, $ id { $ product = Product :: FindOrFail ($ id); $ nameFile = $ request- > file ('image');

return response () - & jt; json (['success' = > 'true', 'data' = > $ nameFile]) }

4: html - > button that calls the modal

                    <span data-toggle="modal" data-target="#modal-EProduct">
                    <a class="btn btn-warning btn-xs" onclick='Mostrar({{$product->id}});' id="#modal-EProduct{{ $product->id }}" data-original-title="Editar"  data-target='#modal-EProduct' data-toggle="tooltip">
                        <i class="fas fa-wrench"></i>

--- Modal

              {!! Form :: open (['id' = > 'form', 'autocomplete' = > 'off']) !!}                           ×           Editanto Product                  

      <input type="hidden" name="_token" value="{{ csrf_token() }}" id="token">
      <input type="hidden" id="id">
      <div class="form-group">
          <div class="row">
            <div class="col-xs-6">
              {!! Form::label('name','Nombre del Producto') !!}
            {!! Form::text(
              'placeholder' =>'Nombre del Producto',
              'required']) !!}
            <div class="col-xs-6">
            {!! Form::label('unit_cost','Precio Unitario') !!}
            {!! Form::text(
              'placeholder' =>'Precio Unitario',
              'required','onkeypress'=>"return valida(event)"]) !!}

      <div class="form-group">
          {!! Form::label('image','Imagen') !!}
          <img id="url" src="" class="img-responsive" alt="Image" height="15%" width="15%">
          {!! Form::file(
          ) !!}

       {!! Form::close() !!}
    <div class="modal-footer">
      <div class="form-group">
      <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      {!!link_to('#', $title='Actualizar2', $attributes = ['id'=>'actualizar2', 'class'=>'btn btn-primary'])!!}

when using the modal to edit the image I find it complicated and I have not found a help googling I hope your help. oh some advice or example of how I can edit data using a modal, avoiding creating a modal for each record (this is what I avoid when using ajax). beforehand thank you

asked by Luis Aguilar 22.09.2018 в 07:49

1 answer

    $('#modal-EProduct').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) 
    var name = button.data('name') 
    var unit_cost =button.data('unit_cost')  
    var product_id =button.data('productid')  
    var url =button.data('url')  
    var modal = $(this)
    modal.find('.modal-body #name').val(name);
    modal.find('.modal-body #unit_cost').val(unit_cost);
    modal.find('.modal-body #url').attr("src","/images/products/"+url);
    modal.find('.modal-body #product_id').val(product_id);

Solve this way, anyway I would still like to know how to perform with ajax

answered by 22.09.2018 в 10:45