Use scanner.js for file upload fields

PHPMaker General Discussion (PHPMaker)
1

Hello everyone
I’d like to customize certain “file” fields by integrating scanner.js, a script that lets you retrieve a file directly from a scanner.
Here’s my starting code for a field called “photo”.In Startup script of Add page :

 function scanToJpg() {
    scanner.scan(displayImagesOnPage, {
        "output_settings": [{
            "type": "return-base64",
            "format": "jpg"
        }]
    });
}

/** Processes the scan result */
function displayImagesOnPage(successful, mesg, response) {
    if (!successful) { // On error
        console.error('Failed: ' + mesg);
        return;
    }

    if (successful && mesg != null && mesg.toLowerCase().indexOf('user cancel') >= 0) { // User canceled.
        console.info('User canceled');
        return;
    }

    var scannedImages = scanner.getScannedImages(response, true, false); // returns an array of ScannedImage
    for (var i = 0;
        (scannedImages instanceof Array) && i < scannedImages.length; i++) {
        var scannedImage = scannedImages[i];
        processScannedImage(scannedImage);
    }
}

/** Images scanned so far. */
var imagesScanned = [];

/** Processes a ScannedImage */
function processScannedImage(scannedImage) {
    imagesScanned.push(scannedImage);
    var elementImg = createDomElementFromModel({
        'name': 'img',
        'attributes': {
            'class': 'scanned',
            'src': scannedImage.src
        }
    });
    document.getElementById('images').appendChild(elementImg);
}

$("#x_photo").on("click", function(e) {
    e.preventDefault();
    scanToJpg();
})

I manage to recover my scanned document but I’m having trouble associating it with the x_photo field in PhpMaker.
Perhaps someone could give me a hand???
Thanks in advance

2

Your code only displays image in the the HTML element of id=“images”. It does not upload the images at all. PHPMaker uses jQuery File Upload, you may try programmatic file upload by your code.