Input Image File Button and Preview.

simple change input file to be a button, show name, size, and preview of image. Just tiny lib that could make it eazy.

$ npm install input-file-preview

#Usage

Create div element

<div id="yourid">
</div>

Call:

import inputfile from 'input-file-preview'

let button = document.getElementById('inputbutton');
new buttontest(inputfile)

Change Preview Position

By default, position preview bellow of button input. But it's could change the position to up of preview. Just add div element after first div with class .inbpreview and your class.

<div id="yourid">
  <div class="inbpreview"></div>
</div>

There are options, example if you would change label, and custom of name input that default is "filename":

new InputFilePreview(inputimage, {
  buttonText: "Browse Image",
  name: "myInputName"
});

Filter Image Type

It could filter image type by acceptType:

new InputFilePreview(inputimage, {
  buttonText: "Browse Image",
  acceptType: ['image/gif', 'image/png']
});

Default Options:

onChange

There is onchange event to customization

let imgid = document.getElementById('myImage');

new InputFilePreview(inputimage, {
  showPreview: false,
  onChange: function(e, imagesrc) {
  	// your another scripts
  }
});

On Vuejs

mounted() {
  let button = document.getElementById('inputbutton');
  let self = this;
  new buttontest(button, {
    buttonText: "Pilih Gambar",
    name: self.myName,
    onChange: function(e, imagesrc) {
      self.yourInputData = imagesrc;
    }
  });
}

Styles

For custom style for preview it could use previewStyles property (look Default Options), follow property default and input the value.

buttonText: 'Browse Image',
previewStyles: {
  'border': '10px solid #ccc'
}

Or, replace on style and using !important if have the same style. And for another stylist also use this.

example:

<style>
/* for button */
.inblabel {
  width: 500px !important;
}

/* for preview */
.inbpreview img {
  /*
  some style here
  */
}

/* for text name and size */
.inbfilename {
  font-size: 20px !important;
}
</style>