Image Upload Preview

image-upload-preview.markdown

Image Upload Preview

Image Upload Preview gist using UIKit 3, Javascript and HTML File Input Element

A Pen by Craig Wayne on CodePen.

License.

index.html

<div class="uk-container uk-container-center uk-text-center">
  <div class="uk-thumbnail uk-margin-top">
    <img class="uk-margin" src="https://placeholdit.imgix.net/~text?txtsize=56&txt=Select%20Image&w=600&h=400">
    <form>
      <label class="uk-button uk-button-primary uk-button-large">
                  <span>Select Image</span>
                  <input type="file" accepts="image/*" id="file_input_demo" class="uk-invisible uk-position-absolute" />
              </label>
    </form>

  </div>
</div>

script.babel

var Image_Upload_Preview = function( file_input, image_element ){

    /**
     * Checks for supported features
     * @returns {boolean}
     */
    this.is_supported = function(){

        if( ! FileReader instanceof Function ){
            console.error(':( Your browser noes not support the FileReader...');
            return false;
        }
    };


    /**
     * Checks the inputs provided
     * @returns {boolean}
     */
    this.validate_inputs = function(){

        /**
         * Fail if:
         * 1. Not a HTML Input Element
         * 2. Not a File Input Element
         *
         */
        if( ! $(file_input).get(0) instanceof HTMLInputElement || $(file_input).first().attr('type') != 'file' ){
            console.error( 'Invalid Element provided...' );
            return false;
        }

        /**
         * Fail if:
         * 1. Image Element provided is invalid
         */
        if( ! $(image_element).get(0) instanceof HTMLImageElement ){
            console.error( 'Invalid Image Element provided...' );
            return false;
        }

    };


    /**
     * Only proceed if all the preliminary checks have passed
     */
    if( this.is_supported() || this.validate_inputs() ){
        return false;
    }


    /**
     * Set the file input to only accept images
     */
    $(file_input).attr('accept','image/*');


    $(file_input).change(function(){

        /**
         * Fail if:
         * 1. 'files' data is non existent
         * 2. 'files' data has no data in it
         */
        if( !this.files || this.files.length < 1 ){
            console.error('No files data exists for this file input...');
            return false;
        }


        var file_reader = new FileReader();

        file_reader.onload = function( reader_result ) {

            var image_result = null;

            /**
             * Legacy lookup for the result
             */
            image_result = reader_result.target && reader_result.target.result ? reader_result.target.result : image_result ;
            image_result = !image_result && reader_result.srcElement && reader_result.srcElement.result ? reader_result.srcElement.result : image_result ;

            $( image_element ).attr( 'src', image_result );
        };

        file_reader.readAsDataURL( this.files[0] );
    });

};


$(document).ready(function(){

    /**
     * Example Usages
     */
    // new Image_Upload_Preview( document.getElementById('file_input_demo'), $('img') );
    new Image_Upload_Preview( $('input[type=file]'), $('img') );
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/uikit.min.css" rel="stylesheet" />