How to display image in popup after uploading?

Question

I am uploading an image that image I have to display in the popup without click on Open popup link. If a user uploaded an image then directly display popup with image which user uploaded. I want to hit that link without clicked. Would you help me in this?

$.fn.expose = function(options) {
  
  var $modal = $(this),
      $trigger = $("a[href=" + this.selector + "]");
  
  $modal.on("expose:open", function() {
    
    $modal.addClass("is-visible");
    $modal.trigger("expose:opened");
  });
  
  $modal.on("expose:close", function() {
    
    $modal.removeClass("is-visible");
    $modal.trigger("expose:closed");
  });
  
  $trigger.on("click", function(e) {
    
    e.preventDefault();
    $modal.trigger("expose:open");
  });
  
  $modal.add( $modal.find(".close") ).on("click", function(e) {
    
    e.preventDefault();
    
    // if it isn't the background or close button, bail
    if( e.target !== this )
      return;
    
    $modal.trigger("expose:close");
  });
  
  return;
}

$("#Popup").expose();

// Example Cancel Button

$(".cancel").on("click", function(e) {
  
  e.preventDefault();
  $(this).trigger("expose:close");
});

.Modal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: transparent;
  visibility: hidden;
}

.Modal .content {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 50%;
  padding: 50px;
  border-radius: 3px;
  background: #fff;
  transform: translate(-50%, -30%) scale(0);
}

.Modal .close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: block;
  width: 18px;
  height: 18px;
  padding: 5px;
  line-height: 18px;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  background: #2ecc71;
  color: #fff;
}

.Modal .close:before { content: '\2715'; }

.Modal.is-visible {
  visibility: visible;
  background: rgba(0, 0, 0, 0.5);
  -webkit-transition: background .35s;
  -moz-transition: background .35s;
  transition: background .35s;
  -webkit-transition-delay: .1s;
  -moz-transition-delay: .1s;
  transition-delay: .1s;
}

.Modal.is-visible .content {
  -webkit-transform: translate(-50%, -30%) scale(1);
  -moz-transform: translate(-50%, -30%) scale(1);
  transform: translate(-50%, -30%) scale(1);
 -webkit-transform: transition: transform .35s;
 -moz-transform: transition: transform .35s;
  transition: transform .35s;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="file" id="upload" value="Choose a file">

<a href="#Popup" class="button">Open Popup</a>
<!--popup content here-->
<div id="Popup" class="Modal">
  <div class="content">
    <h2>Image display here after uploading</h2>
    <a href="#" class="cancel">Cancel</a> <span class="close"></div>
</div>
</div>

Using php how? Is it an ajax upload or a standard form submit? — charlietfl, Jan 21 '17 at 12:34
Possible duplicate of [Show an image preview before upload](http://stackoverflow.com/questions/14069421/show-an-image-preview-before-upload) — Ilanus, Jan 21 '17 at 12:36
Mr.llan, I can also display that image on the same page but I want to display that image in popup — , Jan 21 '17 at 12:38

Jyothi Babu Araja · Accepted Answer · 2017-01-21T13:02:11.163

Assuming you will use Ajax to upload your image. This hack will do as you expected.

Using callback to trigger modal and uploaded img source in modal options. Rest comments will explain

$('#upload').change(function(){ //image change listener
  var files = $(this).get(0).files;
  var img = window.URL.createObjectURL(files[0]); //first file
  $("#Popup").expose({src: img}, function(modal){
    //your image uploading here
    setTimeout(function(){ //mocking upload here
    console.log("came to click");
    modal.trigger("expose:open");//keep this in after your Ajax Upload Success
    }, 2000);
  });
});

$.fn.expose = function(options, callback) {
  
  var $modal = $(this),
      $trigger = $("a[href=" + this.selector + "]");
  callback($modal);
  
  $("#uploaded-image").attr('src', options.src); //setting img src
  
  $modal.on("expose:open", function() {
    
    $modal.addClass("is-visible");
    $modal.trigger("expose:opened");
  });
  
  $modal.on("expose:close", function() {
    
    $modal.removeClass("is-visible");
    $modal.trigger("expose:closed");
  });
  
  $trigger.on("click", function(e) {
    
    e.preventDefault();
    $modal.trigger("expose:open");
  });
  
  $modal.add( $modal.find(".close") ).on("click", function(e) {
    
    e.preventDefault();
    
    // if it isn't the background or close button, bail
    if( e.target !== this )
      return;
    
    $modal.trigger("expose:close");
  });
  
  return;
}

// Example Cancel Button

$(".cancel").on("click", function(e) {
  
  e.preventDefault();
  $(this).trigger("expose:close");
});

.Modal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: transparent;
  visibility: hidden;
}

.Modal .content {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 50%;
  padding: 50px;
  border-radius: 3px;
  background: #fff;
  transform: translate(-50%, -30%) scale(0);
}

.Modal .close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: block;
  width: 18px;
  height: 18px;
  padding: 5px;
  line-height: 18px;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  background: #2ecc71;
  color: #fff;
}

.Modal .close:before { content: '\2715'; }

.Modal.is-visible {
  visibility: visible;
  background: rgba(0, 0, 0, 0.5);
  -webkit-transition: background .35s;
  -moz-transition: background .35s;
  transition: background .35s;
  -webkit-transition-delay: .1s;
  -moz-transition-delay: .1s;
  transition-delay: .1s;
}

.Modal.is-visible .content {
  -webkit-transform: translate(-50%, -30%) scale(1);
  -moz-transform: translate(-50%, -30%) scale(1);
  transform: translate(-50%, -30%) scale(1);
 -webkit-transform: transition: transform .35s;
 -moz-transform: transition: transform .35s;
  transition: transform .35s;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="file" id="upload" value="Choose a file">

<a href="#Popup" class="button">Open Popup</a>
<!--popup content here-->
<div id="Popup" class="Modal">
  <div class="content">
    <h2>Image display here after uploading</h2>
    <img id="uploaded-image"/>
    <a href="#" class="cancel">Cancel</a> <span class="close"></div>
</div>
</div>

Thanks for help Mr.Jyothi Babu.Working perfectly.Upvote form my side. — , Jan 21 '17 at 13:18

score 1 · Answer 2 · answered Jan 21 '17 at 12:56

Use an .on(change) function on the input to trigger the modal.

$("input[type='file']").on("change", function(event1) {
    src1 = URL.createObjectURL(event1.target.files[0]);
    $(".toshow").css('background-image','none');
    $(".toshow").css('background-image','url(' + src1 + ')');
    $(".Modal").trigger("expose:open");
});

Here's a working snippet. I added an extra div with class="toshow" in the modal and some css related to it. you can adjust the height of this div to show the image larger.

$.fn.expose = function(options) {
  
  var $modal = $(this),
      $trigger = $("a[href=" + this.selector + "]");
  
  $modal.on("expose:open", function() {
    
    $modal.addClass("is-visible");
    $modal.trigger("expose:opened");
  });
  
  $modal.on("expose:close", function() {
    
    $modal.removeClass("is-visible");
    $modal.trigger("expose:closed");
  });
  
  $trigger.on("click", function(e) {
    
    e.preventDefault();
    $modal.trigger("expose:open");
  });
  
  $modal.add( $modal.find(".close") ).on("click", function(e) {
    
    e.preventDefault();
    
    // if it isn't the background or close button, bail
    if( e.target !== this )
      return;
    
    $modal.trigger("expose:close");
  });
  
  return;
}

$("#Popup").expose();

// Example Cancel Button

$(".cancel").on("click", function(e) {
  
  e.preventDefault();
  $(this).trigger("expose:close");
});

$("input[type='file']").on("change", function(event1) {
  src1 = URL.createObjectURL(event1.target.files[0]);
    $(".toshow").css('background-image','none');
  $(".toshow").css('background-image','url(' + src1 + ')');
    $(".Modal").trigger("expose:open");

});

.Modal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: transparent;
  visibility: hidden;
}

.Modal .content {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 50%;
  padding: 50px;
  border-radius: 3px;
  transform: translate(-50%, -30%) scale(0);
}
.content .toshow{
  background-repeat:no-repeat;
  width:100%;
  height:100px;
  background-position:center;
  background-size:contain;
}

.Modal .close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: block;
  width: 18px;
  height: 18px;
  padding: 5px;
  line-height: 18px;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  background: #2ecc71;
  color: #fff;
}

.Modal .close:before { content: '\2715'; }

.Modal.is-visible {
  visibility: visible;
  background: rgba(0, 0, 0, 0.5);
  -webkit-transition: background .35s;
  -moz-transition: background .35s;
  transition: background .35s;
  -webkit-transition-delay: .1s;
  -moz-transition-delay: .1s;
  transition-delay: .1s;
}

.Modal.is-visible .content {
  -webkit-transform: translate(-50%, -30%) scale(1);
  -moz-transform: translate(-50%, -30%) scale(1);
  transform: translate(-50%, -30%) scale(1);
 -webkit-transform: transition: transform .35s;
 -moz-transform: transition: transform .35s;
  transition: transform .35s;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="file" id="upload" value="Choose a file">

<a href="#Popup" class="button">Open Popup</a>
<!--popup content here-->
<div id="Popup" class="Modal">
  <div class="content">
    <div class="toshow"></div>
    <a href="#" class="cancel">Cancel</a> <span class="close"></span></div>
</div>

How to display image in popup after uploading?

2 Answers2