<div class="bootstrap-iso">
    <div class="popover-markup391">
        <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 trigger391"
                    disabled="disabled">
                Send            </button>

        </div>
        <div class="content hide">
            <div name="wooFileDropzoneForm391"
                 id="wooFileDropzoneForm391"
                 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="fc0355a7ca" /><input type="hidden" name="_wp_http_referer" value="/index.php?rest_route=%2Fwp%2Fv2%2Fproduct%2F391" />                    <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 = "391";
    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":391,"date":"2018-01-02T19:49:46","date_gmt":"2018-01-02T19:49:46","guid":{"rendered":"http:\/\/cseprops.com\/?post_type=product&#038;p=391"},"modified":"2018-01-03T15:13:13","modified_gmt":"2018-01-03T15:13:13","slug":"heads-up-child-size","status":"publish","type":"product","link":"https:\/\/cseprops.com\/?product=heads-up-child-size","title":{"rendered":"Heads Up Child Size"},"content":{"rendered":"<p>Child 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 12&#8243; x 12&#8243; <\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Child Sized<\/p>\n","protected":false},"featured_media":388,"comment_status":"open","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/cseprops.com\/index.php?rest_route=\/wp\/v2\/product\/391"}],"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=391"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cseprops.com\/index.php?rest_route=\/wp\/v2\/media\/388"}],"wp:attachment":[{"href":"https:\/\/cseprops.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}