s3manager-web/web/template/bucket.html.tmpl

{{ define "content" }}
<nav>
    <div class="nav-wrapper container">
        <span href="#" class="brand-logo"><i class="material-icons">folder_open</i>{{ .BucketName }}</span>
        {{ if not .Objects }}
        <ul class="right">
            <li>
                <a class="waves-effect waves-light btn" href="#" onclick="deleteBucket({{ .BucketName }})">
                    Delete <i class="material-icons right">delete</i>
                </a>
            </li>
        </ul>
        {{ end }}
    </div>
</nav>

<div class="section">
    <a href="/buckets" style="padding-left:25px;vertical-align:middle;">
        <i class="material-icons" style="vertical-align: middle;">arrow_back</i> Buckets
    </a>

    {{ if .Objects }}
    <table class="striped">
        <thead>
            <tr>
                <th style="width:75px;"></th>
                <th>Key</th>
                <th>Size</th>
                <th>Owner</th>
                <th>Last Modified</th>
                <th style="min-width:165px;"></th>
            </tr>
        </thead>

        <tbody>
            {{ range $index, $object := .Objects }}
            <tr>
                <td style="padding-left:25px;"><i class="material-icons">{{ $object.Icon }}</i></td>
                <td>{{ $object.Info.Key }}</td>
                <td>{{ $object.Info.Size }} bytes</td>
                <td>{{ $object.Info.Owner }}</td>
                <td>{{ $object.Info.LastModified }}</td>
                <td>
                    <button class="dropdown-trigger waves-effect waves-teal btn" data-target="actions-dropdown-{{ $index }}">
                        Actions <i class="material-icons right">arrow_drop_down</i>
                    </button>
                    <!-- Dropdown Structure -->
                    <ul id="actions-dropdown-{{ $index }}" class="dropdown-content">
                        <li><a target="_blank" href="/api/buckets/{{ $.BucketName }}/objects/{{ $object.Info.Key }}">Download</a></li>
                        {{- if $.AllowDelete }}
                        <li><a href="#" onclick="deleteObject({{ $.BucketName }}, {{ $object.Info.Key }})">Delete</a></li>
                        {{- end }}
                    </ul>
                </td>
            </tr>
            {{ end }}
        </tbody>
    </table>
    {{ end }}

    {{ if not .Objects }}
    <p style="text-align:center;margin-top:2em;color:gray;">No objects in <strong>{{ .BucketName }}</strong> yet</p>
    {{ end }}

</div>

<div class="fixed-action-btn">
    <button type="button" class="btn-floating btn-large red modal-trigger" data-target="modal-create-object">
        <i class="large material-icons">add</i>
    </button>
</div>

<div id="modal-create-object" class="modal">
    <form action="/api/buckets/{{ .BucketName }}/objects" method="POST" id="create-object-form" enctype="multipart/form-data">

        <div class="modal-content">
            <h4>Create Object</h4>
            <br>
            <div class="row">
                <div class="col s6">
                    <div class="file-field input-field">
                        <div class="btn">
                            <span>File</span>
                            <input type="file" name="file">
                        </div>
                        <div class="file-path-wrapper">
                            <input class="file-path validate" type="text">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal-footer">
            <button type="button" class="modal-close waves-effect waves-green btn-flat">Cancel</button>
            <button type="submit" class="modal-close waves-effect waves-green btn">Upload</button>
        </div>

    </form>
</div>

<script>
function deleteObject(bucketName, objectName) {
    $.ajax({
        type: 'DELETE',
        url: '/api/buckets/' + bucketName + '/objects/' + objectName,
        success: function () { location.reload(); }
    })
}
function deleteBucket(bucketName) {
    $.ajax({
        type: 'DELETE',
        url: '/api/buckets/' + bucketName,
        success: function () { window.location.replace('/buckets'); }
    })
}
</script>
{{ end }}