Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

spartan-multi-image-picker

Package Overview
Dependencies
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

spartan-multi-image-picker

A Jquery multi image picker with preview (and madness)

  • 1.0.3-rc-1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
13
increased by116.67%
Maintainers
1
Weekly downloads
 
Created
Source

spartan-multi-image-picker

npm

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.

img

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 and font-awesome.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

Include requirment script 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.

PropertyTypeExample
fieldNameStringfileUpload[] or fileUpload for single image
maxCountNumber1, 2 remove for unlimited count
rowHeightString200px
groupClassNameStringcol-md-4 col-sm-4 col-xs-6
allowedExtString`png
placeholderImageObject with image and width properties{ image: 'placeholder.png', width: '100%'}
maxFileSizeNumber (in kb)40000
dropFileLabelStringDrop file here
directUploadObjectSee in my example file

Callback

CallbackDescriptionReturn Param
onAddRowCalled on a new field appearitem count
onRenderedPreviewCalled on image rendered as a previewitem count
onRemoveRowCalled on user click the remove button for each fielditem count
onExtensionErrCalled on extension didn't match as allowedExtensionitem count, file
onSizeErrCalled on image size is more than maxFileSize propitem count, file

Customize example:

$("#coba").spartanMultiImagePicker({
	fieldName:        'fileUpload[]',
	maxCount:         5,
	rowHeight:        '200px',
	groupClassName:   'col-md-4 col-sm-4 col-xs-6',
	allowedExt:       'png|jpg',
	dropFileLabel:    "Drop Here",
	placeholderImage: {
	    image: 'placeholder.png',
	    width: '100%'
	},
	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);
		console.log('remove row');
	},
	onExtensionErr : function(index, file){
	    console.log(index, file);
		alert('Please only input png or jpg type file');
	},
	onSizeErr : function(index, file){
		console.log(index, file);
		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

$("#coba").spartanMultiImagePicker({
	fieldName:  'fileUpload[]',
	directUpload : {
		status: true, // activate direct upload
		loaderIcon: '<i class="fas fa-sync fa-spin"></i>',
		url:       'c.php',
		additionalParam : {
			name : 'My Name'
		},
		success : function(data, textStatus, jqXHR){
		},
		error : function(jqXHR, textStatus, errorThrown){
		}
	}
});

Keywords

FAQs

Package last updated on 11 May 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc