skinswitcher/html/partials/upload.html

<h1 class="title">Upload skin</h1>
<div class="columns is-mobile">
    <div class="column">
        <img src="" class="skin" id="flat" alt="Current Skin" style="display: none;">
        <div id="mesh"></div>
    </div>
    <div class="column">
        <article class="message is-info">
            <div class="message-body">
                Your existing skin will be overwritten, be sure to make a backup
            </div>
        </article>

        <div class="buttons has-addons">
            <button class="button" id="remote">Fetch URL</button>
            <button class="button" id="local">Upload file</button>
        </div>

        <div class="field">
            <form action="#" id="remote" style="display: none;">
                <span class="has-text-weight-semibold">Fetch URL</span><br>
                <div class="field">
                    <input class="input" type="text" name="skin" placeholder="URL">
                </div>
                <div class="field">
                    <button class="button" type="submit">Submit</button>

                </div>
            </form>

            <form action="#" id="local" style="display: none;">
                <span class="has-text-weight-semibold">Upload</span><br>
                <div class="field">
                    <div class="file has-name">
                        <label class="file-label">
                            <input class="file-input" type="file" id="file" name="skin">
                            <span class="file-cta">
                                <span class="file-icon">
                                    <i class="fas fa-upload"></i>
                                </span>
                                <span class="file-label">
                                    Choose file
                                </span>
                            </span>
                            <span class="file-name"></span>
                        </label>
                    </div>
                </div>
                <div class="field">
                    <button class="button" type="submit">Submit</button>
                </div>
            </form>

            <form action="#" id="confirm" style="display: none;">
                <div class="buttons has-addons">
                    <button class="button" id="use">Use</button>
                    <button class="button" id="save">Save</button>
                </div>
            </form>
        </div>

        <div class="field">
            <div class="buttons">
                <button class="button" id="switch" style="display: none;">Switch to 2D</button>
            </div>
        </div>
    </div>
</div>

<script src="../src/skin.js"></script>

<script>
    function select(url) {
        $("form").each((i, e) => {
            console.log(e);
            $(e).css("display", "none");
        });
        $("button#remote, button#local").parent().css("display", "none");
        $("form#confirm").css("display", "initial");

        setView(url);
    }

    $("button#remote, button#local").on("click", (e) => {
        const id = e.target.id;
        $("button#remote, button#local").parent().css("display", "none");
        $(`form#${id}`).css("display", "initial");
    });

    $("input#file").on("change", (e) => {
        $("span.file-name").html($("input#file")[0].files[0].name);
    });

    $("button[type='submit']").each((i, e) => {
        $(e).on("click", (event) => {
            event.preventDefault();

            var input = $(e.form.elements["skin"])[0];
            switch (input.type) {
                case "file":
                    fs.readFile($(input)[0].files[0].path, (err, res) => {
                        if (err) {
                            notify("danger", "Something went wrong: " + err)
                        }
                        select("data:image/png;base64," + res.toString("base64"))
                    })
                    break;
                case "text":
                    axios({
                        method: "get",
                        url: $(input)[0].value,
                        responseType: "arraybuffer",
                        adapter: require("axios/lib/adapters/http")
                    }).then((res) => {
                        select("data:image/png;base64," + res.data.toString("base64"));
                    }).catch((err) => {
                        notify("danger", "Something went wrong: " + err)
                    });
                    break;
            }
        })
    });

    $("button#use").on("click", (e) => {
        console.log(view.flat.src);
    });

    if (settings.set != undefined) {
        select(settings.set);
        settings.set = undefined;
    }
</script>