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:

Property	Type	Default Value
buttonText	string	"Choose Image"
name	string	"filename"
showInfo	Boolean	true
showPreview	Boolean	true
acceptType	Array	['image/jpg', 'image/jpeg', 'image/png', 'image/gif']
previewStyles	Object	{'max-width': '200px', 'max-height': '200px', 'border-radius': '10px', 'border': '3px solid #ccc', 'margin-bottom': 0}
onChange	function	arguments (event, imagesrc)

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>