File upload through a modal using Ajax

Question

I want to upload a file through a modal using Ajax. How can I do that?

My modal:

<div id="addBtn" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h5 class="modal-title" id="myModalLabel">Add a medicine</h5>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label class="control-label mb-10">Generic Name</label>
            <select class="form-control" name="medicine_id" id="medicine_id">
              @foreach($items as $item)
              <option value="{{$item->id}}" >{{$item->generic_name}}</option>
              @endforeach
            </select>
          </div>

          <div class="form-group">
            <label class="control-label mb-10">Dosage Volume</label>
            <input type="text" name="dosage_name" id="dosage-volume" class="form-control" placeholder="Example: 20mg">
          </div>

          <div class="form-group">
            <label class="control-label mb-10">Form</label>
            <input type="text" name="form" id="form" class="form-control" placeholder="Bottle, Tablet">
          </div>

          <div class="form-group">
            <label class="control-label mb-10">Price Per piece</label>
            <input type="text" name="price" id="price" class="form-control" placeholder="Price">
          </div>

          <div class="form-group">
            <label class="control-label mb-10">Insert a photo</label>
            <div class="panel-wrapper collapse in">
              <div class="panel-body">
                <div class="mt-20">
                  <input type="file" name="photo" id="input-file-now" class="dropify" >
                </div>  
              </div>
            </div>
          </div>

        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success waves-effect" data-dismiss="modal" id="save-dosage">Save</button>
        <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Cancel</button>
      </div>

    </div>
    <!-- /.modal-content -->
  </div>
</div>

This is my JavaScript file:

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);
}

and this is my controller:

 public function storeDosage(ProductsRequest $request){
    $file = $request->file('photo');
    $fileName = uniqid() . $file->getClientOriginalName();

    if(!file_exists('medicine/images')){
      mkdir('medicine/images', 0777, true);
    }
    $file->move('medicine/images', $fileName); 
    if(!file_exists('medicine/images/thumbs')){
      mkdir('medicine/images/thumbs', 0777, true);
    }

    $thumb = Image::make('medicine/images/' .$fileName)->resize(150,150)->save('medicine/images/thumbs/' . $fileName,50);
        //post information to db
    $dosage = $this->dosage;
    $dosage->dosage_name = $request['dosage_name'];
    $dosage->form = $request['form'];
    $dosage->medicine_id = $request['medicine_id'];
    $dosage->price = $request['price'];
    $dosage->save();

    $image = $dosage->photo()->create([
      'dosage_id' => $request->input('id'),
      'file_name' => $fileName,
      'file_size' => $file->getClientSize(),
      'file_mime' => $file->getClientMimeType(),
      'file_path' => 'medicine/images/thumbs'. $fileName,
      'created_by'=> auth()->user()->id,
      ]);
    return redirect()->route('medicineList');

  }

but it returns error 500. I think Ajax doesn't accept file upload using Bootstrap modal.

Solution

You can upload the file using bootstrap modal via ajax like this.

In your form tag use attribute enctype and form html will be like below:

 <form enctype="multipart/form-data" id="modal_form_id"  method="POST" >
    <input type="file" name="documents">
 </form>

Js code:

    var postData = new FormData($("#modal_form_id")[0]);

                         $.ajax({
                                 type:'POST',
                                 url:'your-post-url',
                                 processData: false,
                                 contentType: false,
                                 data : postData,
                                 success:function(data){
                                   console.log("File Uploaded");
                                 }

                              });

On your controller side you can do in the function like below to upload image.

    if(Input::hasFile('documents')) {

        $path = "directory where you wish to upload file";

        $file_name= Input::file('documents');   
        $original_file_name = $file_name->getClientOriginalName();

        $extension       = $file_name->getClientOriginalExtension();
        $fileWithoutExt  = str_replace(".","",basename($original_file_name, $extension));  
        $updated_fileName = $fileWithoutExt."_".rand(0,99).".".$extension; 

        $uploaded = $file_name->move($path, $updated_fileName);

        echo $updated_fileName;

    }