<%
    * VS Addin Comment: SourceFile="~/../../fox/samples/wwdemo/wwdemo.prg"
    pcPageTitle = "File Upload Sample - West Wind Web Connection"
%>
<% Layout="~/views/_layoutpage.wcs" %>

<!-- remove sections if you're not using them -->
<% section="headers" %>
<style>
    .sample .btn {
        min-width: 185px;
        margin-top: 5px;
    }

    /* Container*/
    .fileUpload {
        position: relative;
        overflow: hidden;
    }
        /* hide the actual file upload control by making it invisible */
        .fileUpload input.upload {
            position: absolute;
            top: 0;
            right: 0;
            margin: 0;
            padding: 0;
            font-size: 20px;
            cursor: pointer;
            opacity: 0;
            filter: alpha(opacity=0);
        }

    #ImageList img {
        max-height: 160px;
        float: left;
        margin-left: 8px;
        margin-bottom: 8px;
    }

    .sample {
        padding-bottom: 25px;
    }
</style>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<% endsection %>


<div class="container">


    <div class="page-header-text">
        <i class="fa fa-list-alt"></i>
        File Upload Sample
    </div>

    <div class="btn-group margin-bottom-2x">
        <a href="~/" class="btn btn-outline-primary btn-sm"> <i class="fa fa-home"></i> Samples</a>
        <a href="UppyAndCarousel.wwd" class="btn btn-outline-primary btn-sm"> <i class="fa fa-images"></i> Image Carousel Sample</a>
        <a href="showcode.wwd" class="btn btn-outline-primary btn-sm"> <i class="fa fa-code"></i> Server Code</a>
        <a href="showfileastext.wwd?file=fileupload.wwd" class="btn btn-outline-primary btn-sm"> <i class="fa fa-code"></i> Script Code</a>
        <a href="" class="btn btn-outline-primary  btn-sm"> <i class="fa fa-refresh"></i> Refresh</a>
    </div>


    <div id="ImageList">
        <%= pcImageListHtml %>
    </div>


    <div class="clearfix margin-bottom"></div>


    <!-- CLASSIC UPLOAD EXAMPLE -->
    <div class="container sample">
        <h3>Standard HTML Form Upload</h3>
        <p>
            This example uses a classic HTML server form submission to upload
            one or multiple selected image files to the server. It uses the new
            <code>Request.MultipartFiles()</code> function to retrieve a collection
            of files on the server.

        </p>
        <form action="FileUpload.wwd" method="post" enctype="multipart/form-data">
            <!-- <form action="FileUpload.wwd" method="post" enctype="multipart/form-data"> -->
            <!-- wrap the file input into a div so we can style the button -->
            <div class="fileUpload btn btn-primary">
                <span>
                    <i class="fa fa-image"></i>
                    Select images
                </span>
                <input type="file" id="upload" name="upload" class="upload" multiple accept="image/*" />
            </div>
            <button type="submit" class="btn btn-primary">
                <i class="fa fa-upload"></i>
                Upload...
            </button>
            <div id="filename"></div>

            <!-- capture the filename to upload and display -->
            <script>
                document.getElementById("upload").onchange = function () {
                    var output = this.files.length + " file(s):\r\n";
                    for (var i = 0; i < this.files.length; i++) {
                        output += this.files[i].name + "\r\n";
                    }

                    document.getElementById("filename").innerText = output;
                };
            </script>
        </form>
    </div>
    <!-- CLASSIC UPLOAD EXAMPLE -->
    <!-- AJAX UPLOAD EXAMPLE -->
    <div class="container sample">
        <h3>Ajax File Upload</h3>
        <p>
            This example uses plain AJAX and HTML5  to asynchronously upload one or more image files
            using script code to capture the file stream of the selected files and posting them
            to the server using jQuery's <code>.ajax()</code> method. Provides a generically reusable
            function to handle the upload.
        </p>
        <form id="ajaxForm" name="ajaxForm">
            <!-- wrap the file input into a div so we can style the button -->
            <div class="fileUpload btn btn-primary">
                <span>
                    <i class="fa fa-upload"></i>
                    Upload Images
                    <i id="ajaxProgress" class="fa fa-spinner fa-spin" style="display: none"></i>
                </span>
                <input type="file" id="ajaxUpload" name="ajaxUpload"
                       class="upload" accept="image/*" multiple />
            </div>
            <img id="uploadedImage" style="display: none; max-width: 95%; margin: 15px 0" />
        </form>
    </div>
    <script>
        // Catch the file selection
        var files = null;
        $("#ajaxUpload").change(function (event) {
            files = event.target.files;

            // no further DOM processing
            event.stopPropagation();
            event.preventDefault();

            // show spinner
            $("#ajaxProgress").show();

            uploadFiles("Upload",
                "FileUpload.wwd?type=ajax",
                function uploadSuccess(data, textStatus, jqXHR) {
                    var files = data;

                    $("#ajaxProgress").hide();

                    if (data.error)
                        toastr.error("Upload failed");

                    toastr.success("Upload completed.");

                    var images = "";
                    for (var i = 0; i < files.length; i++) {
                        var file = files[i];
                        images += '<img src="../temp/' + file.filename + '" />';
                    }
                    $("#ImageList").html(images);
                },
                function uploadError(jqXHR, textStatus, errorThrown) {
                    $("#ajaxProgress").hide();
                    toastr.error("Upload failed.");
                });

        });

        /*
            Generic re-usable Ajax Upload function

            Pass in from Change event of file upload control

            fileId  -  Id of the file Form vars
                        file results in (file0, file1, file2 etc)
            url     -  Url to upload to
            success -  success handler
                        data object of JSON result data from server
            error   -  error handler


        */
        function uploadFiles(fileId, uploadUrl, success, error) {
            // Create a formdata object and add the files
            var data = new FormData();
            $.each(files, function (key, value) {
                data.append(fileId, value);
            });

            $.ajax({
                url: uploadUrl,
                type: 'POST',
                data: data,
                cache: false,
                dataType: 'json',
                processData: false, // Don't process the files
                contentType: false, // Set content type to false!
                success: success,
                error: error

            });
        }
    </script>
    <!-- END AJAX UPLOAD EXAMPLE -->
    <!-- Single Button plUpload Example -->
    <div class="container sample">
        <h3>Uppy  UI</h3>
        <p>
            This example uses the third party uppy uploader and UI component
            to upload images using an interactive UI. Files are uploaded
            asynchronously and the UI provides some progress information.


        </p>

        <button class="btn btn-primary" id="UppyImageUploader">
            <i class="fa fa-picture-o" style="color: limegreen"></i> 
            <i class="fas fa-upload"></i>
            Uppy Uploader Popup UI
        </button>

    </div>
    <link href="~/lib/uppy/dist/uppy.min.css" rel="stylesheet">
    <script>
        //IE 10+ support via Polyfill for Promises
        if (typeof Promise !== "function") {
            document.write(
                "<script src='https:\/\/cdn.jsdelivr.net\/npm\/es6-promise@4\/dist/es6-promise.min.js'><\/script>");
            document.write(
                "<script src='https:\/\/cdn.jsdelivr.net\/npm\/es6-promise@4\/dist\/es6-promise.auto.min.js'><\/script>");
        }
    </script>
    <script src="~/lib/uppy/dist/uppy.min.js"></script>

    <script>
        // global passed into upload script
        _uploader = {
            uploadUrl: "<%= Process.ResolveUrl([~/UppyUpload.wwd?id=entryId]) %>"
        };


        var uppy = Uppy.Core({
            debug: true,
            autoProceed: true,
            restrictions: {
                allowedFileTypes: ["image/jpeg", "image/png", "image/gif"],
                maxNumberOfFiles: 8
            }
        })
            .use(Uppy.Dashboard,
                {
                    trigger: '#UppyImageUploader',
                    proudlyDisplayPoweredByUppy: false,
                    inline: false,
                    width: 550,
                    height: 350,
                    disableStatusBar: false,
                    disableInformer: false,
                    locale: {
                        strings: {
                            browse: "Browse",
                            dropPasteImport:
                                '%{browse}, drop or paste files here, or import from one of the locations above. ' +
                                'Please use images in Landscape (wide) format.'
                        }
                    }
                })
            .use(Uppy.Webcam,
                {
                    target: Uppy.Dashboard,
                    modes: [
                        'picture'
                    ],
                    locale: {
                        strings: { smile: "take a picture" }
                    },
                    countdown: false,
                    facingMode: "environment"
                })
            .use(Uppy.XHRUpload,
                {
                    endpoint: _uploader.uploadUrl,
                    formData: true
                });

        // All files completed - close dialog
        uppy.on('complete',
            function () {
                setTimeout(function () {
                    uppy.getPlugin('Dashboard').closeModal();
                    uppy.reset();
                },
                    1000);
            });

        // Add Meta Data to the File Upload - EntryId
        uppy.on('file-added',
            function (file) {
                uppy.setFileMeta(file.id,
                    {
                        entryId: "ReferenceId"
                    });
            });

        // Individual file upload completed
        uppy.on('upload-success',
            (file, body) => {
                var fileEx = uppy.getFile(file.id);
                var response = fileEx.response;
                var result = response.body;

                var imageId = result.imageId;
                console.log("file uploaded: " + file.id + " - " + result);

                var image = '<img src="' + result.imageUrl + '" />';
                $("#ImageList").append(image);

                return;

                ///
                var img = $("<img>").prop("src", result.imageUrl);

                var div = $('<div class="image-container " style="background: #444;margin: 5px;">');
                var divImageContainer =
                    '<div class="image-icon-container">' +
                    '<div class="image-rotateleft-icon" data-id="' +
                    imageId +
                    '" title="Rotate Left"><i class="fa fa-rotate-left"></i></div>' +
                    '<div class="image-rotateright-icon" data-id="' +
                    imageId +
                    '" title="Rotate Right"><i class="fa fa-rotate-right"></i></div>' +
                    '<div class="image-delete-icon" data-id="' +
                    imageId +
                    '" title="Remove Image"><i class="fa fa-remove" style="color: red"></i></div>' +
                    '</div>';

                div.append(divImageContainer)
                    .append(img);

                // add item to the slider
                $("#Slider").slick("slickAdd", div);

                setTimeout(function () {
                    // move to the new slide
                    var slideCount = $("#Slider")[0].slick.slideCount;
                    $("#Slider").slick("slickGoTo", slideCount - 1);
                },
                    100);

            });
    </script>
    <!-- End Uppy -->


</div>  <!-- end #MainView.container -->
<% section="scripts" %>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="~/lib/toastr/build/toastr.min.css" rel="stylesheet" />
<script src="~/lib/toastr/build/toastr.min.js"></script>
<script>
    toastr.options.positionClass = 'toast-bottom-right';

</script>
<% endsection %>