{"id":10251,"date":"2024-06-27T03:45:20","date_gmt":"2024-06-27T03:45:20","guid":{"rendered":"https:\/\/face26.com\/?page_id=10251"},"modified":"2024-07-08T06:42:16","modified_gmt":"2024-07-08T06:42:16","slug":"unggahan-khusus","status":"publish","type":"page","link":"https:\/\/face26.com\/id\/custom-upload\/","title":{"rendered":"Unggahan Khusus"},"content":{"rendered":"<form id=\"file-upload-form\">\n    <div class=\"drop-zone\">\n        <div class=\"wm_custom_upload_box\">\n            <div class=\"drop-zone__prompt\">\n                <div class=\"wm_custom_svg_icon_box\">\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"><\/g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/g><g id=\"SVGRepo_iconCarrier\"> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8 10C8 7.79086 9.79086 6 12 6C14.2091 6 16 7.79086 16 10V11H17C18.933 11 20.5 12.567 20.5 14.5C20.5 16.433 18.933 18 17 18H16C15.4477 18 15 18.4477 15 19C15 19.5523 15.4477 20 16 20H17C20.0376 20 22.5 17.5376 22.5 14.5C22.5 11.7793 20.5245 9.51997 17.9296 9.07824C17.4862 6.20213 15.0003 4 12 4C8.99974 4 6.51381 6.20213 6.07036 9.07824C3.47551 9.51997 1.5 11.7793 1.5 14.5C1.5 17.5376 3.96243 20 7 20H8C8.55228 20 9 19.5523 9 19C9 18.4477 8.55228 18 8 18H7C5.067 18 3.5 16.433 3.5 14.5C3.5 12.567 5.067 11 7 11H8V10ZM15.7071 13.2929L12.7071 10.2929C12.3166 9.90237 11.6834 9.90237 11.2929 10.2929L8.29289 13.2929C7.90237 13.6834 7.90237 14.3166 8.29289 14.7071C8.68342 15.0976 9.31658 15.0976 9.70711 14.7071L11 13.4142V19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19V13.4142L14.2929 14.7071C14.6834 15.0976 15.3166 15.0976 15.7071 14.7071C16.0976 14.3166 16.0976 13.6834 15.7071 13.2929Z\" fill=\"#483CA3\"><\/path> <\/g><\/svg>\n                <\/div>\n                <p><b>Drag & drop files or <span class=\"wm_highlights wm_underline\">Browse<\/span><\/b><\/p>\n                <p class=\"wm_subtext\">Supported formates: JPG, JPEG, PNG<\/p>\n            <\/div>\n            <input type=\"hidden\" id=\"base64_img\" name=\"base64_img\">\n            <input type=\"file\" name=\"myFile\" class=\"drop-zone__input\" id=\"upload_file\" accept=\"image\/*\">\n        <\/div>\n        <div class=\"loader_box wm_none\">\n            <img decoding=\"async\" src=\"https:\/\/face26.com\/wp-content\/plugins\/wm-custom-upload\/assets\/img\/new_loader.gif\" alt=\"\" title=\"\">\n        <\/div>\n    <\/div>\n<\/form>\n<style>\n.drop-zone {max-width: 450px;height: 260px;margin: 0 auto;padding: 25px;display: flex;align-items: center;justify-content: center;text-align: center;\n    font-weight: 500;font-size: 20px;cursor: pointer;color: #000;border: 4px dashed #AFB7E0;border-radius: 10px;}\n.wm_highlights{color: #473EA8;}\n.wm_underline{text-decoration: underline}\n.wm_subtext{font-size: 13px;color: light gray !important;}\n.drop-zone--over {border-style: solid;}\n.drop-zone__input {display: none;}\n.drop-zone__thumb {width: 100%;height: 100%;border-radius: 10px;overflow: hidden;background-color: #cccccc;background-size: cover;position: relative;}\n.drop-zone__thumb::after {content: attr(data-label);position: absolute;bottom: 0;left: 0;width: 100%;padding: 5px 0;color: #ffffff;background: rgba(0, 0, 0, 0.75);\n    font-size: 14px;text-align: center;}\n.wm_custom_svg_icon_box svg{width: 90px !important;}\n.loader_box{width: 100%;display: flex;align-items: center;justify-content: center;text-align: center;}\n.wm_none{display: none !important;}\n.loader_box img{width: 70px !important;}\n<\/style>\n<script>\n    document.addEventListener(\"DOMContentLoaded\", function() {\n    document.querySelectorAll(\".drop-zone__input\").forEach((inputElement) => {\n        const dropZoneElement = inputElement.closest(\".drop-zone\");\n        const form = document.getElementById('file-upload-form');\n        const fileInput = form.querySelector('.drop-zone__input');\n\n        dropZoneElement.addEventListener(\"click\", (e) => {\n            inputElement.click();\n        });\n\n        inputElement.addEventListener(\"change\", (e) => {\n            if (inputElement.files.length) {\n                updateThumbnail(dropZoneElement, inputElement.files[0]);\n                const reader = new FileReader();\n                reader.readAsDataURL(inputElement.files[0]);\n                reader.onload = () => {\n                    const formData = new FormData(form);\n                    formData.append(\"action\", \"upload_file_request\");\n                    uploadFiles(formData);\n                }\n            }\n        });\n\n        dropZoneElement.addEventListener(\"dragover\", (e) => {\n            e.preventDefault();\n            dropZoneElement.classList.add(\"drop-zone--over\");\n        });\n\n        [\"dragleave\", \"dragend\"].forEach((type) => {\n            dropZoneElement.addEventListener(type, (e) => {\n                dropZoneElement.classList.remove(\"drop-zone--over\");\n            });\n        });\n\n        dropZoneElement.addEventListener(\"drop\", (e) => {\n            e.preventDefault();\n\n            if (e.dataTransfer.files.length) {\n                inputElement.files = e.dataTransfer.files;\n                updateThumbnail(dropZoneElement, e.dataTransfer.files[0]);\n                const reader = new FileReader();\n                reader.readAsDataURL(inputElement.files[0]);\n                reader.onload = () => {\n                    const formData = new FormData(form);\n                    formData.append(\"action\", \"upload_file_request\");\n                    uploadFiles(formData);\n                }\n            }\n\n            dropZoneElement.classList.remove(\"drop-zone--over\");\n        });\n    });\n});\n\nfunction updateThumbnail(dropZoneElement, file) {\n    let thumbnailElement = dropZoneElement.querySelector(\".drop-zone__thumb\");\n    jQuery(\".drop-zone__thumb\").addClass(\"wm_none\");\n\n    \/\/ First time - remove the prompt\n    let promptElement = dropZoneElement.querySelector(\".drop-zone__prompt\");\n    if (promptElement) {\n        promptElement.remove();\n    }\n\n    \/\/ Create thumbnail element if it doesn't exist\n    if (!thumbnailElement) {\n        thumbnailElement = document.createElement(\"div\");\n        thumbnailElement.classList.add(\"drop-zone__thumb\");\n        dropZoneElement.appendChild(thumbnailElement);\n    }\n\n    thumbnailElement.dataset.label = file.name;\n\n    \/\/ Show thumbnail for image files\n    if (file.type.startsWith(\"image\/\")) {\n        const reader = new FileReader();\n\n        reader.readAsDataURL(file);\n        reader.onload = () => {\n            thumbnailElement.style.backgroundImage = `url('${reader.result}')`;\n        };\n    } else {\n        thumbnailElement.style.backgroundImage = null;\n    }\n}\nfunction uploadFiles(formData) {\n    jQuery(\".drop-zone__input\").attr(\"disabled\", true);\n    jQuery(\".wm_custom_upload_box\").addClass(\"wm_none\");\n    jQuery(\".drop-zone__thumb\").addClass(\"wm_none\");\n    jQuery(\".loader_box\").removeClass(\"wm_none\");\n    jQuery.ajax({\n        url: wm_custom_upload_ajax_object.ajax_url,\n        type: 'post',\n        dataType: 'json',\n        data: formData,\n        processData: false,\n        contentType: false,\n        success: function (data) {\n            if(data.status == 1) {\n                window.location.href = 'https:\/\/app.face26.com?imageId='+data.imageId+'&uuid='+data.uuid;\n                jQuery(\".drop-zone__input\").attr(\"disabled\", false);\n                jQuery(\".wm_custom_upload_box\").removeClass(\"wm_none\");\n                jQuery(\".drop-zone__thumb\").removeClass(\"wm_none\");\n                jQuery(\".loader_box\").addClass(\"wm_none\");\n            } else if(data.status == 0) {\n                Notify(data.message, \"error\");\n            } else {\n                Notify(data.message, \"Somthing was wrong please try again\");\n            }\n        }\n    });\n}\n\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":22,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10251","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/face26.com\/id\/wp-json\/wp\/v2\/pages\/10251","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/face26.com\/id\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/face26.com\/id\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/face26.com\/id\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/face26.com\/id\/wp-json\/wp\/v2\/comments?post=10251"}],"version-history":[{"count":0,"href":"https:\/\/face26.com\/id\/wp-json\/wp\/v2\/pages\/10251\/revisions"}],"wp:attachment":[{"href":"https:\/\/face26.com\/id\/wp-json\/wp\/v2\/media?parent=10251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}