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

Demo page here

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

License

christianbayer/image-uploader

ErrorLooks like something went wrong!

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

Error
Looks like something went wrong!

Packages