show image on page after uploading by ckfinder

Question

im building a "create post" page using laravel and ckfinder to allow a user upload featured image.is it possible to show image on page once it has been uploaded? i have used blew code but it doesnt work correctly when i use ckfinder functiononclick'=>"openPopup()" on form. infact i need a response from ckfinder to define an image is uploaded and its time to show image on the page!

<input id="url" onclick="openPopup()" name="photo" type="text">


$("#url").on("change keydown keypress keyup mousedown click mouseup",function(){
       var photo_url = $("#url").val();
       var featured_image = $('#side-feature-img');

       featured_image.html('<img class="img-responsive" src="'+photo_url+'">');

   });

Possible duplicate of [Preview an image before it is uploaded](http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded) — Tim, Nov 09 '15 at 09:24

score 2 · Answer 1 · answered Nov 12 '15 at 10:58

You can do this by listening on files:choose and file:choose:resized events. Those events are fired when user select a file using "Choose" or "Choose resized" toolbar/context menu options.

function openPopup() {
    CKFinder.popup( {
        // Configure CKFinder's popup size.
        width: 800,
        height: 500,
        // Enable file choose mechanism.
        chooseFiles: true,
        // Restrict user to choose only from Images resource type.
        resourceType: 'Images',
        // Add handler for events that are fired when user select's file.
        onInit: function( finder ) {
            // User selects original image.
            finder.on( 'files:choose', function( evt ) {
                // Get first file because user might select multiple files
                var file = evt.data.files.first();
                showUploadedImage( file.getUrl() )
            } );

            // User selects resized image.
            finder.on( 'file:choose:resizedImage', function( evt ) {
                showUploadedImage( evt.data.resizedUrl );
            } );
        }
    } );
}

function showUploadedImage( url ) {
    // Update field's value
    jQuery( '#url' ).val( url );

    // Show chosen image
    var img = jQuery( '<img>' ).attr( 'src', url );
    jQuery( '#side-feature-img' ).html( img );
}

Hamid Hassas · Answer 2 · 2021-02-05T09:09:30.477

When the image file is selected, it display the image in the div the id='preview_image'

<script src="library/ckfinder/ckfinder.js"type="text/javascript"></script>

<input class="depth" type="text" name="image" id="ckfinder-input-1">
<button id="ckfinder-popup-1">Select Image</button>

<script>
function selectFileWithCKFinder( elementId ) {
          CKFinder.config( {
            language: 'fa',
            defaultDisplayDate: false,
            defaultDisplayFileName: true,
            defaultDisplayFileSize: true,
            // remove modules toolbar
            removeModules : 'FilePreview',
            editImagePresets : false,
            editImageAdjustments : 'brightness,exposure,contrast,sharpen',
          } );
          
          CKFinder.popup( {
              chooseFiles: true,
              width: 1000,
              height: 600,
              language: 'fa',
              onInit: function( finder ) {
                  finder.on( 'files:choose', function( evt ) {
                      var file = evt.data.files.first();
                      var output = document.getElementById( elementId );
                      output.value = file.getUrl();
                      showUploadedImage( file.getUrl() );
                  } );

                  finder.on( 'file:choose:resizedImage', function( evt ) {
                      var output = document.getElementById( elementId );
                      output.value = evt.data.resizedUrl;
                      showUploadedImage( evt.data.resizedUrl );
                  } );
              }
          } );
          
          function showUploadedImage( url ) {
            // Show chosen image to div tag
            var img = jQuery( '<img width="100" height="100">' ).attr( 'src', url );
            jQuery( '#preview_image' ).html( img );
          }
      }

<div id="preview_image"></div>

If you have a new question, please ask it by clicking the [Ask Question](https://stackoverflow.com/questions/ask) button. Include a link to this question if it helps provide context. - [From Review](/review/low-quality-posts/28251074) — Dragonthoughts, Feb 05 '21 at 08:16

show image on page after uploading by ckfinder

2 Answers2