Change quantity to match number of uploaded files

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

    });
}


If you need further assistance, please send us a request and we will be happy to help you out.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.