@kevinldonnelly/file-browser

<file-browser>

Description

Web component based on https://github.com/ServiceStack/ServiceStack.Examples/tree/master/src/RestFiles/RestFiles

Features

JwtTokens

 $.ajaxSetup({
            beforeSend: function (xhr) {
                xhr.setRequestHeader('Authorization', 'Bearer ' + getCookie("id_token"));
            }
        });

Webpack plugins

new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery"
    })

jQuery Shadow DOM

 var self = this;
$('#fileupload', shadowRoot).fileupload({
    dataType: 'json',
    replaceFileInput: false,

        add: function (e, data) {
            data.context = $('<button/>').text('Upload')
            .appendTo($('#files', shadowRoot))
            .click(function () {
                data.context = $('<p/>').text('Uploading...').replaceAll($(this));
                    data.submit();
                });
            $.each(data.files, function (index, file) {

            var node = $('<p/>').append($('<span/>').text(file.name).data(data));
                    node.appendTo(data.context);
                });
                data.url = self.Base + self.href + "?format=json";
                console.log(data.url);
            },
            done: function (e, data) {
                data.context.text('Upload finished.');
                self.refresh();
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .bar', shadowRoot).css(
                    'width',
                    progress + '%'
                );
            }
});

Google Signin

import '@google-web-components/google-signin';

googlesignin.addEventListener("google-signin-aware-success", e => {          
            document.cookie = "id_token=" + e.detail.id_token;         

        });

<google-signin brand="google" client-id="1054047045356-j8pgqgls9vdef3rl09hapoicumbte0bo.apps.googleusercontent.com">
    </google-signin>

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[0.1.2] - 2020-03-19

Coverted

Web Component including necessary modification to jQuery

[0.1.9] 2020-03-24

Selected Row

$("table tr", self.shadowRoot).click(function () {

    $(this).addClass('selected').siblings().removeClass('selected');
    var value = $(this).find('td:first').children('a').attr("href").replace('#!files',''); 

    let event = new CustomEvent('selected-changed',{detail:value});

    self.dispatchEvent(event);

    });

#ls TABLE TR.selected {

    outline: thin solid black;
}