Image-Uploader
Image-Uploader is a simple jQuery Drag & Drop Image Uploader plugin made to be used in forms, without AJAX.
Important notice
This plugin uses the DataTransfer API. Therefore, is not a Cross Browser solution. Everything works fine on Chrome, though. See #3 for more details. If this is not a problem to you, feel free to enjoy the plugin.
Demo
How to use it
Import the CSS file at the <head>:
<link type="text/css" rel="stylesheet" href="http://example.com/image-uploader.min.css">
Import the JS file at the end of the <body>, after the jQuery:
<script type="text/javascript" src="http://example.com/jquery.min.js"></script>
<script type="text/javascript" src="http://example.com/image-uploader.js"></script>
Create a form with enctype="multipart/form-data" attributte:
<form action="http://example.com/post" enctype="multipart/form-data"></form>
Inside the form, create a wrapper to the plugin:
<div class="input-images"></div>
Initialize it with jQuery
$('.input-images').imageUploader();
Options
label
Type: string
Default: 'Drag & Drop files here or click to browse'
Informative label, telling the user what to do with the draggable area.
preloaded
Type: {id: number, src: string}[]
Default: []
Array of objects representing images that are already stored, containing an identification for that image and the source.
imagesInputName
Type: string
Default: 'images'
Name of the input that will be posted, containing the files list.
preloadedInputName
Type: string
Default: 'preloaded'
Name of the inputs that will be posted, containing the preloaded images identification.
extensions
Type: array
Default: ['.jpg', '.jpeg', '.png', '.gif', '.svg']
Array of strings with the allowed extensions. Enabled by default. To disable this validation, set it as undefined. If the uploaded file does not have one of these extensions, an alert will appear and the image will not be sent.
mimes
Type: array
Default: ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml']
Array of strings with the allowed mime types. Enabled by default. To disable this validation, set it as undefined. If the uploaded file does not have one of these mime types, an alert will appear and the image will not be sent.
maxSize
Type: int
Default: undefined
Value of the maximum file size allowed in bytes. Disabled by default. For a maximum size of 2 megabytes, you can set this option as 2 * 1024 * 1024 bytes. If the uploaded file does have more then allowed, an alert will appear and the image will not be sent.
maxFiles
Type: int
Default: undefined
Value of the maximum number of files allowed. Disabled by default. If the maximum number was reached, an alert will appear and the image will not be sent.
License
This project is licensed under the MIT License - see the LICENSE file for details