title: File upload through a modal using Ajax
body: <p>I want to upload a file through a modal using Ajax. How can I do that?</p>
  
  <p>My modal:</p>
  
  <pre><code>&lt;div id="addBtn" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
          &lt;h5 class="modal-title" id="myModalLabel"&gt;Add a medicine&lt;/h5&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;form&gt;
            &lt;div class="form-group"&gt;
              &lt;label class="control-label mb-10"&gt;Generic Name&lt;/label&gt;
              &lt;select class="form-control" name="medicine_id" id="medicine_id"&gt;
                @foreach($items as $item)
                &lt;option value="{{$item-&gt;id}}" &gt;{{$item-&gt;generic_name}}&lt;/option&gt;
                @endforeach
              &lt;/select&gt;
            &lt;/div&gt;
  
            &lt;div class="form-group"&gt;
              &lt;label class="control-label mb-10"&gt;Dosage Volume&lt;/label&gt;
              &lt;input type="text" name="dosage_name" id="dosage-volume" class="form-control" placeholder="Example: 20mg"&gt;
            &lt;/div&gt;
  
            &lt;div class="form-group"&gt;
              &lt;label class="control-label mb-10"&gt;Form&lt;/label&gt;
              &lt;input type="text" name="form" id="form" class="form-control" placeholder="Bottle, Tablet"&gt;
            &lt;/div&gt;
  
            &lt;div class="form-group"&gt;
              &lt;label class="control-label mb-10"&gt;Price Per piece&lt;/label&gt;
              &lt;input type="text" name="price" id="price" class="form-control" placeholder="Price"&gt;
            &lt;/div&gt;
  
            &lt;div class="form-group"&gt;
              &lt;label class="control-label mb-10"&gt;Insert a photo&lt;/label&gt;
              &lt;div class="panel-wrapper collapse in"&gt;
                &lt;div class="panel-body"&gt;
                  &lt;div class="mt-20"&gt;
                    &lt;input type="file" name="photo" id="input-file-now" class="dropify" &gt;
                  &lt;/div&gt;  
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
          &lt;/form&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-success waves-effect" data-dismiss="modal" id="save-dosage"&gt;Save&lt;/button&gt;
          &lt;button type="button" class="btn btn-default waves-effect" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;!-- /.modal-content --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my JavaScript file:</p>
  
  <pre><code>function addDosage(url){
      console.log(url);
  
      $.ajax({
          type:'POST',
          url:url,
          data:{
              'medicine_id' : $('select#medicine_id').val(),
              'dosage-volume' : $('#dosage-volume').val(),
              'form'  : $('[name=form]').val(),
              'price' : $('[name=price]').val(),
              'photo' : $('[name=photo]').val()
          },
          success:callback,
          error:err
      })
  
  }
  
  
  function callback(data){
      console.log(data);
  }
  
  
  function err(xhr, reason, ex)
  {
      console.log(+xhr.status);
  }
  </code></pre>
  
  <p>and this is my controller: </p>
  
  <pre><code> public function storeDosage(ProductsRequest $request){
      $file = $request-&gt;file('photo');
      $fileName = uniqid() . $file-&gt;getClientOriginalName();
  
      if(!file_exists('medicine/images')){
        mkdir('medicine/images', 0777, true);
      }
      $file-&gt;move('medicine/images', $fileName); 
      if(!file_exists('medicine/images/thumbs')){
        mkdir('medicine/images/thumbs', 0777, true);
      }
  
      $thumb = Image::make('medicine/images/' .$fileName)-&gt;resize(150,150)-&gt;save('medicine/images/thumbs/' . $fileName,50);
          //post information to db
      $dosage = $this-&gt;dosage;
      $dosage-&gt;dosage_name = $request['dosage_name'];
      $dosage-&gt;form = $request['form'];
      $dosage-&gt;medicine_id = $request['medicine_id'];
      $dosage-&gt;price = $request['price'];
      $dosage-&gt;save();
  
      $image = $dosage-&gt;photo()-&gt;create([
        'dosage_id' =&gt; $request-&gt;input('id'),
        'file_name' =&gt; $fileName,
        'file_size' =&gt; $file-&gt;getClientSize(),
        'file_mime' =&gt; $file-&gt;getClientMimeType(),
        'file_path' =&gt; 'medicine/images/thumbs'. $fileName,
        'created_by'=&gt; auth()-&gt;user()-&gt;id,
        ]);
      return redirect()-&gt;route('medicineList');
  
    }
  </code></pre>
  
  <p>but it returns error 500. I think Ajax doesn't accept file upload using Bootstrap modal.</p>