Image-Uploader

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

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.

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