Change quantity to match number of uploaded files

IMPORTANT: the app can now update the product quantity automatically:  How can I update the product quantity with the uploaded file count?

If you want to set the quantity of the product added to the cart based on the number of uploaded files you can use the following code. 

JavaScript Code 

The code syncs the quantity field with the number of uploaded files, it handles file add and remove events.
The quantity field is set to readonly to prevent manual modifications. 

// look for product form
var productFormEl = document.querySelector('form[action*="/cart/add"]');

if(productFormEl) {

    // listener to get a reference to the upload field
    productFormEl.addEventListener('upload:ready', function(e) {
        // store field reference
        var uploadField = e.detail;

        // look for quantity selector
        var quantityEl = productFormEl.querySelector('input[name=quantity]');

        // disable quantity selector if found
        if(quantityEl != null){
            // make it readonly
            quantityEl.readOnly = true;
            quantityEl.style.background = '#eeeeee';

        } else {

            // create hidden quantity element
            quantityEl = document.createElement('input');
            quantityEl.type = 'hidden';
            quantityEl.name = 'quantity';

            productFormEl.appendChild(quantityEl);
        }


        productFormEl.addEventListener('upload:added', function (e) {
            // set the quantity to the current fileCounter
            quantityEl.value = uploadField.fileCounter;
        });

        productFormEl.addEventListener('upload:removed', function (e) {
            // set the quantity to the current fileCounter
            quantityEl.value = uploadField.fileCounter;
        });

    });
}