image-preview-stack.json

{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-8 control-section\">\n    <div class=\"control_wrapper\">\n        <!-- Initialize Uploader -->\n        <div id=\"dropArea\" style=\"height: auto; overflow: auto\">\n            <span id=\"drop\"> Drop image (JPG, PNG) files here or <a href id=\"browse\"><u>Browse</u></a></span>\n            <input type=\"file\" name=\"UploadFiles\" id=\"fileupload\">\n        </div>\n    </div>\n</div>\n\n<div class=\"col-lg-4 property-section\">\n    <div id=\"property\" title=\"Properties\">\n        <div style=\"margin-left: 50px; padding-top:25px;\">\n            <button class=\"e-btn e-css\" id=\"clearbtn\" title=\"Clear All\" style=\"width:130px\">Clear All</button>\n        </div>\n        <div style=\"margin-left: 50px; padding-top:25px;\">\n            <button class=\"e-btn e-css\" id=\"uploadbtn\" title=\"Upload All\" style=\"width:130px\">Upload All</button>\n        </div>\n    </div>\n</div>\n\n<style>\n     .control_wrapper {\n        max-width: 505px;\n        margin: auto;\n    }\n    #uploadicon {    \n        cursor: pointer;\n        top: 5px;\n        left: 20px;\n        position: relative;\n    }\n    .e-file-select-wrap {\n        display: none;\n    }\n    .e-upload {\n        border: none;\n        margin-top: 10px;\n        width: 100%;\n    }\n    #drop {\n        font-size: 14px;\n    }\n    .e-bigger #drop {\n        font-size: 15px;\n    }\n    #dropArea {\n        border: 1px dashed #c3c3cc;\n        position: relative;\n        text-align: center;\n        padding: 20px 0 10px;\n    }\n    #dropArea .e-upload .e-upload-files {\n        text-align: initial;\n        border-top: none;\n    }\n    #dropArea .e-upload-files .e-file-delete-btn.e-icons,\n    #dropArea .e-upload-files .e-file-remove-btn.e-icons,\n    #dropArea .e-upload-files .e-file-abort-btn {\n        top: 120px;\n        background-color: white;\n        border-radius: 50%;\n        font-size: 12px;\n        left: 80px;\n    }\n    #dropArea .e-upload-files li .e-file-remove-btn.e-icons.e-upload-icon {\n        font-size: 14px;\n        left: 20px;\n    }\n    #dropArea .e-upload-files li:hover .e-icons {\n        visibility: visible;\n    }\n    #dropArea .e-upload-files li .e-icons {\n        visibility: hidden;\n    }\n    @font-face {\n        font-family: 'Uploader_Icon';\n        src:\n        url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1tSfIAAAEoAAAAVmNtYXDnEOdVAAABiAAAADZnbHlmoZcPvgAAAcgAAABAaGVhZBLQTSUAAADQAAAANmhoZWEINQQDAAAArAAAACRobXR4CAAAAAAAAYAAAAAIbG9jYQAgAAAAAAHAAAAABm1heHABDgAdAAABCAAAACBuYW1lQySinQAAAggAAAIxcG9zdLfl0usAAAQ8AAAAMgABAAAEAAAAAFwEAAAAAAAD2AABAAAAAAAAAAAAAAAAAAAAAgABAAAAAQAA2vKJUF8PPPUACwQAAAAAANftBBgAAAAA1+0EGAAAAAAD2AP4AAAACAACAAAAAAAAAAEAAAACABEAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAAQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACIAAAAEAAQAAQAA5wD//wAA5wD//wAAAAEABAAAAAEAAAAAAAAAIAAAAAIAAAAAA9gD+AAHABAAADchESMVITUjEzM3ETMRFzMBKAOwPvzMPp1mtUC1Zv7FCAF6vb0BO7X+EAHwtQE7AAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAgAAQABAAAAAAACAAcACQABAAAAAAADAAgAEAABAAAAAAAEAAgAGAABAAAAAAAFAAsAIAABAAAAAAAGAAgAKwABAAAAAAAKACwAMwABAAAAAAALABIAXwADAAEECQAAAAIAcQADAAEECQABABAAcwADAAEECQACAA4AgwADAAEECQADABAAkQADAAEECQAEABAAoQADAAEECQAFABYAsQADAAEECQAGABAAxwADAAEECQAKAFgA1wADAAEECQALACQBLyBVcGxvYWRlclJlZ3VsYXJVcGxvYWRlclVwbG9hZGVyVmVyc2lvbiAxLjBVcGxvYWRlckZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAVQBwAGwAbwBhAGQAZQByAFIAZQBnAHUAbABhAHIAVQBwAGwAbwBhAGQAZQByAFUAcABsAG8AYQBkAGUAcgBWAGUAcgBzAGkAbwBuACAAMQAuADAAVQBwAGwAbwBhAGQAZQByAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIBAgEDAAhVcGxvYWRlcgAAAAA=) format('truetype');\n        font-weight: normal;\n        font-style: normal;\n    }\n    #dropArea .e-upload .e-upload-files .e-icons.e-upload-icon {\n        font-family: 'Uploader_Icon';\n        speak: none;\n        font-size: 16px;\n        left: 20px;\n        font-style: normal;\n        font-weight: normal;\n        font-variant: normal;\n        text-transform: none;\n        line-height: 1;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n    }\n    #dropArea .e-upload .e-upload-files .e-icons.e-upload-icon::before { \n      content: '\\e700';\n    }\n    #dropArea .e-upload .e-upload-files .e-icons:not(.e-uploaded):hover{\n        background-color: #e6e6e6;\n        border-color: #adadad;\n        color: #333;\n    }\n    .highcontrast #dropArea .e-upload-files .e-file-remove-btn.e-icons,\n    .highcontrast #dropArea .e-upload-files .e-file-delete-btn.e-icons {\n        background-color: #ffd939;\n    }\n    .highcontrast #dropArea .e-upload .e-upload-files .e-file-delete-btn.e-icons::before,\n    .highcontrast #dropArea .e-upload .e-upload-files .e-file-remove-btn.e-icons::before{\n        color: black;\n    }\n    #dropArea .e-upload .e-upload-files .e-upload-file-list {\n        border: 0;\n        display: inline-block;\n        width: 165px;\n    }\n    .upload-image {\n        width: 150px;\n        height: 150px;\n        display: inline-flex;\n        background-size: contain;\n        margin: 7px;\n        text-align: center;\n        line-height: 10;\n        border-radius: 5px;\n    }\n    .upload-image:after {\n        content: \"\";\n        position: absolute;\n        top: 6px;\n        left: 6px;\n        width: inherit;\n        height: inherit;\n        background: lightgray url('http://via.placeholder.com/300?text=Loading...') no-repeat center;\n        color: transparent;\n        border-radius: 5px;\n    }\n    .highcontrast div.file-name {\n        color: white;\n    }\n    div.file-name {\n        color: rgba(0, 0, 0, 0.87);\n        font-size: 14px;\n        padding: 3px 10px;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 90%;\n        white-space: nowrap;\n    }\n    .highcontrast div.file-size {\n        color: white;\n    }\n    div.file-size {\n        font-size: 13px;\n        padding: 3px 10px;\n        overflow: hidden;\n    }\n    .progressbar {\n        background: #ff4081;\n        border: none;\n        border-radius: 10px;\n        height: 4px;\n        margin-left: 7px;\n        width: 90%;\n        top: -60px;\n        position: relative;\n    }\n    #dropArea progress {\n        border: none;\n        background: #fff;\n   }\n   .highcontrast #dropArea progress {\n        border: none;\n        background: black;\n   }\n    progress::-webkit-progress-bar {\n        border: none;\n        background-color: #ffffff;\n    }\n    .highcontrast progress::-webkit-progress-bar {\n        border: none;\n        background-color: #000000;\n    }\n    .material progress::-webkit-progress-value {\n        border-radius: 2px; \n        background-color: #ff4081;\n    }\n    .bootstrap progress::-webkit-progress-value {\n        border-radius: 2px; \n        background-color: #1f496e;\n    }\n    .fabric progress::-webkit-progress-value {\n        background-color: #1763ff;\n        border-radius: 2px; \n        top: -66px;\n    }\n    .highcontrast progress::-webkit-progress-value {\n        background-color: #ffd939;\n        border-radius: 2px; \n    }\n    .material progress::-moz-progress-bar {\n        border-radius: 2px; \n        background-color: #ff4081;\n    }\n    .bootstrap progress::-moz-progress-bar {\n        border-radius: 2px; \n        background-color: #1f496e;\n    }\n    .fabric progress::-moz-progress-bar {\n        background-color: #1763ff;\n        border-radius: 2px; \n        top: -66px;\n    }\n    .highcontrast progress::-moz-progress-bar {\n        background-color: #ffd939;\n        border-radius: 2px; \n    }\n    .material span a {\n        color:#ff4081;\n    }\n    .fabric span a {\n        color: #1763ff;\n    }\n    .bootstrap span a {\n        color: #1f496e;\n    }\n    .highcontrast span a,\n    .highcontrast span a:hover {\n        color: #ffd939;\n    }\n\t@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n\t#dropArea .e-upload .e-upload-files .e-file-remove-btn.e-icons, .e-bigger #dropArea .e-upload .e-upload-files .e-file-remove-btn.e-icons {\n\t   padding: 18px 25px 18px 12px;\n\t}\n\t}\n</style>\n\n\n\n</div></body></html>","index.js":"{{ripple}}\n    var dropElement = document.getElementById('dropArea');\n    var uploadObj = new ej.inputs.Uploader({\n        asyncSettings: { saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',\n        removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'\n        },\n        dropArea: dropElement, selected: onSelect, progress: onFileUpload, success: onUploadSuccess, removing: onFileRemove,\n        failure: onUploadFailed, allowedExtensions: '.jpg,.png,.jpeg', template: 'template'\n    });\n    uploadObj.appendTo('#fileupload');\n\n    var parentElement;\n    var filesName = [];\n    var progressbarContainer;\n    if (ej.base.Browser.isDevice) {\n        document.getElementById('drop').style.padding = '0px 10%';\n    }\n    document.getElementById('browse').onclick = function () {\n        document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();\n        return false;\n    };\n    document.getElementById('clearbtn').onclick = function () {\n        if (!ej.base.isNullOrUndefined(dropElement.querySelector('ul'))) {\n            ej.base.detach(dropElement.querySelector('ul'));\n            uploadObj.filesData = [];\n            uploadObj.fileList = [];\n            filesName = [];\n        }\n    };\n    document.getElementById('uploadbtn').onclick = function () {\n        if (dropElement.querySelector('ul') && uploadObj.getFilesData().length > 0) {\n            uploadObj.upload(uploadObj.getFilesData());\n        }\n    };\n    function onSelect(args) {\n        if (!dropElement.querySelector('li')) {\n            this.filesData = [];\n        }\n        if (ej.base.isNullOrUndefined(document.getElementById('dropArea').querySelector('.e-upload-files'))) {\n            parentElement = ej.base.createElement('ul', { className: 'e-upload-files' });\n            document.getElementsByClassName('e-upload')[0].appendChild(parentElement);\n        }\n        var validFiles = validateFiles(args, this.filesData);\n        if (validFiles.length === 0) {\n            args.cancel = true;\n            return;\n        }\n        for (var i = 0; i < validFiles.length; i++) {\n            formSelectedData(validFiles[i], this);\n        }\n        this.filesData = this.filesData.concat(validFiles);\n        args.cancel = true;\n    }\n    function validateFiles(args, viewedFiles) {\n        var modifiedFiles = [];\n        var validFiles = [];\n        var isModified = false;\n        if (args.event.type === 'drop') {\n            isModified = true;\n            var allImages = ['png', 'jpg', 'jpeg'];\n            var chooseFiles = args.filesData;\n            for (var i = 0; i < chooseFiles.length; i++) {\n                var selectFile = chooseFiles[i];\n                if (allImages.indexOf(selectFile.type) !== -1) {\n                    modifiedFiles.push(selectFile);\n                }\n            }\n        }\n        var files = modifiedFiles.length > 0 || isModified ? modifiedFiles : args.filesData;\n        if (filesName.length > 0) {\n            for (var j = 0; j < files.length; j++) {\n                var file = files[j];\n                if (filesName.indexOf(file.name) === -1) {\n                    filesName.push(file.name);\n                    validFiles.push(file);\n                }\n            }\n        } else {\n            for (var k = 0; k < files.length; k++) {\n                var validFile = files[k];\n                filesName.push(validFile.name);\n                validFiles.push(validFile);\n            }\n        }\n        return validFiles;\n    }\n    function formSelectedData(file, proxy) {\n        var liEle = ej.base.createElement('li', { className: 'e-upload-file-list', attrs: { 'data-file-name': file.name } });\n        var imageTag = ej.base.createElement('IMG', { className: 'upload-image', attrs: { 'alt': 'Image' } });\n        var wrapper = ej.base.createElement('span', { className: 'wrapper' });\n        wrapper.appendChild(imageTag);\n        liEle.appendChild(wrapper);\n        liEle.appendChild(ej.base.createElement('div', { className: 'name file-name', innerHTML: file.name, attrs: { 'title': file.name } }));\n        liEle.appendChild(ej.base.createElement('div', { className: 'file-size', innerHTML: proxy.bytesToSize(file.size) }));\n        var clearbtn;\n        var uploadbtn;\n        clearbtn = ej.base.createElement('span', { id: 'removeIcon', className: 'e-icons e-file-remove-btn', attrs: { 'title': 'Remove' } });\n        ej.base.EventHandler.add(clearbtn, 'click', removeFiles, proxy);\n        liEle.setAttribute('title', 'Ready to Upload');\n        uploadbtn = ej.base.createElement('span', { className: 'e-upload-icon e-icons e-file-remove-btn', attrs: { 'title': 'Upload' } });\n        uploadbtn.setAttribute('id', 'iconUpload');\n        ej.base.EventHandler.add(uploadbtn, 'click', uploadFile, proxy);\n        progressbarContainer = ej.base.createElement('progress', { className: 'progressbar', id: 'progressBar', attrs: { value: '0', max: '100' } });\n        liEle.appendChild(clearbtn);\n        liEle.appendChild(uploadbtn);\n        liEle.appendChild(progressbarContainer);\n        readURL(liEle, file);\n        document.querySelector('.e-upload-files').appendChild(liEle);\n        proxy.fileList.push(liEle);\n    }\n    function uploadFile(args) {\n        uploadObj.upload([this.filesData[this.fileList.indexOf(args.currentTarget.parentElement)]]);\n    }\n    function removeFiles(args) {\n        var removeFile = this.filesData[this.fileList.indexOf(args.currentTarget.parentElement)];\n        var statusCode = removeFile.statusCode;\n        if (statusCode === '2' || statusCode === '1') {\n            this.remove(removeFile);\n            filesName.splice(filesName.indexOf(removeFile.name), 1);\n            uploadObj.element.value = '';\n        }\n    }\n    function onFileUpload(args) {\n        var li = document.getElementById('dropArea').querySelector('[data-file-name=\"' + args.file.name + '\"]');\n        var iconEle = li.querySelector('#iconUpload');\n        iconEle.style.cursor = 'not-allowed';\n        iconEle.classList.add('e-uploaded');\n        ej.base.EventHandler.remove(li.querySelector('#iconUpload'), 'click', uploadFile);\n        var progressValue = Math.round((args.e.loaded / args.e.total) * 100);\n        if (!isNaN(progressValue) && li.querySelector('.progressbar')) {\n            li.getElementsByTagName('progress')[0].value = progressValue;\n        }\n    }\n    function onUploadSuccess(args) {\n        var _this = this;\n        var spinnerElement = document.getElementById('dropArea');\n        var li = document.getElementById('dropArea').querySelector('[data-file-name=\"' + args.file.name + '\"]');\n        if (li && !ej.base.isNullOrUndefined(li.querySelector('.progressbar'))) {\n            li.querySelector('.progressbar').style.visibility = 'hidden';\n        }\n        if (args.operation === 'upload') {\n            ej.base.EventHandler.remove(li.querySelector('#iconUpload'), 'click', uploadFile);\n            li.setAttribute('title', args.e.currentTarget.statusText);            \n            li.querySelector('.file-name').style.color = 'green';\n            li.querySelector('.e-icons').onclick = function () { generateSpinner(_this.uploadWrapper); };\n        }\n        else {\n            if(!ej.base.isNullOrUndefined(spinnerElement)) {\n                ej.popups.hideSpinner(spinnerElement);\n                ej.base.detach(spinnerElement.querySelector('.e-spinner-pane'));\n            }\n        }\n    }\n    function generateSpinner(targetElement) {\n        ej.popups.createSpinner({ target: targetElement, width: '25px' });\n        ej.popups.showSpinner(targetElement);\n    }\n    function onUploadFailed(args) {\n        var li = document.getElementById('dropArea').querySelector('[data-file-name=\"' + args.file.name + '\"]');\n        li.querySelector('.file-name').style.color = 'red';\n        li.setAttribute('title', args.e.currentTarget.statusText);\n        if (args.operation === 'upload') {\n            ej.base.EventHandler.remove(li.querySelector('#iconUpload'), 'click', uploadFile);\n            li.querySelector('.progressbar').style.visibility = 'hidden';\n        }\n    }\n    function onFileRemove(args) {\n        args.postRawFile = false;\n    }\n    function readURL(li, args) {\n        var preview = li.querySelector('.upload-image');\n        var file = args.rawFile;\n        var reader = new FileReader();\n        reader.addEventListener('load', function () { preview.src = reader.result; }, false);\n        if (file) {\n            reader.readAsDataURL(file);\n        }\n    }\n"}