---
layout: empty
---

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="pragma" content="no-cache">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{% t upload.page_title %} IPFS</title>
    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/upload/style.css?v0.1" type='text/css'>
    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/upload/upload-utilities.css?v0.1" type='text/css'>
    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/upload/node-menu.css?v0.1" type='text/css'>
    <script src='{{ site.baseurl }}/assets/js/upload/jquery.min.js?2.1.3'></script>
    <script src="{{ site.baseurl }}/assets/js/upload/ipfs-http-client.js"></script>
    <script src="{{ site.baseurl }}/assets/js/upload/buffer.js?5.2.1"></script>
    <script src="{{ site.baseurl }}/assets/js/upload/config.js?v0.1"></script> <!-- read config.js before upload.js -->
</head>

<body>
    <div class="b-nav">
        <nav>
            <a href="#" title="home">
                <h1>{% t upload.page_title %} <img src="{{ site.baseurl }}/assets/images/upload/ipfs.png" style="margin: 0 2px"></h1>
            </a>
        </nav>
    </div>
    <div id="content">
        <div id="wrapper">
            <div id="top">
                {% for item in site.translations[site.lang].upload.page_description %}
                    <p>{{ item }}</p>
                {% endfor %}
            </div>
            <div id="hidden-menu">
                <div class="form">
                    <script>
                        var formRemote = `<div id="remote">
                                                                <h1>Configure your IPFS Gateway Node as Remote</h1>
                                                                <form action="submit" method="post">
                                                                    <div class="top-row">
                                                                        <div class="field-wrap" id="address">
                                                                            <label id="labelAddress">
                                                                                Node Address<span class="req">*</span>
                                                                            </label>
                                                                            <input type="text" name="addressNode" id="remote_address" required autocomplete="off" />
                                                                        </div>
                                                                        <div class="field-wrap" id="apiPort">
                                                                            <label id="labelPort">
                                                                                API Port<span class="req">*</span>
                                                                            </label>
                                                                            <input type="text" name="apiPort" id="remote_apiPort" required autocomplete="off" />
                                                                        </div>
                                                                    </div>
                                                                    <div class="top-row">
                                                                        <div class="field-wrap" id="gatewayPort">
                                                                            <label id="labelGateway">
                                                                                Gateway Port\
                                                                            </label>
                                                                            <input type="text" name="gatewayPort" id="remote_gatewayPort" required autocomplete="off" />
                                                                        </div>
                                                                    </div>
                                                                    <ul class="tab-group" id="remoteProtocol">
                                                                        <li class="tab" id="https" onclick="changeProtocol('remote', 'https')"><a href="#remote">HTTPS</a></li>
                                                                        <li class="tab" id="http" onclick="changeProtocol('remote', 'http')"><a href="#remote">HTTP</a></li>
                                                                    </ul>
                                                                    <button type="button" class="button button-block" id="buttonRemote" onclick="updateNode('remote')">
                                                                        <div class="buttonContent">
                                                                            <div>Connect <img src="{{ site.base_url }}/assets/images/upload/connect.png" /></div>
                                                                            <div class="min-loading min-loading-hidden">
                                                                                <div></div>
                                                                                <div></div>
                                                                                <div></div>
                                                                                <div></div>
                                                                            </div>
                                                                        </div>
                                                                    </button>
                                                                </form>
                                                            </div>`;
        
                        var formLocal = `<div id="local">
                                                                <h1>Configure your IPFS Gateway Node as Local</h1>
                                                                <form action="submit" method="post">
                                                                    <div class="top-row">
                                                                        <div class="field-wrap" id="address">
                                                                            <label id="labelAddress">
                                                                                Node Address<span class="req">*</span>
                                                                            </label>
                                                                            <input type="text" name="first_name" id="local_address" required autocomplete="off" />
                                                                        </div>
                                                                        <div class="field-wrap" id="apiPort">
                                                                            <label id="labelPort">
                                                                                API Port<span class="req">*</span>
                                                                            </label>
                                                                            <input type="text" name="last_name" id="local_apiPort" required autocomplete="off" />
                                                                        </div>
                                                                    </div>
                                                                    <div class="top-row">
                                                                        <div class="field-wrap" id="gatewayPort">
                                                                            <label id="labelGateway">
                                                                                Gateway Port\
                                                                            </label>
                                                                            <input type="text" name="gatewayPort" id="local_gatewayPort" required autocomplete="off" />
                                                                        </div>
                                                                    </div>
                                                                    <ul class="tab-group" id="localProtocol">
                                                                        <li class="tab" id="https" onclick="changeProtocol('local', 'https')"><a href="#local">HTTPS</a></li>
                                                                        <li class="tab" id="http" onclick="changeProtocol('local', 'http')"><a href="#local">HTTP</a></li>
                                                                    </ul>
                                                                    <button type="button" class="button button-block" id="buttonLocal" onclick="updateNode('local')">
                                                                        <div class="buttonContent">
                                                                            <div>Connect <img src="{{ site.base_url }}/assets/images/upload/connect.png" /></div>
                                                                            <div class="min-loading min-loading-hidden">
                                                                                <div></div>
                                                                                <div></div>
                                                                                <div></div>
                                                                                <div></div>
                                                                            </div>
                                                                        </div>
                                                                    </button>
                                                                </form>
                                                            </div>`;
        
                        if (node.default == "remote") {
                            document.querySelector("div.form").innerHTML = `<ul class="tab-group">
                                        <li class="tab active">
                                            <a href="#remote">Remote Node</a>
                                        </li>
                                        <li class="tab">
                                            <a href="#local">Local Node</a>
                                        </li>
                                    </ul>
                                    <div class="tab-content">
                                        ${formRemote}\n${formLocal}
                                    </div><!-- tab-content -->`
                        }
        
                        if (node.default == "local") {
                            document.querySelector("div.form").innerHTML = `<ul class="tab-group">
                                        <li class="tab active">
                                            <a href="#local">Local Node</a>
                                        </li>
                                        <li class="tab">
                                            <a href="#remote">Remote Node</a>
                                        </li>
                                    </ul>
                                    <div class="tab-content">
                                        ${formLocal}\n${formRemote}
                                    </div><!-- tab-content -->`
                        }
        
                    </script>
                </div> <!-- /form -->
            </div>
            <div id="top">
                <div id="fileDropBox">
                    <svg class="box_icon" xmlns="http://www.w3.org/2000/svg" width="50" height="43" viewBox="0 0 50 43">
                        <path
                            d="M48.4 26.5c-.9 0-1.7.7-1.7 1.7v11.6h-43.3v-11.6c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v13.2c0 .9.7 1.7 1.7 1.7h46.7c.9 0 1.7-.7 1.7-1.7v-13.2c0-1-.7-1.7-1.7-1.7zm-24.5 6.1c.3.3.8.5 1.2.5.4 0 .9-.2 1.2-.5l10-11.6c.7-.7.7-1.7 0-2.4s-1.7-.7-2.4 0l-7.1 8.3v-25.3c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v25.3l-7.1-8.3c-.7-.7-1.7-.7-2.4 0s-.7 1.7 0 2.4l10 11.6z">
                        </path>
                    </svg>
                    {% t upload.drop_files_here %} <br> {% t upload.or %}
                    <label for='files'>{% t upload.choose_files %} &#187;</label>
                    <input type="file" name="files[]" id="files" class="box_file"
                        data-multiple-caption="{count} files selected" multiple="">
                </div>
                <!-- Provides the alert() method. -->
                <div id="list">
                    <ul></ul>
                </div>
                <div id="divResponse">
                    <pre id="response">
                        <spam id="info">{% t upload.result %}:</spam>
                    </pre>
                </div>
            </div>
        </div>
        <div id="upload_conf">
            <button type="button" onclick="upload()" class="box_button" id="buttonUpload">{% t upload.upload %}<img
                    src="{{ site.baseurl }}/assets/images/upload/upload.png" /></button>
            <div class="min-loading blue loading-hidden">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>
    </div>
    <div id="source-ack">
        <small><a href="https://github.com/anarkrypto/upload-files-to-ipfs-from-browser-panel">{% t upload.ui_source_ack %}</a></small>
    </div>            
</body>

</html>

<script src="{{ site.baseurl }}/assets/js/upload/node-config.js?v0.1"></script>
<script src="{{ site.baseurl }}/assets/js/upload/connect-and-upload.js?v0.1"></script>
<script src="{{ site.baseurl }}/assets/js/upload/node-menu.js"></script>