Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Image Upload Preview

Image Upload Preview

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

A Pen by Craig Wayne on CodePen.

License.

<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>
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') );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/uikit.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.