Submitted data:
Name:
Description:
Uploaded images:
Preloaded images:
Image-Uploader is a simple jQuery Drag & Drop Image Uploader plugin made to be used in forms, withot AJAX.
1.Import the CSS file at the <head>
along Material Icons for the
icons:
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<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();
Type: string
Default: 'Drag & Drop files here or click to browse'
Informative label, telling the user what to do with the draggable area.
Type: {id: number, src: string}[]
Default: []
Array of objects representing images that are already stored, containing an identification for that image and the source.
Type: string
Default: 'images'
Name of the input that will be posted, containing the files list.
Type: string
Default: 'preloaded'
Name of the inputs that will be posted, containing the preloaded images identification.
<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>
$('.input-images-1').imageUploader();
<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>
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'
});