title: How to update image with AJAX in Laravel
body: <p>I'm having problems updating a record with an image. I don't what I need to do. My image is stored in a public folder called 'img/products' </p>
  
  <p><strong><em>ProductController.php</em></strong></p>
  
  <p>This is my controller. It works well without modifying the image.</p>
  
  <pre class="lang-php prettyprint-override"><code>public function update(Request $request, $id)
      {
          $validator = Validator::make($request-&gt;input(), array(
              'name' =&gt; 'required',
              'category_id' =&gt; 'required',
              'description' =&gt; 'required',
              'price_neto' =&gt; 'required',
              'iva' =&gt; 'required',
              'price_total' =&gt; 'required',
              'image' =&gt; '',
          ));
  
          if ($validator-&gt;fails()) {
              return response()-&gt;json([
                  'error'    =&gt; true,
                  'messages' =&gt; $validator-&gt;errors(),
              ], 422);
          }
  
          $products = Product::find($id);
  
          $products-&gt;name = $request-&gt;input('name');
          $products-&gt;category_id = $request-&gt;input('category_id');
          $products-&gt;description = $request-&gt;input('description');
          $products-&gt;price_neto = $request-&gt;input('price_neto');
          $products-&gt;iva = $request-&gt;input('iva');
          $products-&gt;price_total = $request-&gt;input('price_total');
          $products-&gt;image = $request-&gt;input('image');
  
          $products-&gt;save();
  
          return response()-&gt;json([
              'error' =&gt; false,
              'products'  =&gt; $products,
          ], 200);
      }
  </code></pre>
  
  <p><strong><em>Product.js</em></strong></p>
  
  <p>All I know is that I have to use <code>var formData = new FormData ($ ("# frmAddProduct") [0]);</code> as in the store function. I can enter records with images but not edit them. My image is stored in a public folder called 'img/products'</p>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function() {
  
      $("#btn-edit").click(function() {
          $.ajaxSetup({
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
          });
          $.ajax({
              type: 'PUT',
              url: '/product/' + $("#frmEditProduct input[name=product_id]").val(),
              data: {
                  name: $("#frmEditProduct input[name=name]").val(),
                  category_id: $("#frmEditProduct select[name=category_id]").val(),
                  description: $("#frmEditProduct input[name=description]").val(),
                  price_neto: $("#frmEditProduct input[name=price_neto2]").val(),
                  iva: $("#frmEditProduct input[name=iva2]").val(),
                  price_total: $("#frmEditProduct input[name=price_total2]").val(),
                  image: $("#frmEditProduct input[name=image]").val(),
              },
              dataType: 'json',
              success: function(data) {
                  $('#frmEditProduct').trigger("reset");
                  $("#frmEditProduct .close").click();
                  window.location.reload();
              },
              error: function(data) {
                  var errors = $.parseJSON(data.responseText);
                  $('#edit-product-errors').html('');
                  $.each(errors.messages, function(key, value) {
                      $('#edit-product-errors').append('&lt;li&gt;' + value + '&lt;/li&gt;');
                  });
                  $("#edit-error-bag").show();
              }
          });
      });
  
  });
  
  function editProductForm(product_id) {
      $.ajax({
          type: 'GET',
          url: '/product/' + product_id,
          success: function(data) {
              $("#edit-error-bag").hide();
              $("#frmEditProduct input[name=name]").val(data.products.name);
              $("#frmEditProduct select[name=category_id]").val(data.products.category_id);
              $("#frmEditProduct input[name=description]").val(data.products.description);
              $("#frmEditProduct input[name=price_neto2]").val(data.products.price_neto);
              $("#frmEditProduct input[name=iva2]").val(data.products.iva);
              $("#frmEditProduct input[name=price_total2]").val(data.products.price_total);
              $("#frmEditProduct file[name=image]").val(data.products.image);
              $("#frmEditProduct input[name=product_id]").val(data.products.id);
              $('#editProductModal').modal('show');
          },
          error: function(data) {
              console.log(data);
          }
      });
  }
  
  </code></pre>