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>
