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>

Answer 1

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>

Answer 2

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>