How to open modal after selecting image file

Question

when I click on the upload button my modal open with the explorer window I want to open modal after selecting the Image file.

Here's my HTML and JQUERY

$uploadCrop = $('#upload-demo').croppie({
  enableExif: true,
  viewport: {
    width: 200,
    height: 200,
    type: 'circle'
  },
  boundary: {
    width: 300,
    height: 300
  }
});
$('#upload').on('change', function() {
  var reader = new FileReader();
  reader.onload = function(e) {
    $uploadCrop.croppie('bind', {
      url: e.target.result
    }).then(function() {
      console.log('jQuery bind complete');
    });
  }
  reader.readAsDataURL(this.files[0]);
});
$('.upload-result').on('click', function(ev) {
  $uploadCrop.croppie('result', {
    type: 'canvas',
    size: 'viewport'
  }).then(function(resp) {
    $.ajax({
      url: "ajaxpro.php",
      type: "POST",
      data: {
        "image": resp
      },
      success: function(data) {
        html = '<img src="' + resp + '" />';
        $("#upload-demo-i").html(html);
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">Image Upluad</div>
    <div class="panel-body">
      <div class="row">
        <div class="col-md-4 text-center">
          <div id="upload-demo" style="width:350px"></div>
        </div>
        <div class="col-md-4" style="padding-top:30px;">
          <strong>Select Image:</strong>
          <br/>
          <input type="file" id="upload">
          <br/>
          <button class="btn btn-success upload-result">Upload Image</button>
        </div>
        <div class="col-md-4" style="">
          <div id="upload-demo-i" style="background:#e1e1e1;width:300px;padding:30px;height:300px;margin-top:30px"></div>
        </div>
      </div>
    </div>
  </div>
</div>

I have tried almost all possible solutions on StackOverflow, but still couldn't find the solution for this problem So, please don't mark it as duplicate

Why don't you have a look [here](https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded) — zapoo, Jan 29 '18 at 13:02

Ankit Singh · Answer 1 · 2018-01-29T13:11:24.950

Just try this:

   $('input[type=file]').change(function () {
        fileCount = this.files.length;
        if(fileCount){
            //if file selected show modal. your code here.
        }
    });

example

$('input[type=file]').change(function () {
        fileCount = this.files.length;
        if(fileCount){
                $('#upload-demo-i img').attr( 'src', URL.createObjectURL(event.target.files[0])
                );
        }else{
            $('#upload-demo-i img').attr( 'src','')
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="panel panel-default">
  <div class="panel-heading">Image Upluad</div>
  <div class="panel-body">
    <div class="row">
        <div class="col-md-4 text-center">
            <div id="upload-demo" style="width:350px"></div>
        </div>
        <div class="col-md-4" style="padding-top:30px;">
            <strong>Select Image:</strong>
            <br/>
            <input type="file" id="upload">
            <br/>
            <button class="btn btn-success upload-result">Upload Image</button>
        </div>
        <div class="col-md-4" style="">
            <div id="upload-demo-i" style="background:#e1e1e1;width:300px;padding:30px;height:300px;margin-top:30px"><img src="" /></div>
        </div>
    </div>
  </div>
</div>

hey I apologize for asking an incomplete question, I've asked this question again On S/O Here's the [link](https://stackoverflow.com/questions/48576907/open-modal-after-selecting-image-file-from-browser) — Zara Khan, Feb 02 '18 at 06:45

How to open modal after selecting image file

1 Answers1