1. css

               <link type="text/css" rel="stylesheet" href="public/app/image-uploader.min.css">
               <link href="public/app/google_foont.css"    rel="stylesheet">
                

2. js

                <script type="text/javascript" src="public/app/image-uploader.min.js"></script>
              

3. html

              <form action="http://example.com/post" enctype="multipart/form-data"></form>
                <div class="input-images"></div>
              

4. script

              $('.input-images').imageUploader();
              

example1

              <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();
              

2. example 2

              <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',
    maxSize: 2 * 1024 * 1024,
    maxFiles: 10
});