twain_scanner.html

<div class="uploaded-files"></div>
<div id="imagesContainer" class="row"></div>
<button type="button" id="bSave" class="btn btn-info">Load Images</button>

<script>
$('#bSave').click(function(e) {
    var images = $('iframe').contents().find('.modal-body').find('img');
    if(images.length == 0){
        alert('No Images found, please scan some images first.');
        return false;
    }

    $('#imagesContainer').empty();
    images.each(function(index, image){
        $('#imagesContainer').append(`
            <div class="col-md-12"><img src="${$(image).attr('src')}" class="thumbnail img-responsive"></div>
        `);

        var currentImageSrcString = $(image).attr('src');
        var filename = 'random_name.png';

        fetch(currentImageSrcString)
            .then(res => res.blob())
            .then(blob => {
                const file = new File([blob], filename, {
                    type: 'image/png'
                });

                var fd = new FormData();
                fd.append("photos", file);

                $.ajax({
                    type: "POST",
                    url: 'upload.php',
                    data: fd,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: (response) => {
                        response.data.forEach(f => {
                            $('.uploaded-files').append(`
                                <input type="hidden" name="files[]" value="${f}">
                            `);
                        });
                    },
                    error: function (xhr, status, error) {
                        alert(xhr.responseText);
                    }
                });
            });
    });
});
</script>

upload.php

<?php
$uploaded_ids = [];

//upload files and add into database
//$ids[] = $last_insert_id;
echo json_encode(['data' => $uploaded_ids]);

I don't know much about the extension, i only added the method for saving multiple images with the help of extension.

1. install this extension first in chrome and install software which this extension offers https://chrome.google.com/webstore/detail/twian-scanner/pnamophecpodffkldpbpjiknnealolcm?hl=en
2. open the twain_scanner.html file in browser
3. Click on extension icon, choose one item from dropdown and scan a document
4. After scanning a box will open with scanned pages (click on them to remove or just close the box)
5. Then click on load Images button it will load the images into your web page, also it will upload them on your server and upload.php will return the ids, you then use those ids in your form to attach them with your inputs.

Thanks!