#### # 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

Name
Description
Photos

###### 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

Name
Description
Photos

###### 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
    });

#### Submitted data:

Name:

Description:

Uploaded images:

Preloaded images:

x