<link rel="stylesheet" href="css/upload-images.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/hcg-image-upload.js"></script>

<form action="" method="post" enctype="multipart/form-data" id="multiple-upload">
  <div class="row align-items-center">
    <div class="col-sm">
      <input type="file" class="form-control-file" name="file_image">
    </div>

    <div class="col-sm text-right">
      <button type="submit" class="btn btn-primary btn-sm">upload</button>
    </div>
  </div>
</form>

$(function() {
  $("#multiple-upload").hcgImageUploads({
    multiple : true,
    previewImages : true,
    maxUpload : 100,
    url: 'upload.php',
    complete: function (success_imgs, error_imgs) {
      alert('done. \n success '+success_imgs.length +'\n error '+error_imgs.length);
    },
    success: function(img_array) {
      console.log(img_array.url);
      $("#uploaded_images_preview").append('<img src="'+img_array['url']+'" width="50px" height="50px" style="margin: 2px;"/>');
    },
    error: function (error_img_array) {
      console.log(error_img_array.name);
    }
  });

});