How to Make Bootstrap Modal with File Upload and Preview – jQuery AJAX

Bootstrap Modal is a popup container which use to show various types of information on the screen.

It is very flexible and user-friendly.

You can display a new entry or update form in it.

In this tutorial, I am using Bootstrap Modal for image file upload and display preview using jQuery and AJAX.

---

Contents

1. HTML
2. PHP
3. jQuery
4. Conclusion

---

1. HTML

Create a button and Bootstrap Modal.

In the Bootstrap Modal create a file element in the <form> and for display image preview after upload created a <div id='preview'>.

Completed Code

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#uploadModal">Upload file</button>

<!-- Modal -->
<div id="uploadModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">File upload form</h4>
      </div>
      <div class="modal-body">
        <!-- Form -->
        <form method='post' action='' enctype="multipart/form-data">
          Select file : <input type='file' name='file' id='file' class='form-control' ><br>
          <input type='button' class='btn btn-info' value='Upload' id='btn_upload'>
        </form>

        <!-- Preview-->
        <div id='preview'></div>
      </div>
 
    </div>

  </div>
</div>

---

2. PHP

Create a ajaxfile.php file and upload folder for storing files.

Define valid image extensions in an $image_ext Array variable.

Select file extension and check it in $image_ext.

If a file has a valid extension then store the selected file to upload folder and return file path.

Completed Code

<?php

// file name
$filename = $_FILES['file']['name'];

// Location
$location = 'upload/'.$filename;

// file extension
$file_extension = pathinfo($location, PATHINFO_EXTENSION);
$file_extension = strtolower($file_extension);

// Valid image extensions
$image_ext = array("jpg","png","jpeg","gif");

$response = 0;
if(in_array($file_extension,$image_ext)){
    // Upload file
    if(move_uploaded_file($_FILES['file']['tmp_name'],$location)){
        $response = $location;
    }
}

echo $response;

---

3. jQuery

On the upload button click select the browsed file and create a FormData object for passing file data in AJAX request.

When AJAX request successfully callback then check its response.

If the response is 0 means file is not uploaded otherwise display image preview by creating a <img> element in the <div id='preview'> and use response value to set the image source.

Completed Code

$(document).ready(function(){
  $('#btn_upload').click(function(){

    var fd = new FormData();
    var files = $('#file')[0].files[0];
    fd.append('file',files);

    // AJAX request
    $.ajax({
      url: 'ajaxfile.php',
      type: 'post',
      data: fd,
      contentType: false,
      processData: false,
      success: function(response){
        if(response != 0){
          // Show image preview
          $('#preview').append("<img src='"+response+"' width='100' height='100' style='display: inline-block;'>");
        }else{
          alert('file not uploaded');
        }
      }
    });
  });
});

---

4. Conclusion

Within the Bootstrap Modal create your file element in the <form> and use jQuery AJAX for storing file to the server and display preview.

If you found this tutorial helpful then don't forget to share.