Image input with preview

by levchenko_d

HTML

<div class="my-uploader"></div>

CSS

.uploader-wrapper {
    position: relative;
    width: 100%;
    min-height: 200px;
    padding-bottom: 40px;
    text-align: center;
    background: #f3f4f9;
    border: solid 1px #e2e3e9;
    border-radius: 10px;
    overflow: hidden;
}

.select-file-button{
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  transform: translateY(-50%);
  
  margin: auto;
  
  width: 250px;
  height: 40px;
  line-height: 40px;
  background: #fafafa;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  border: none;
  border-radius: 7px;
  font-size: 13px;
  cursor: pointer;
  
  transition: 0.25s ease-out, background 0s;
}


.select-file-button.select-file-button-minimized{
  top: 100%;
  transform: translateY(calc(-100% - 10px));
  height: 30px;
  line-height: 30px;
  font-size: 11px;
  width: 200px;
}


.select-file-button:hover,
.select-file-button:focus{
  background: #fff;
  outline: none;
}

.select-file-button:active{
  background: #fafafa;
}



.preview-list{
  margin: 0;
  padding: 20px;
}

.preview-list-item{
  display: inline-block;
  list-style-type: none;
  box-shadow: 0 1px 1px rgba(0,0,0,0.4);
}


.preview-list-item:hover{
  cursor:...

JavaScript

/** Uploader(options)
*
* - creates wrap around input[type="file"] and shows preview of image
*
*
*	@options {Object}(Required) - list of uploader options and parameters
*	@options.uploadDOM {DOM}(Required) - DOM element where uploader content will be insered
* @options.autoPrefixClasses {Bool}(Optional)[true] - automatically add classes for custom classes. Like 'a-class-name' => 'prefix-a-class-name'
*	@options.classNamePrefix {String}(Optional)[''] - class name prefix
*	@options.fileInputName {String}(Optional)['file'] - value of name attr for file input
*	@options.multiseclect {Bool}(Optional)[false] - allow multi file select if 'true'
*	@options.selectFileButtonText {String}(Optional)['Select file'] - innerText for @t.doms.selectFileButton
*	@options.selectFileButtonClass {String}(Optional)['button select-file-button'] - class name for @t.doms.selectFileButton
*	@options.selectFileButtonMinimizedClass {String}(Optional)['button select-file-button select-file-button-minimized'] - class name for minimized @t.doms.selectFileButton
*	@options.uploaderWrapperClass {String}(Optional)['uploader-wrapper'] - class name for @t.doms.uploaderWrapper
*	@options.fileInputClass {String}(Optional)['file-input'] - class name for @t.doms.fileInput
*	@options.previewWrapperClass {String}(Optional)['preview-wrapper'] - class name for @t.doms.previewWrapper
*	@options.previewListClass {String}(Optional)['preview-list'] - class name for @t.doms.previewList
*	@options.previewListItemClass {String}(Optional)['preview-list-item'] - class name for @t.doms.previewListItem
*	@options.imagePreviewClass {String}(Optional)['image-preview'] - class name for @t.doms.imagePreview


*
*
* ******** Example

var imageUploaderOptions = {
			uploadDOM: document.querySelector('.my-uploader'),
      classNamePrefix: 'up-',
      autoPrefixClasses: true,
      fileInputName: 'image',
      multiseclect: false,
      selectFileButtonText: 'Select image from computer',
      selectFileButtonClass:...