<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="uploader.aspx.cs" Inherits="GUI.Web.Base.Scripts.tinymce.plugins.wizdomImagePicker.uploader" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="../../../../Bundles/cdnlocal/jquery/2.1.1/jquery.min.js" ></script>
</head>
<body class="bootstrap-wrapper">
    <style type="text/css">
        body, html {
            background-color: transparent !important;
            background: none !important;
            margin: 0;
            overflow: hidden;
            font-family: LatoWeb,"Segoe UI",Segoe,Tahoma,Helvetica,Arial,sans-serif;
        }

        @font-face {
            font-family: 'Glyphicons Regular';
            src: url(../../../../fonts/glyphicons-regular.eot);
            src: url(../../../../fonts/glyphicons-regular.eot?#iefix) format('embedded-opentype'), url(../../../../fonts/glyphicons-regular.woff2) format('woff2'), url(../../../../fonts/glyphicons-regular.woff) format('woff'), url(../../../../fonts/glyphicons-regular.ttf) format('truetype')
        }

        /* custom button behaviour from style.scss */

        .btn-default, .btn-default:focus, .btn-default:visited {
            color: #252423;
            border: 1px solid #BEBBB8;
            background-color: transparent !important;
        }

            .btn-default:active, .btn-default:focus:active, .btn-default:focus:hover, .btn-default:hover, .btn-default:visited:active, .btn-default:visited:hover {
                color: #252423;
                border: 1px solid #BEBBB8;
                background-color: #F4F4F4 !important;
            }

        .btn {
            border-radius: 3px !important;
            line-height: 21px !important;
            padding: 9px 12px !important;
            font-size: 15px !important;
        }

            .btn > i, .btn > span {
                padding-right: 8px;
            }

        .glyphicon {
            position: relative;
            top: 1px;
            display: inline-block;
            font-family: 'Glyphicons Regular';
            font-style: normal;
            font-weight: 400;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale
        }

        .glyphicon-camera:before {
            content: "\e012"
        }

        .glyphicon-picture:before {
            content: "\e129"
        }

        .glyphicon-open:before {
            content: "\e416"
        }

        .uploader-form {
            height: 41px;
        }

        .fileinput-button {
            overflow: hidden;
            position: relative;
        }

            .fileinput-button input {
                -ms-filter: 'alpha(opacity=0)';
                cursor: pointer;
                direction: ltr;
                font-size: 200px;
                margin: 0;
                opacity: 0;
                position: absolute;
                right: 0;
                top: 0;
            }

        .fileupload-hidden-button {
            height: 20px;
            width: 40px;
        }

        .submitfile-hidden-button {
            display: none;
            height: 41px;
        }

        input[type="file"] {
            display: none;
        }

        .custom-file-upload {
            display: inline-block;
            cursor: pointer;
        }

        .fileupload-message-hidden{
          display: none;
        }

        .fileupload-message-visible{
          display: inline-block;
          color: red;
        }
    </style>
    <form id="form1" runat="server" class="uploader-form">

        <span class="fileinput-button">

            <!-- The file input field used as target for the file upload widget -->
            <label for="fileUpload" class="btn btn-default custom-file-upload"><i class="glyphicon glyphicon-open"></i>Upload</label>
            <asp:FileUpload runat="server"
                class="fileupload-hidden-button"
                ClientIDMode="Static"
                ID="fileUpload"
                onchange="submitFile(this);" />
            <asp:Button runat="server"
                class="submitfile-hidden-button btn btn-sm"
                OnClick="SubmitFile_Click"
                ID="btnSubmit"
                Text="Load" />
            <label id="uploadMessage" class="fileupload-message-hidden"></label>
            <asp:HiddenField runat="server" ID="Authorization" />
            <asp:HiddenField runat="server" ID="hfMaxRequestLength"/>
        </span>
        <script>
            var validFilesTypes = <%=allowedtypes.ToString()%>;
            var validate = <%= Request.QueryString["validate"] != null ? (Request.QueryString["validate"].ToLower() == "false" ? "false" : "true") : "true" %>;

            var token = getToken();
            if (token)
                setToken();


            function setToken() {
                var tokenField = document.getElementById('<%=Authorization.ClientID%>');
                tokenField.value = token;
            }

            function getToken() {
                for (var i = 0; i < sessionStorage.length; i++) {
                    try {
                        var obj = JSON.parse(sessionStorage.getItem(sessionStorage.key(i)));
                        var hasToken = obj.hasOwnProperty("accessToken");
                        if (hasToken) {
                            return obj["accessToken"];
                        }
                    }
                    catch (e) { }
                }
            }

          function submitFile(file) {

            if (!validate || CheckExtension(file)) {
              if (CheckFileLength(file)) {
                $("#btnSubmit").click();
              }
              else {
                showMessageFileExceeds();
              }
            }
          };

          function showMessageFileExceeds() {
            console.log("File size exceeds the maximum limit.");
            var label = document.getElementById('uploadMessage');

            // Update the class to show the label
            label.classList.add('fileupload-message-visible');
            label.classList.remove('fileupload-message-hidden');

            // Set the message
            var message = "File size exceeds " + formatFileSize(document.getElementById('<%= hfMaxRequestLength.ClientID %>').value) + ".";
            document.getElementById("uploadMessage").innerText = message;
          }

          function formatFileSize(size) {
            // The size we expect to be kbyts
            var sizeInMB = size / 1024;
            var sizeInGB = sizeInMB / 1024;

            if (sizeInGB >= 1) {
              return sizeInGB.toFixed(0) + " GB";
            } else if (sizeInMB >= 1) {
              return sizeInMB.toFixed(0) + " MB";
            } else {
              return sizeInKB.toFixed(0) + " KB";
            }
          }

          function CheckFileLength(file) {

            var maxRequestLength = document.getElementById('<%= hfMaxRequestLength.ClientID %>').value;

            var fileSizeInKB = file.files[0].size / 1024; // Convert to KB
            if (fileSizeInKB > maxRequestLength) {
              return false
            }
            else {
              return true;
            }
          }

            function CheckExtension(file) {
                var filePath = file.value;
                var ext = filePath.substring(filePath.lastIndexOf('.')).toLowerCase();
                var isValidFile = false;

                for (var i = 0; i < validFilesTypes.length; i++) {
                    if (ext == validFilesTypes[i].toLowerCase()) {
                        isValidFile = true;
                        break;
                    }
                }

                if (!isValidFile) {
                    file.value = null;
                    alert("Invalid File Format.");
                }

                return isValidFile;
            }
        </script>
    </form>
</body>
</html>
