spartan-multi-image-picker

spartan-multi-image-picker

This plugin enable you to upload multiple files on a html form without giving your dummy user a pain in the ass to hold their Ctrl keyboard for non ajax upload file.

Installation

Download this package or install via bower bower install spartan-multi-image-picker

Include JQuery first, and this plugin after that like so.

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="dist/js/spartan-multi-image-picker-min.js"></script>

Create an element where do you want to activate this input file.

<div class="row">
	<div id="coba"></div>
</div>

Activate this plugin.

$("#coba1").spartanMultiImagePicker({
	fieldName:   'fileUpload[]'
});

The fieldName is your field name that will appended as input type file to you html.

All Properties

This is what you can custom when you call this plugin.

Property	Type	Example
fieldName	String	fileUpload[] or fileUpload for single image
maxCount	Number	1, 2 remove for unlimited count
rowHeight	String	200px
groupClassName	String	col-md-4 col-sm-4 col-xs-6
allowedExt	String	`png
placeholderImage	Object with image and width properties	{ image: 'placeholder.png', width: '100%'}
maxFileSize	Number (in kb)	40000

Callback

Callback	Description
onAddRow	Called on a new field appear
onRenderedPreview	Called on image rendered as a preview
onRemoveRow	Called on user click the remove button for each field
onExtensionErr	Called on extension didn't match as allowedExtension
onSizeErr	Called on image size is more than maxFileSize prop

Full customize example:

$("#coba").spartanMultiImagePicker({
	fieldName:        'fileUpload[]',
	maxCount:         5,
	rowHeight:        '200px',
	groupClassName:   'col-md-4 col-sm-4 col-xs-6',
	allowedExt:       'png|jpg',
	placeholderImage: {
	    image: 'placeholder.png',
	    width: '100%'
	},
	onAddRow:       function(){
		console.log('add new row');
	},
	onRenderedPreview : function(){
		console.log('preview rendered');
	},
	onRemoveRow : function(){
		console.log('remove row');
	},
	onExtensionErr : function(){
		console.log('extension error');
		alert('Please only input png or jpg type file');
	},
	onSizeErr : function(){
		console.log('file size too big');
		alert('File size too big');
	}
});