Order status page upload complete order tag

If you have setup your order status page to show an upload field and you are looking for a way to let the customer tell you that he/she finished the uploads follow the instructions below. 

If you do not have already setup the upload field on the order status page visit the following help documentation for the setup of the upload configuration: https://docs.cloudlift.app/article/30-how-can-i-show-the-widget-on-the-order-status-page

Add the following script code in the Settings > Checkout > "Additional script" input box.  

You are free to modify the script to fit your specific use case. 

<script>
    /* text config */
    var text = {
        "submit": "Submit files",
        "success": "Files received",
        "error": "There was an error, please try again"
    };

    {% assign order_upload = true %} /* control if this order requires file uploads */
    {% assign order_upload_validate = true %} /* control if the upload field should be validated before submitting */

    {%- if order_upload -%}
    Shopify.Checkout.OrderStatus.addContentBox(
        {% unless order.tags contains 'upload-complete' %}'<div class="upload-order" data-order-number="{{ order_number }}" data-order-id="{{ order_id }}" data-order-name="{{ order_name }}"></div>' + {% endunless %}
        '<div class="upload-submit {% if order.tags contains 'upload-complete' %}success{% endif %}"><button class="btn" data-upload-validate="{{ order_upload_validate}}" data-order-id="{{ order_id }}">'+text['submit']+'</button><p class="msg-success">'+text['success']+'</p><p class="msg-error">'+text['error']+'</p></div>'
    );
    {% endif %}
</script>

<script>
    // wait for the upload widget to be ready
    window.addEventListener('cloudlift.upload.ready', function(e) {

        // check if the order has a upload submit element
        var uploadSubmitEl = document.querySelector('.upload-submit button');

        if(uploadSubmitEl != null){

            uploadSubmitEl.addEventListener('click', function(e){

                var button = e.target;
                button.disabled = "disabled"; // disable button to avoid double submit

                var valid = true;

                var uploadField;
                // check all upload fields found on this page
                for (let i = 0; i < window.Cloudlift.upload.App.fields.length; i++) {
                    uploadField = window.Cloudlift.upload.App.fields[i];
                    // custom attribute to enable validation
                    if(e.target.dataset.uploadValidate && e.target.dataset.uploadValidate !== 'false'){
                        var fieldValid = uploadField.validate();

                        // set invalid if one field is not valid
                        if(valid && !fieldValid){
                            valid = false;
                        }
                    }
                }

                if(valid){
                    var button = e.target;
                    var submitDiv = button.parentNode;

                    // order parameters
                    var params = {};
                    params.orderId = button.dataset.orderId;

                    // tag the order with the "upload-complete" tag
                    uploadField.tag('upload-complete', params).then( function(data) {

                        // add classes to show message
                        if(submitDiv.classList){
                            submitDiv.classList.remove('error');
                            submitDiv.classList.add('success');
                        }

                        button.disabled = "";

                        // optional: destroy all upload fields to prevent removing of the uploads after submit
                        for (let i = 0; i < window.Cloudlift.upload.App.fields.length; i++) {
                            window.Cloudlift.upload.App.fields[i].destroy();
                        }

                    }).catch(function(error) {
                        if(submitDiv.classList){
                            submitDiv.classList.remove('success');
                            submitDiv.classList.add('error');
                        }

                        button.disabled = "";
                    });
                } else {
                   button.disabled = "";
                }

            });
        }
    });
</script>

<script src="https://assets.cloudlift.app/api/assets/upload.js?shop={{ shop.permanent_domain }}"></script>

<style>
    .upload-order .filepond--root {
        height: 100%;
        max-height: 430px;
    }
    .upload-submit .btn {
        display: block;
        margin: auto;
        margin-top: 1em;
        min-width: 50%;
        background-color: #1ebd40;
    }
    .upload-submit .msg-error {
        color:red;
    }
    .upload-submit .msg-success {
        color: #1ebd40;
    }
    .upload-submit .msg-error, .upload-submit .msg-success {
        text-align: center;
        margin-top: 1em;
        font-size: 16px;
    }
    .upload-submit .msg-error, .upload-submit .msg-success {
        display:none;
    }
    .upload-submit.error .msg-error,  .upload-submit.success .msg-success {
        display:block;
    }
    .upload-submit.success .btn {
        display:none;
    }
</style>

If you need further assistance, please send us a request and we will be happy to help you out.