spartan-multi-image-picker

A Jquery multi image picker with preview (and madness).

Hello, sorry for not doing maintenance for a long time. I upgraded a few things but nothing much has changed. I hope this plugin can still run properly.

This plugin enable you to upload multiple files on a html form without hold Ctrl on your keyboard. You can use it for non-ajax or ajax uploading file.

• Website

Current New Feature

1. Drag and drop image

2. Direct image uploading

Installation

Download this package or install via bower

bower install spartan-multi-image-picker

Include stylesheet, I recommended to use bootstrap.

<link  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"  rel="stylesheet"  integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"  crossorigin="anonymous">
<script  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"  integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"  crossorigin="anonymous"></script>

Include requirement script and this plugin after that like so.

<script  type="text/javascript"  src="https://code.jquery.com/jquery-3.6.0.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  id="image_picker" class="row"></div>

Activate this plugin.

$("#image_picker").spartanMultiImagePicker({
	fieldName:  'fileUpload[]' // this configuration will send your images named "fileUpload" to the server
});

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|jpg|jpeg|gif" or empty string for all type | | placeholderImage | Object with image and width properties | { image: 'placeholder.png', width: '100%'} | | maxFileSize | Number (in kb) | 40000 | | dropFileLabel | String | Drop file here | | directUpload | Object | See in my example file |

Callback

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

Customize example:

$("#multi_image_picker").spartanMultiImagePicker({
		fieldName     : 'fileUpload[]', // this configuration will send your images named "fileUpload" to the server
		maxCount      : 5,
		rowHeight     : '200px',
		groupClassName: 'col-4',
		maxFileSize   : '',
		dropFileLabel : "Drop Here",
		onAddRow      : function(index){
			console.log(index);
			console.log('add new row');
		},
		onRenderedPreview : function(index){
			console.log(index);
			console.log('preview rendered');
		},
		onRemoveRow : function(index){
			console.log(index);
		},
		onExtensionErr : function(index, file){
			console.log(index, file,  'extension err');
			alert('Please only input png or jpg type file')
		},
		onSizeErr : function(index, file){
			console.log(index, file,  'file size too big');
			alert('File size too big');
		}
	}
);

Direct Upload Image

Is this option is true, your file is directly send to serve when file selected. This is a few example code

$("#multi_image_picker").spartanMultiImagePicker({
	fieldName     : 'fileUpload[]', // this configuration will send your images named "fileUpload" to the server
	directUpload : {
		status: true,
		loaderIcon: `<div class="spinner-border text-primary"></div>`, // spinner class from bootstrap
		url: 'action.php',
		additionalParam : {
			name : 'My Name'
		},
		success : function(data, textStatus, jqXHR){

		},
		error : function(jqXHR, textStatus, errorThrown){

		}
	}
});