<div class="bootstrap-iso">
    <div class="popover-markup419">
        <button type="button"
             class="trigger btn btn-default">Upload Files</button>
                <div class="head hide">
            <button type="button"
                    class="btn btn-default btn-md pull-right trigger419"
                    disabled="disabled">
                Send            </button>

        </div>
        <div class="content hide">
            <div name="wooFileDropzoneForm419"
                 id="wooFileDropzoneForm419"
                 class="dropzone"
                 style="
                         height: 250px;
                         width: 250px;
                         overflow-y: auto;
                         overflow-x: hidden;
                         text-align: center;">
                <p class="already-uploaded-msg" style="display:none">
                    All Set, Your files are received                </p>
                <div class="form-group fields-div">
                    <input type="hidden" id="woo_file_dropzone_upload_nonce" name="woo_file_dropzone_upload_nonce" value="2feee3d0ee" /><input type="hidden" name="_wp_http_referer" value="/index.php?rest_route=%2Fwp%2Fv2%2Fproduct%2F419" />                    <input type='text' placeholder='Hold file' name='woo_file_dropzone_field_1' id='woo_file_dropzone_field_1' class='form-control wcfu-textfield' data-validation='required' />                </div>
                <div class="form-group">
                    <input type="file" name="file" class="hide">
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var isFileUploadMandatory = "";
    var isFileAlreadyUploadedForThisProduct = "";
    var productID = "419";
    var wooDropFilesAjaxUrl = "https://cseprops.com/wp-admin/admin-ajax.php";
    var popupoverPostion = "right";
    var maxFileSize = 5;
    var allowedFileTypes = ".jpg,.png,.gif";
    var allowedNumberOfFiles = 5;
    var messageAllowedNumberOfFiles = "Drop files here and press Send. You can upload " + allowedNumberOfFiles + " file(s)";
    var sendDataObject = {
        'action': 'woo_file_dropzone_user_ajax_actions',
        'do_action': 'uploadFile',
        'woo_file_dropzone_upload_nonce': jQuery('input[name="woo_file_dropzone_upload_nonce"]').val()
    };

    jQuery(document).ready(function ($) {
        Dropzone.autoDiscover = false;
        if (isFileUploadMandatory == "1") {
            if (isFileAlreadyUploadedForThisProduct !== "1") {
                $('.single_add_to_cart_button')
                    .attr('disabled', true)
                    .attr('title', 'Please upload file before adding to cart');
            }

            $(".variations_form").on("woocommerce_variation_has_changed", function (e) {

                if ($('input[name="variation_id"][type="hidden"]').length) {
                    $('.trigger').attr('disabled', 'disabled');
                    if ($('input[name="variation_id"][type="hidden"]').val() !== '') {
                        $('.trigger').removeAttr('disabled');
                    }
                    if ($('.woo_file_dropzone_file_sent' + productID).length) {
                        $('.single_add_to_cart_button')
                            .attr('disabled', true)
                            .attr('title', 'Please upload file before adding to cart');
                        $('.woo_file_dropzone_file_sent' + productID)
                            .each(function (i, v) {
                                if ($(this).val() == $('input[name="variation_id"][type="hidden"]').val()) {
                                    $('.single_add_to_cart_button').removeAttr('disabled');
                                    return false;
                                }
                            });
                    } else {
                        $('.single_add_to_cart_button')
                            .attr('disabled', true)
                            .attr('title', 'Please upload file before adding to cart');
                    }
                }
            });
        }

        $(".popover-markup" + productID + " >.trigger")
            .popover(
                {
                    html: true,
                    title: function () {
                        return $(this).parent().find('.head').html();
                    },
                    content: function () {
                        return $(this).parent().find('.content').html();
                    },
                    placement: popupoverPostion
                }
            )
            .on('shown.bs.popover', function () {
                $('.fields-div').show();
                $(".trigger" + productID).removeClass('hide');
                $('#wooFileDropzoneForm' + productID).dropzone({
                    url: wooDropFilesAjaxUrl,
                    maxFilesize: maxFileSize,
                    addRemoveLinks: true,
                    params: sendDataObject,
                    acceptedFiles: allowedFileTypes,
                    maxFiles: allowedNumberOfFiles,
                    autoProcessQueue: false,
                    parallelUploads: allowedNumberOfFiles,
                    uploadMultiple: true,
                    dictDefaultMessage: messageAllowedNumberOfFiles,
                    init: function () {
                        var self = this;
                        var variation_id = null;
                        if ($('input[name="variation_id"][type="hidden"]').length) {
                            $('.woo_file_dropzone_file_sent' + productID).each(function () {
                                if ($(this).val() == $('input[name="variation_id"][type="hidden"]').val()) {
                                    $('.dz-message').text('Loading...');
                                    $.ajax({
                                        url: wooDropFilesAjaxUrl,
                                        type: 'POST',
                                        dataType: 'JSON',
                                        data: {
                                            'action': 'woo_file_dropzone_user_ajax_actions',
                                            'do_action': 'getUploadedFiles',
                                            'woo_file_dropzone_upload_nonce': jQuery('input[name="woo_file_dropzone_upload_nonce"]').val(),
                                            'product_id': productID,
                                            'variation_id': jQuery('input[name="variation_id"][type="hidden"]').val(),
                                        },
                                        success: function (resp) {
                                            $.map(resp.file_urls, function (uri) {
                                                var mockFile = {
                                                    name: uri,
                                                    size: 12345,
                                                    type: 'image/png'
                                                };
                                                self.addFile.call(self, mockFile);
                                                self.options.thumbnail.call(self, mockFile, resp.image_uri + uri);
                                                mockFile.previewElement.classList.add('dz-success');
                                                mockFile.previewElement.classList.add('dz-complete');
                                            });
                                        }
                                    });
                                    return false;
                                }
                                //Set the message to upload files
                                else {
                                    $('.dz-message').text(messageAllowedNumberOfFiles).show();
                                }

                            });
                        }
                        else if ($('.woo_file_dropzone_file_sent' + productID).length) {
                            $('.dz-message').text('Loading...');
                            $.ajax({
                                url: wooDropFilesAjaxUrl,
                                type: 'POST',
                                dataType: 'JSON',
                                data: {
                                    'action': 'woo_file_dropzone_user_ajax_actions',
                                    'do_action': 'getUploadedFiles',
                                    'woo_file_dropzone_upload_nonce': jQuery('input[name="woo_file_dropzone_upload_nonce"]').val(),
                                    'product_id': productID,
                                    'variation_id': jQuery('input[name="variation_id"][type="hidden"]').val(),
                                },
                                success: function (resp) {
                                    $.map(resp.file_urls, function (uri) {
                                        var mockFile = {
                                            name: uri,
                                            size: 12345,
                                            type: 'image/png'
                                        };
                                        self.options.addedfile.call(self, mockFile);
                                        self.options.thumbnail.call(self, mockFile, resp.image_uri + uri);
                                        mockFile.previewElement.classList.add('dz-success');
                                        mockFile.previewElement.classList.add('dz-complete');
                                    });
                                }
                            });

                        }
                        this.on('removedfile', function (file) {
                            $('.trigger' + productID).attr('disabled', 'disabled');
                            if ($(".woo_file_dropzone_file_sent" + productID).length) {
                                var deleteFileRequest = {
                                    'action': 'woo_file_dropzone_user_ajax_actions',
                                    'do_action': 'deleteUploadedFile',
                                    'woo_file_dropzone_upload_nonce': jQuery('input[name="woo_file_dropzone_upload_nonce"]').val(),
                                    'product_id': productID,
                                    'variation_id': "0",
                                    'fileName': file.name
                                };
                                // variation available then get value of variation and send
                                var varitionIdValue = jQuery('input[name="variation_id"][type="hidden"]').val();
                                if ( typeof  varitionIdValue !== 'undefined') {
                                    deleteFileRequest.variation_id = varitionIdValue;
                                }
                                $.ajax({
                                    url: wooDropFilesAjaxUrl,
                                    type: 'POST',
                                    dataType: 'JSON',
                                    data: deleteFileRequest,
                                    success: function (resp) {
                                        if (deleteFileRequest.variation_id !== '0') {
                                            $(".woo_file_dropzone_file_sent" + productID + "[value='" + deleteFileRequest.variation_id + "']").remove();
                                        } else {
                                            $(".woo_file_dropzone_file_sent" + productID).remove();
                                        }

                                        if (self.files.length) {
                                            $('.trigger' + productID).removeAttr('disabled');
                                        }
                                    }
                                });
                            }
                            //if there last file remove then add message to add more files
                            if (!this.files.length) {
                                $('.dz-message').text(messageAllowedNumberOfFiles).show();
                            }
                            var _ref;
                            return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
                        });

                        this.on("addedfile", function (file) {
                            $('.trigger' + productID).removeAttr('disabled');
                        });

                        this.on("maxfilesexceeded", function (file) {
                            this.removeFile(file);
                        });

                        if ($('input[name="variation_id"][type="hidden"]').val() != '') {
                            variation_id = $('input[name="variation_id"][type="hidden"]').val();
                        }
                        sendDataObject.variation_id = variation_id;
                        sendDataObject.product_id = productID;
                        $(document).on('click', ".trigger" + productID, function () {
                            var _innerFieldsReturn = false;
                            // Textfield if required then empty check
                            if ($('input[id^="woo_file_dropzone_field_"]:visible').length) {
                                $('input[id^="woo_file_dropzone_field_"]:visible').each(function (i, v) {
                                    if ($(this).attr('data-validation') == 'required') {
                                        if ($(this).val() == '') {
                                            $(this).focus();
                                            _innerFieldsReturn = true;
                                            return true;
                                        }
                                    }
                                });
                            }
                            // Textarea if required then empty check
                            if ($('textarea[id^="woo_file_dropzone_field_"]:visible').length) {
                                $('textarea[id^="woo_file_dropzone_field_"]:visible').each(function (i, v) {
                                    if ($(this).attr('data-validation') == 'required') {
                                        if ($.trim($(this).val()) == '') {
                                            $(this).focus();
                                            _innerFieldsReturn = true;
                                            return true;
                                        }
                                    }
                                });
                            }

                            if (_innerFieldsReturn) {
                                return true;
                            }
                            $(this).attr('disabled', 'disabled');
                            var fields = new Object();
                            //Get field values
                            // Textfield
                            if ($('input[id^="woo_file_dropzone_field_"]:visible').length) {
                                $('input[id^="woo_file_dropzone_field_"]:visible').each(function (i, v) {
                                    fields[$(this).attr('name')] = $(this).val();
                                });
                            }
                            // Textarea
                            if ($('textarea[id^="woo_file_dropzone_field_"]:visible').length) {
                                $('textarea[id^="woo_file_dropzone_field_"]:visible').each(function (i, v) {
                                    fields[$(this).attr('name')] = $(this).val();
                                });
                            }
                            sendDataObject.fields = JSON.stringify(fields);
                            self.processQueue();
                            var isServerErrorOccurred = false;
                            self.on("success", function (file, response) {
                                if (response.success === false) { // failed
                                    isServerErrorOccurred = true;
                                    var node, _i, _len, _ref, _results;
                                    var message = '';
                                    $(response.errors).each(function (i, errMsg) {
                                        message += errMsg;
                                    });
                                    file.previewElement.classList.add("dz-error");
                                    _ref = file.previewElement.querySelectorAll("[data-dz-errormessage]");
                                    _results = [];
                                    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
                                        node = _ref[_i];
                                        _results.push(node.textContent = message);
                                    }
                                    return _results;
                                }
                            });
                            self.on("completemultiple", function () {
                                if (isServerErrorOccurred) {
                                    return true;
                                }
                                $('.single_add_to_cart_button').removeAttr('disabled');
                                $("<input type='hidden' class='woo_file_dropzone_file_sent" + productID + "' value='" + variation_id + "'/>")
                                    .insertBefore(".trigger");
                                $(".trigger" + productID).addClass('hide');
                                $(".popover-markup" + productID + " >.trigger").popover('hide');
                            })
                        })
                    }
                });
            });
    });
</script>{"id":419,"date":"2018-01-03T15:53:14","date_gmt":"2018-01-03T15:53:14","guid":{"rendered":"http:\/\/cseprops.com\/?post_type=product&#038;p=419"},"modified":"2018-01-03T18:54:20","modified_gmt":"2018-01-03T18:54:20","slug":"419","status":"publish","type":"product","link":"https:\/\/cseprops.com\/?product=419","title":{"rendered":"Customize Your Own Heads Up 3\/4 Length Adult"},"content":{"rendered":"<p>Adult 3\/4 length Size Heads Up. Made of Glare reducing PVC. Durable, yet Light weight<br \/>\nThe Size of this Product will vary with Picture Provided. The Cut will be made<br \/>\naccording approximately in same location, all cuts vary. Size approx 24&#8243; x 24&#8243; <\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Adult 3\/4 length Size Heads Up. Made of Glare reducing PVC. Durable, yet Light weight The Size of this Product will vary with Picture Provided. The Cut will be made according approximately in same location, all cuts vary. Size approx 24&#8243; x 24&#8243;<\/p>\n","protected":false},"featured_media":418,"comment_status":"open","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/cseprops.com\/index.php?rest_route=\/wp\/v2\/product\/419"}],"collection":[{"href":"https:\/\/cseprops.com\/index.php?rest_route=\/wp\/v2\/product"}],"about":[{"href":"https:\/\/cseprops.com\/index.php?rest_route=\/wp\/v2\/types\/product"}],"replies":[{"embeddable":true,"href":"https:\/\/cseprops.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=419"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cseprops.com\/index.php?rest_route=\/wp\/v2\/media\/418"}],"wp:attachment":[{"href":"https:\/\/cseprops.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=419"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}