image preview

by Paweł Niemczyk

HTML

<a href="#" id="preview">preview</a>
<input type="file" accept="image/jpg" id="file" class="hidden" />
<div id="image"></div>

SCSS

.hidden{
    display: none;
}
#image{
    height: 300px;
    width: 300px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
}

CoffeeScript

EXT = /(\.|\/)(gif|jpe?g|png)$/i
$fileInput = $('#file')

previewImage = ->
    file = $fileInput[0].files[0] if ($fileInput[0].files && $fileInput[0].files[0])
    return unless file?
    
    $imagePreview = $('#image')
    return $imagePreview.css('background-image', "").text('this file is not supported') unless file.name.match(EXT)
    return $imagePreview.css('background-image', "").text('image size to large (> 1MB)') if file.size > 1048576
        
    if (window.File && window.FileReader && window.FileList && window.Blob)
        reader = new FileReader()
        reader.onload = (e) => $imagePreview.css('background-image', "url(#{e.target.result})").text('')
        reader.readAsDataURL(file)
      else
        $imageContainer.css('background-image', "none")
        alert 'Browser not support preview images'

$fileInput.change(previewImage)
$('#preview').on 'click', (e) ->
    e.preventDefault()
    $fileInput.trigger('click')