Image-Uploader

Image-Uploader is a simple jQuery Drag & Drop Image Uploader plugin made to be used in forms, without AJAX.

# How to use it in 5 steps

1.Import the CSS file at the <head>:

<link type="text/css" rel="stylesheet" href="http://example.com/image-uploader.min.css">

2.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.min.js"></script>

3.Create a form with enctype="multipart/form-data" attributte:

<form action="http://example.com/post" enctype="multipart/form-data"></form>

4.Inside the form, create a wrapper to the plugin:

<div class="input-images"></div>

5.Initialize it with jQuery

$('.input-images').imageUploader();

# Options for custumization

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.

# Example 1 - basic usage

HTML Source
<form method="POST" name="form-example-1" id="form-example-1" enctype="multipart/form-data">

    <div class="input-field">
        <input type="text" name="name-1" id="name-1">
        <label for="name-1">Name</label>
    </div>

    <div class="input-field">
        <input type="text" name="description-1" id="description-1">
        <label for="description-1">Description</label>
    </div>

    <div class="input-field">
        <label class="active">Photos</label>
        <div class="input-images-1" style="padding-top: .5rem;"></div>
    </div>

    <button>Submit and display data</button>

</form>
Javascript Source
$('.input-images-1').imageUploader();

# Example 2 - with options

HTML Source
<form method="POST" name="form-example-2" id="form-example-2" enctype="multipart/form-data">

    <div class="input-field">
        <input type="text" name="name-2" id="name-2" value="John Doe">
        <label for="name-2" class="active">Name</label>
    </div>

    <div class="input-field">
        <input type="text" name="description-2" id="description-2"
        value="This form is already filed with some data, including images!">
        <label for="description-2" class="active">Description</label>
    </div>

    <div class="input-field">
        <label class="active">Photos</label>
        <div class="input-images-2" style="padding-top: .5rem;"></div>
    </div>

    <button>Submit and display data</button>

</form>
Javascript Source
let preloaded = [
    {id: 1, src: 'https://picsum.photos/500/500?random=1'},
    {id: 2, src: 'https://picsum.photos/500/500?random=2'},
    {id: 3, src: 'https://picsum.photos/500/500?random=3'},
    {id: 4, src: 'https://picsum.photos/500/500?random=4'},
    {id: 5, src: 'https://picsum.photos/500/500?random=5'},
    {id: 6, src: 'https://picsum.photos/500/500?random=6'},
];

$('.input-images-2').imageUploader({
    preloaded: preloaded,
    imagesInputName: 'photos',
    preloadedInputName: 'old',
    maxSize: 2 * 1024 * 1024,
    maxFiles: 10
});