title: Laravel upload image through modal using ajax/jquery
body: <p>I'm making a small system that has inventory in it. I have a products table that has an <code>image</code> column that represents a picture of a specific product. My problem is why I can't upload using my modal and ajax code in my project in Laravel? Does anyone know how to solve this issue? I spend 2 days already in figuring out how to solve this error:</p>
  
  <blockquote>
    <p>message: "Undefined index: product_name"</p>
  </blockquote>
  
  <p>I already made the fields fillable in my model. Help will be highly appreciated.</p>
  
  <p><a href="https://i.stack.imgur.com/Z8xy3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Z8xy3.png" alt="output"></a></p>
  
  <p>Modal Code</p>
  
  <pre><code> &lt;div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"&gt;
      &lt;div class="modal-dialog modal-dialog-centered" role="document"&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
            &lt;h5 class="modal-title" id="exampleModalCenterTitle"&gt;Register New Product&lt;/h5&gt;
            &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
              &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
            &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
          &lt;p style="font-weight: bold;"&gt;Name &lt;/p&gt;
            &lt;input   type="text" class="form-control" id="product_name"/&gt;
            &lt;p style="font-weight: bold;"&gt;Description &lt;/p&gt;
            &lt;input   type="text" class="form-control" id="description"/&gt;
            &lt;p style="font-weight: bold;"&gt;Price &lt;/p&gt;
            &lt;input   type="text" class="form-control" id="currentprice"/&gt;
            {{-- &lt;input style="text-transform:uppercase"   type="text" class="form-control" id="supplier_id"/&gt; --}}
            &lt;p style="font-weight: bold;"&gt;Supplier &lt;/p&gt;
            &lt;select class="form-control"  id="supplier_id"  &gt;
                @foreach ($suppliers as $supplier)
            &lt;option value="{{$supplier-&gt;id}}"&gt;{{$supplier-&gt;name}}&lt;/option&gt;
                @endforeach
                &lt;/select&gt;
           &lt;p style="font-weight: bold;"&gt;Picture &lt;/p&gt;
            &lt;input  type="file" class="form-control" id="picture"/&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
            &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
            &lt;button type="button" class="btn btn-primary" id="add_product"&gt;Add&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Script</p>
  
  <pre><code> $(document).ready(function() {
      //add
      $('#add_product').click(function(e) {
          e.preventDefault();
          var name = $('#product_name').val();
          var description = $('#description').val();
          var price = $('#currentprice').val();
          var supplier_id = $('#supplier_id').val();
          var image = $('#picture').val();
  
          $.ajaxSetup({
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
          });
  
          $.ajax({
              url: "{{    url('/product')     }}",
              method: 'post',
              enctype: 'multipart/form-data',
              processData: false, 
              contentType: false,
              data:{
                  product_name: name,
                  description: description,
                  price: price,
                  supplier_id: supplier_id,
                  image: image,
              },
              success: function (res) {
                  console.log(res);
                  window.location.href = '{{route("products")}}'
              }
          });
      });
  });
  </code></pre>
  
  <p>ProductsController.php</p>
  
  <pre><code> public function store(Request $request)
      {
          $data = $request-&gt;all();
          $data['product_name'] = ($data['product_name']);
          $data['description'] = ($data['description']);
          $data['supplier_id'] = ($data['supplier_id']);
          $data['price'] = ($data['price']);
  
  
  
          if ($request-&gt;hasFile('image')){
              //Add new photo
                  $image = $request-&gt;file('image');
                  $filename = time() . '.' . $image-&gt;getClientOriginalExtension();
                  $location = public_path('img/' . $filename);
                  Image::make($image)-&gt;resize(300,300)-&gt;save($location);
                  $oldFilename = $products-&gt;image;
              //Update DB
                  $products-&gt;image = $filename;
               //Delete the old photo
                  // Storage::delete($oldFilename);
              }
  
          Product::create($data);
          return response()-&gt;json($data);
      }
  </code></pre>
  
  <p>route for products</p>
  
  <pre><code>//products
  Route::resource('product', 'ProductsController');
  </code></pre>