JSFiddle - React, Tailwind, and code Playground
HTML
<div class="input-group">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Choose Files...
</label>
<input id="file-upload" type="file" multiple/>
<button class="btn btn-lg btn-primary btn-block btn-signin-upload" type="submit">Upload</button>
</div>
<div class="gallery"></div>
JavaScript
$(function() {
// Multiple images preview in browser
var imagesPreview = function(input, placeToInsertImagePreview) {
if (input.files) {
console.log(input.files);
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i]);
}
}
};
$('#file-upload').on('change', function() {
imagesPreview(this, 'div.gallery');
});
});