├── .gitignore
├── LICENSE
├── README.md
├── favicon.ico
├── index.html
└── logo.png


/.gitignore:
--------------------------------------------------------------------------------
1 | *.iml
2 | .idea/
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Bengt Brodersen
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # AWS S3 Bucket Browser [![starline](https://starlines.qoo.monster/assets/qoomon/aws-s3-bucket-browser)](https://github.com/qoomon/starlines)
  2 | 
  3 | ![-](favicon.ico)
  4 | 
  5 | Single HTML file to browse AWS S3 buckets
  6 | ## [Demo](https://qoomon.github.io/aws-s3-bucket-browser/index.html?bucket=https://s3.amazonaws.com/spacenet-dataset#)
  7 | 
  8 | ## Features
  9 | * Compatible Providers: [![GCP](https://www.google.com/s2/favicons?sz=16&domain=cloud.google.com)](https://cloud.google.com) [![IBM](https://www.google.com/s2/favicons?sz=16&domain=ibm.com)](https://ibm.com/cloud) [![DigitalOcean](https://www.google.com/s2/favicons?sz=161&domain=digitalocean.com)](https://digitalocean.com)
 10 | * List all files in a table view
 11 | * Treat and display `/` in keys as folders
 12 | * Render preview for Markdown files
 13 | * Show `Install` button for `manifest.plist` on iOS devices
 14 | 
 15 | ## Installation
 16 | 
 17 | #### Self-Hosted
 18 | <details>
 19 | <summary>Click me</summary>
 20 |  
 21 | * Just download [`index.html`](index.html) and upload it to your bucket.
 22 |   * Adjust [config](index.html#L8-L37) within `index.html` if needed, e.g.
 23 |     ```js
 24 |     const config = {
 25 |       title: 'Bucket Browser', // prefix value with `HTML> ` to render as html, see subtitle
 26 |       subtitle: 'HTML>made with ♥ by <b><a href="https://qoo.monster">qoomon</a></b>', // prefix value with `HTML> ` to render as html
 27 |       logo: 'https://qoomon.github.io/aws-s3-bucket-browser/logo.png',
 28 |       favicon: 'https://qoomon.github.io/aws-s3-bucket-browser/favicon.ico',
 29 |       primaryColor: '#167df0',
 30 |       
 31 |       bucketUrl: undefined,
 32 |       // If bucketUrl is undefined, this script tries to determine bucket Rest API URL from this file location itself.
 33 |       //   This will only work for locations like these
 34 |       //   * https://s3.amazonaws.com/BUCKET-NAME/index.html
 35 |       //   * https://s3.BUCKET-REGION.amazonaws.com/BUCKET-NAME/index.html
 36 |       //   * http://BUCKET-NAME.s3-website-BUCKET-REGION.amazonaws.com/index.html
 37 |       //   * https://storage.googleapis.com/BUCKET-NAME/index.html
 38 |       //   * https://BUCKET-NAME.s3-web.BUCKET-REGION.cloud-object-storage.appdomain.cloud/
 39 |       //   * https://BUCKET-NAME.BUCKET-REGION.digitaloceanspaces.com
 40 |       //   * https://BUCKET-NAME.BUCKET-REGION.cdn.digitaloceanspaces.com
 41 |       // If bucketUrl is set manually, ensure this is the bucket Rest API URL, e.g.
 42 |       //   * https://s3.amazonaws.com/BUCKET-NAME
 43 |       //   * https://storage.googleapis.com/BUCKET-NAME
 44 |       //   The URL should return an XML document with <ListBucketResult> as root element.
 45 |       rootPrefix: undefined, // e.g. 'subfolder/'
 46 |       keyExcludePatterns: [/^index\.html$/], // matches againt object key relative to rootPrefix
 47 |       pageSize: 50,
 48 |       
 49 |       bucketMaskUrl: undefined, 
 50 |       // If bucketMaskUrl is set file urls will be changed from ${bucketUrl}/${file} to ${bucketMaskUrl}/${file}
 51 |       //   bucketMaskUrl: 'https://example.org'
 52 |       //     => https://example.org/foo/bar.txt 
 53 |       //   bucketMaskUrl: document.location.origin
 54 |       //     => ${document.location.origin}/foo/bar.txt 
 55 |       
 56 |       defaultOrder: 'name-asc' // (name|size|dateModified)-(asc|desc)
 57 |     }
 58 |     ```
 59 | * ##### ⚠️ Ensure Bucket Permissions
 60 |   * Go to `https://s3.console.aws.amazon.com/s3/buckets/<YOUR BUCKET NAME>/?tab=permissions`
 61 |   * Grant public read permission by `Access Control List` or `Bucket Policy`
 62 |     * Access Control List
 63 |       * Enable `List objects` for `Everyone`
 64 |     * Bucket Policy
 65 |       ```json
 66 |       {
 67 |           "Version": "2012-10-17",
 68 |           "Statement": [
 69 |               {
 70 |                   "Sid": "PublicRead",
 71 |                   "Principal": "*",
 72 |                   "Effect": "Allow",
 73 |                   "Action": [
 74 |                       "s3:ListBucket",
 75 |                       "s3:GetObject"
 76 |                   ],
 77 |                   "Resource": [
 78 |                       "arn:aws:s3:::<YOUR BUCKET NAME>",
 79 |                       "arn:aws:s3:::<YOUR BUCKET NAME>/*"
 80 |                   ]
 81 |               }
 82 |           ]
 83 |       }
 84 |       ```
 85 | * ##### ⚠️ Ensure Bucket CORS
 86 |   * Depending on your setup you may need to ensure following `CORS Configuration`
 87 |   * Go to `https://s3.console.aws.amazon.com/s3/buckets/<YOUR BUCKET NAME>/?tab=permissions`
 88 |   * Grant Cross Origin Access by following `CORS Configuration`, replace `http://www.example.com` by your address of bucket browser `index.html` 
 89 |     * e.g `http://example.s3-website-eu-central-1.amazonaws.com/index.html`
 90 |     ```json
 91 |     [
 92 |       {
 93 |           "AllowedHeaders": [
 94 |               "*"
 95 |           ],
 96 |           "AllowedMethods": [
 97 |               "GET"
 98 |           ],
 99 |           "AllowedOrigins": [
100 |               "http://www.example.com",
101 |               "https://BUCKET-NAME.s3.amazonaws.com",
102 |               "https://s3.BUCKET-REGION.amazonaws.com/BUCKET-NAME",
103 |           ],
104 |           "ExposeHeaders": [
105 |               "x-amz-server-side-encryption",
106 |               "x-amz-request-id",
107 |               "x-amz-id-2"
108 |           ],
109 |           "MaxAgeSeconds": 3000
110 |       }
111 |     ]
112 |     ```
113 | * Open `<YOUR BUCKET URL>/index.html` in your browser.
114 |   
115 | </details>
116 |  
117 | #### Hosted
118 | <details>
119 | <summary>Click me</summary>
120 |  
121 | * ##### ⚠️ Ensure Bucket Permissions
122 |   * see [Self-Hosted](#self-hosted)
123 | * ##### ⚠️ Ensure Bucket CORS
124 |   * see [Self-Hosted](#self-hosted)
125 | * Open hosted `index.html` in your browser and provide bucket url as `bucket` request parameter
126 |   * `${INDEX_FILE_LOCATION}?bucket=${S3_BUCKET_URL}` 
127 |   * e.g. [`https://qoomon.github.io/aws-s3-bucket-browser/index.html?bucket=https://s3.eu-west-1.amazonaws.com/data.openspending.org`](https://qoomon.github.io/aws-s3-bucket-browser/index.html?bucket=https://s3.eu-west-1.amazonaws.com/data.openspending.org)
128 | 
129 | </details>
130 | 
131 | ### CloudFront Setup
132 | <details>
133 | <summary>Click me</summary>
134 |  
135 | If you use CloudFront in front of your S3 bucket ensure following CloudFront settings.
136 | - Allowed/Cached HTTP Methods: `GET`, `HEAD`, `OPTIONS`
137 | - Cached Based on Selected Headers: `Whitelist`
138 |   - `Access-Control-Request-Headers`
139 |   - `Access-Control-Request-Method`
140 |   - `Origin`
141 | - Query String Forwarding and Caching: `Forward all`
142 | 
143 | </details>
144 | 
145 | ### IBM Cloud Object Storage Setup
146 | <details>
147 | <summary>Click me</summary>
148 |  
149 | IBM Cloud Object storage only supports virtual host-style addressing, i.e. `https://<bucket-name>s3-web.<region>.cloud-object-storage.appdomain.cloud/` for static website hosting. Otherwise follow the instructions
150 | in this [tutorial](https://cloud.ibm.com/docs/cloud-object-storage?topic=cloud-object-storage-static-website-tutorial) to configure your bucket. In addition, you may need to [configure CORS](https://cloud.ibm.com/docs/cloud-object-storage?topic=cloud-object-storage-curl#curl-new-cors) for your bucket.
151 | 
152 | ```xml
153 | <CORSConfiguration>
154 |   <CORSRule>
155 |       <AllowedOrigin>*</AllowedOrigin>
156 |       <AllowedMethod>GET</AllowedMethod>
157 |       <AllowedHeader>*</AllowedHeader>
158 |   </CORSRule>
159 | </CORSConfiguration>
160 | ```
161 | 
162 | </details>
163 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qoomon/aws-s3-bucket-browser/5e836768f92beae68057b6fbb622cf0ec5666bbb/favicon.ico


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
   1 | <!-- S3 Bucket Explorer Version: 3.1.3 -->
   2 | 
   3 | <!DOCTYPE html>
   4 | <html lang="en" style="overflow-y: auto;">
   5 | 
   6 | <head>
   7 |     <!-- Configuration -->
   8 |     <script>
   9 |         const config = {
  10 |             title: 'Bucket Browser', // prefix value with `HTML> ` to render as html, see subtitle
  11 |             subtitle: 'HTML>made with ♥ by <b><a href="https://qoo.monster">qoomon</a></b>', // prefix value with `HTML> ` to render as html
  12 |             logo: 'https://qoomon.github.io/aws-s3-bucket-browser/logo.png',
  13 |             favicon: 'https://qoomon.github.io/aws-s3-bucket-browser/favicon.ico',
  14 |             primaryColor: '#167df0',
  15 |             allowDownloadAll: true, // enable or disable 'download all' button to download all files as a zip archive
  16 | 
  17 |             bucketUrl: undefined,
  18 |             // If bucketUrl is undefined, this script tries to determine bucket Rest API URL from this file location itself.
  19 |             //   This will only work for locations like these
  20 |             //   * https://s3.BUCKET-REGION.amazonaws.com/BUCKET-NAME/index.html
  21 |             //   * http://BUCKET-NAME.s3-website-BUCKET-REGION.amazonaws.com/index.html
  22 |             //   * https://storage.googleapis.com/BUCKET-NAME/index.html
  23 |             //   * https://BUCKET-NAME.s3-web.BUCKET-REGION.cloud-object-storage.appdomain.cloud/
  24 |             //   * https://BUCKET-NAME.BUCKET-REGION.digitaloceanspaces.com
  25 |             //   * https://BUCKET-NAME.BUCKET-REGION.cdn.digitaloceanspaces.com
  26 |             // If bucketUrl is set manually, ensure this is the bucket Rest API URL, e.g.
  27 |             //   * https://s3.BUCKET-REGION.amazonaws.com/BUCKET-NAME
  28 |             //   * https://storage.googleapis.com/BUCKET-NAME
  29 |             //   The URL should return an XML document with <ListBucketResult> as root element.
  30 |             rootPrefix: undefined, // e.g. 'subfolder/'
  31 |             keyExcludePatterns: [/^index\.html$/, /^Urban_3D_Challenge\//], // matches againt object key relative to rootPrefix
  32 |             pageSize: 50,
  33 | 
  34 |             bucketMaskUrl: undefined,
  35 |             // If bucketMaskUrl is set, file urls will be changed from ${bucketUrl}/${file} to ${bucketMaskUrl}/${file}
  36 |             //   bucketMaskUrl: 'https://example.org'
  37 |             //     => https://example.org/foo/bar.txt
  38 |             //   bucketMaskUrl: document.location.origin
  39 |             //     => ${document.location.origin}/foo/bar.txt
  40 | 
  41 |             defaultOrder: 'name-asc' // (name|size|dateModified)-(asc|desc)
  42 |         }
  43 |     </script>
  44 | 
  45 |     <meta charset="UTF-8">
  46 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  47 |     <link id="favicon" rel="shortcut icon"/>
  48 |     <title>Bucket Browser</title>
  49 | 
  50 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css"
  51 |           integrity="sha384-HphS8cQyN+eYiJ5PMbzShG6qZdRtvHPVLPkYb8JwMkmNgaIxrFVDhQe3jIbq3EZ2"
  52 |           crossorigin="anonymous">
  53 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.7.0/css/all.css"
  54 |           integrity="sha384-nMrp5ZsUTqQhbYtRk9ykIA4NlAIb530sj9RpfUkoGv/2gV+x0ZzFdUnT7Q8J8EgH"
  55 |           crossorigin="anonymous">
  56 |     <script src="https://cdn.jsdelivr.net/npm/vue@3.5.13/dist/vue.global.prod.js"
  57 |             integrity="sha384-W/1Fp/LgAYO/oTn9Gs+PbeWuMuq1eQCnUMPCeg8POmMYchhzxctjEqtbiCIxDOON"
  58 |             crossorigin="anonymous"></script>
  59 | 
  60 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ntohq/buefy-next@0.1.4/dist/buefy.min.css"
  61 |           integrity="sha384-uKOSQ8X8o+jTwmPclX1z/d6IKB+spCvEua2ysnQprHMuYMf35xBOMGDxejgM2qGS"
  62 |           crossorigin="anonymous">
  63 |     <script>window.process = {env: {NODE_ENV: 'production'}};</script>
  64 |     <script src="https://cdn.jsdelivr.net/npm/@ntohq/buefy-next@0.1.4/dist/buefy.min.js"
  65 |             integrity="sha384-fd8rwC0JXdulBombqOXIudg/1G+9AbB0zDYPAi8SfJy+RemRrq0jG1TC6PUS8EpX"
  66 |             crossorigin="anonymous"></script>
  67 | 
  68 |     <script src="https://cdn.jsdelivr.net/npm/moment@2.30.1/min/moment.min.js"
  69 |             integrity="sha384-jzJ+sNWbKe71gDLLfQKgdtslQjhK70oKLFN+wmwxyg6mQN7Vem+wzce4pryF0HP/"
  70 |             crossorigin="anonymous"></script>
  71 | 
  72 |     <script src="https://cdn.jsdelivr.net/npm/zero-md@3.1.6?register" type="module"
  73 |             integrity="sha384-4yM8tBaev5eSstaMNWa2d8LiZsdtjDIrnLw7UJifOdyCQFisUeavYGRpF5PZbba8"
  74 |             crossorigin="anonymous"></script>
  75 | 
  76 |     <script src="https://cdn.jsdelivr.net/npm/fflate@0.8.2/umd/index.min.js"
  77 |             integrity="sha384-HqC294x+jARmk/wUrzXlnRpiZrmiHJ4BIKph0mrcMJ/cLuMkNDHY0IjbDanCNhcU"
  78 |             crossorigin="anonymous"></script>
  79 | 
  80 | 
  81 |     <!-- Explorer App Style -->
  82 |     <style>
  83 |         body {
  84 |             width: 100vw;
  85 |             min-height: 100vh;
  86 |             position: relative;
  87 |             background-color: #f5f5f5;
  88 |             overflow-y: auto;
  89 |             --primary-color: #167df0;
  90 |         }
  91 | 
  92 |         a {
  93 |             color: var(--primary-color);
  94 |         }
  95 | 
  96 |         #app {
  97 |             padding: 2.25rem 2.5rem;
  98 |         }
  99 | 
 100 |         #app #breadcrumbs {
 101 |             margin-right: .5em;
 102 |         }
 103 | 
 104 |         #app #breadcrumbs .button .icon:first-child:not(:last-child) {
 105 |             margin-left: calc(-.5em - 1px);
 106 |             margin-right: calc(-.5em - 1px);
 107 |         }
 108 | 
 109 |         #app .search-prefix-matches-path-prefix input.input {
 110 |             color: var(--primary-color) !important;
 111 |             font-weight: bold;
 112 |         }
 113 | 
 114 |         #app .button.is-primary {
 115 |             background-color: var(--primary-color) !important;
 116 |         }
 117 | 
 118 |         #app .button.is-primary.is-outlined {
 119 |             background-color: transparent !important;
 120 |             border-color: var(--primary-color) !important;
 121 |             color: var(--primary-color) !important;
 122 |         }
 123 | 
 124 |         #app .button.is-primary.is-outlined.is-loading::after {
 125 |             border-color: transparent transparent var(--primary-color) var(--primary-color) !important;
 126 |         }
 127 | 
 128 |         #app .table .button.is-text {
 129 |             padding: .1em .75em;
 130 |             height: auto;
 131 |             text-decoration: none;
 132 |             box-shadow: none;
 133 |             background-color: unset;
 134 |             user-select: text;
 135 |             color: var(--primary-color);
 136 |             font-weight: 500;
 137 |             text-align: left;
 138 |             overflow: hidden;
 139 |         }
 140 | 
 141 |         #app .table .button.is-text.is-focused,
 142 |         #app .table .button.is-text.is-hovered,
 143 |         #app .table .button.is-text:focus,
 144 |         #app .table .button.is-text:hover {
 145 |             background-color: transparent;
 146 |             color: inherit;
 147 |         }
 148 | 
 149 |         #app .buttons .field {
 150 |             margin-bottom: 0.5rem;
 151 |         }
 152 | 
 153 |         #app .button.is-text > span {
 154 |             overflow: hidden;
 155 |             text-overflow: ellipsis;
 156 |         }
 157 | 
 158 |         #app .button.is-primary:focus:not(:active) {
 159 |             box-shadow: inset 0px 0px 0px 0.1em #ffffffcc;
 160 |         }
 161 | 
 162 |         #app .input:focus:not(.is-danger),
 163 |         #app .select select:focus {
 164 |             border-color: var(--primary-color);
 165 |             box-shadow: none;
 166 |         }
 167 | 
 168 |         #app .select:not(.is-multiple):not(.is-loading)::after {
 169 |             border-color: var(--primary-color) !important;
 170 |         }
 171 | 
 172 |         #app .name-column > div:first-child {
 173 |             display: flex;
 174 |             align-items: center;
 175 |         }
 176 | 
 177 |         #app .name-column-icon {
 178 |             display: block;
 179 |             flex-basis: 1.5rem;
 180 |             flex-grow: 0;
 181 |             flex-shrink: 0;
 182 |             align-content: center;
 183 |             text-align: center;
 184 |         }
 185 | 
 186 |         #app .name-column-buttons {
 187 |             display: flex;
 188 |             margin-left: auto;
 189 |         }
 190 | 
 191 |         #app .name-column-buttons > .button {
 192 |             height: 1em;
 193 |             height: auto;
 194 |             padding: 0em 0.6em;
 195 |             margin-left: 0.5em;
 196 |         }
 197 | 
 198 |         #app .name-column-details {
 199 |             display: flex;
 200 |             align-items: flex-end;
 201 |             justify-content: center;
 202 |             flex-shrink: 0;
 203 |             min-width: 5rem;
 204 |             font-size: 0.85rem;
 205 |             line-height: 1.5rem;
 206 |             flex-direction: column;
 207 |         }
 208 | 
 209 |         #app .footer-bucket-url {
 210 |             position: absolute;
 211 |             bottom: 0;
 212 |             left: 0;
 213 |             right: 0;
 214 |             margin-bottom: 0.5rem;
 215 |             font-size: small;
 216 |             text-align: center;
 217 |             color: darkgray;
 218 |         }
 219 | 
 220 |         #app .footer-bucket-url a {
 221 |             color: inherit;
 222 |         }
 223 | 
 224 |         @media screen and (max-width: 768px) {
 225 |             #app .name-column::before {
 226 |                 display: none !important;
 227 |             }
 228 | 
 229 |             #app .name-column > div:first-child {
 230 |                 max-width: calc(100% - 5.5rem);
 231 |             }
 232 | 
 233 |             #app .size-column,
 234 |             #app .modified-column {
 235 |                 display: none !important;
 236 |             }
 237 |         }
 238 |     </style>
 239 | </head>
 240 | 
 241 | <body>
 242 | 
 243 | <!-- Explorer App-->
 244 | <div id="app" style="display: none;">
 245 |     <div :style="cssVars">
 246 |         <!-- Header -->
 247 |         <div class="level">
 248 |             <div class="level-left" style="max-width: 100%;">
 249 |                 <figure class="level-item image is-96x96" style="margin-right: 1.5rem;">
 250 |                     <img :src="config.logo"/>
 251 |                 </figure>
 252 |                 <div>
 253 |                     <h1 class="title" v-html="config.titleHTML"></h1>
 254 |                     <h2 class="subtitle" v-html="config.subtitleHTML"></h2>
 255 |                 </div>
 256 |             </div>
 257 |         </div>
 258 | 
 259 |         <div class="container">
 260 |             <!-- Navigation Bar -->
 261 |             <div class="container is-clearfix" style="margin-bottom: 1rem;">
 262 |                 <div class="buttons is-pulled-left" style="width: 100%;">
 263 |                     <div id="breadcrumbs">
 264 |                         <!-- Prefix Breadcrumbs -->
 265 |                         <b-button v-for="(breadcrump, index) in pathBreadcrumbs" v-bind:key="breadcrump.url"
 266 |                                   type="is-primary" rounded
 267 |                                   tag="a"
 268 |                                   :href="breadcrump.url"
 269 |                                   target=""
 270 |                                   icon-pack="fas"
 271 |                                   :icon-left="index == 0 ? 'bucket': ''"
 272 |                                   :style="{ fontWeight: index == 0 ? 'bolder': ''}"
 273 |                                   style="white-space: pre;"
 274 |                         >
 275 |                             <template v-if="index > 0">{{ breadcrump.name }}</template>
 276 |                         </b-button>
 277 |                     </div>
 278 | 
 279 |                     <div class="container" style="display: flex;">
 280 |                         <!-- Prefix Search Input -->
 281 |                         <b-field :type="!validBucketPrefix(searchPrefix) ? 'is-danger' : ''"
 282 |                                  :class="searchPrefix && pathPrefix.replace(/^.*\//,'') === searchPrefix ? 'search-prefix-matches-path-prefix' : ''"
 283 |                                  style="flex: auto;">
 284 |                             <b-input
 285 |                                     rounded
 286 |                                     v-model="searchPrefix"
 287 |                                     placeholder="search by prefix"
 288 |                                     icon="magnifying-glass"
 289 |                                     icon-clickable
 290 |                                     @icon-click="searchByPrefix"
 291 |                                     :icon-right="searchPrefix !== '' ? 'close-circle' : ''"
 292 |                                     icon-right-clickable
 293 |                                     @icon-right-click="searchPrefix = ''; searchByPrefix()"
 294 |                                     @keydown.enter="searchByPrefix"
 295 |                                     enterkeyhint="search">
 296 |                             </b-input>
 297 |                         </b-field>
 298 | 
 299 |                         <!-- Download All Button -->
 300 |                         <b-button
 301 |                                 v-if="config.allowDownloadAll && pathContentTableData.filter(item => item.type === 'content').length >= 2"
 302 |                                 type="is-primary" outlined rounded :loading="downloadAllFilesProgress !== null"
 303 |                                 icon-pack="fas"
 304 |                                 icon-left="download"
 305 |                                 @click="downloadAllFiles"
 306 |                                 style="margin-left: 0.7rem;"
 307 |                         ></b-button>
 308 | 
 309 |                         <!-- Paginating Buttons -->
 310 |                         <div class="container"
 311 |                              v-if="nextContinuationToken || previousContinuationTokens.length > 0"
 312 |                              style="display: contents;">
 313 |                             <div style="margin-left: 0.6rem;"></div>
 314 | 
 315 |                             <b-button
 316 |                                     type="is-primary" rounded
 317 |                                     icon-pack="fas"
 318 |                                     icon-left="angle-left"
 319 |                                     @click="previousPage"
 320 |                                     :disabled="previousContinuationTokens.length === 0"
 321 |                             >
 322 |                             </b-button>
 323 |                             <b-button
 324 |                                     type="is-primary" rounded
 325 |                                     icon-pack="fas"
 326 |                                     icon-right="angle-right"
 327 |                                     @click="nextPage"
 328 |                                     :disabled="!nextContinuationToken"
 329 |                             >
 330 |                             </b-button>
 331 |                         </div>
 332 |                     </div>
 333 |                 </div>
 334 |             </div>
 335 | 
 336 |             <b-progress v-if="downloadAllFilesProgress !== null"
 337 |                         type="is-info"
 338 |                         :value="downloadAllFilesProgress * 105"
 339 |                         show-value
 340 |                         style="margin-bottom: 1rem;"
 341 |             >
 342 |                 <div style="width: 70vw; display: flex; justify-content: space-around;">
 343 |                     <span>{{ `${downloadAllFilesReceivedCount} / ${downloadAllFilesCount} Files` }}</span>
 344 |                 </div>
 345 |             </b-progress>
 346 | 
 347 |             <!-- Content Table -->
 348 |             <b-table
 349 |                     :data="pathContentTableData"
 350 |                     :default-sort="config.defaultOrder.split('-')[0]"
 351 |                     :default-sort-direction="config.defaultOrder.split('-')[1]"
 352 |                     :mobile-cards="true"
 353 |             >
 354 |                 <b-table-column
 355 |                         v-slot="props"
 356 |                         field="name"
 357 |                         label="Name"
 358 |                         sortable :custom-sort="sortTableData('name')"
 359 |                         cell-class="name-column"
 360 |                 >
 361 |                     <div>
 362 |                         <b-icon
 363 |                                 pack="far"
 364 |                                 :icon="props.row.type === 'prefix' ? 'folder' : 'file-alt'"
 365 |                                 size="is-medium"
 366 |                                 class="name-column-icon"
 367 |                         >
 368 |                         </b-icon>
 369 | 
 370 |                         <b-button
 371 |                                 type="is-text" rounded
 372 |                                 tag="a"
 373 |                                 :href="props.row.type === 'content' ? props.row.url : `#${props.row.prefix}`"
 374 |                                 @click="blurActiveElement"
 375 |                         >
 376 |                             {{ props.row.name }}
 377 |                         </b-button>
 378 | 
 379 |                         <div class="name-column-buttons">
 380 |                             <template v-if="props.row.type === 'content'">
 381 |                                 <!-- Markdown Preview Button -->
 382 |                                 <b-button v-if="props.row.name.endsWith('.md')"
 383 |                                           tag="a" type="is-text"
 384 |                                           icon-left="image" size="is-medium"
 385 |                                           :href="`#${pathPrefix.replace(/[^/]*$/, '') + props.row.name}?preview=markdown`"
 386 |                                           target="_blank"
 387 | 
 388 |                                 ></b-button>
 389 | 
 390 |                                 <!-- Install Button -->
 391 |                                 <b-button v-if="props.row.installUrl"
 392 |                                           tag="a" type="is-primary" rounded outlined
 393 |                                           :href="props.row.installUrl"
 394 |                                           target="_blank"
 395 |                                           @click="blurActiveElement"
 396 |                                 >Install
 397 |                                 </b-button>
 398 |                             </template>
 399 |                         </div>
 400 |                     </div>
 401 | 
 402 |                     <div
 403 |                             v-if="cardView && (props.row.size || props.row.dateModified)"
 404 |                             class="name-column-details"
 405 |                     >
 406 |                         <div>{{ formatBytes(props.row.size) }}</div>
 407 | 
 408 |                         <b-tooltip
 409 |                                 :active="!!props.row.dateModified"
 410 |                                 type="is-light"
 411 |                                 size="is-small"
 412 |                                 position="is-left"
 413 |                                 animated
 414 |                                 multilined
 415 |                         >
 416 |                             <div>{{ formatDateTime_relative(props.row.dateModified) }}</div>
 417 |                             <template v-slot:content>
 418 |                                 <span>{{ formatDateTime_date(props.row.dateModified) }}</span>
 419 |                                 <br>
 420 |                                 <span>{{ formatDateTime_time(props.row.dateModified) }}</span>
 421 |                             </template>
 422 |                         </b-tooltip>
 423 | 
 424 |                     </div>
 425 |                 </b-table-column>
 426 |                 <b-table-column
 427 |                         v-slot="props"
 428 |                         field="size" numeric
 429 |                         label="Size"
 430 |                         sortable :custom-sort="sortTableData('size')"
 431 |                         right width="128"
 432 |                         cell-class="size-column"
 433 |                 >
 434 |                     {{ formatBytes(props.row.size) }}
 435 |                 </b-table-column>
 436 |                 <b-table-column
 437 |                         v-slot="props"
 438 |                         field="dateModified"
 439 |                         label="Date Modified"
 440 |                         sortable :custom-sort="sortTableData('dateModified')"
 441 |                         centered width="256"
 442 |                         cell-class="modified-column"
 443 |                 >
 444 |                     <b-tooltip
 445 |                             :active="!!props.row.dateModified"
 446 |                             type="is-light"
 447 |                             size="is-small"
 448 |                             position="is-left"
 449 |                             animated
 450 |                             multilined
 451 |                     >
 452 |                         <div>{{ formatDateTime_relative(props.row.dateModified) }}</div>
 453 |                         <template v-slot:content>
 454 |                             <span>{{ formatDateTime_date(props.row.dateModified) }}</span>
 455 |                             <br>
 456 |                             <span>{{ formatDateTime_time(props.row.dateModified) }}</span>
 457 |                         </template>
 458 |                     </b-tooltip>
 459 |                 </b-table-column>
 460 |             </b-table>
 461 | 
 462 |             <!-- Paginating Buttons -->
 463 |             <div class="container is-clearfix" style="margin-top: 1rem;">
 464 |                 <div v-show="nextContinuationToken || previousContinuationTokens.length > 0"
 465 |                      class="buttons is-pulled-right">
 466 |                     <b-button
 467 |                             type="is-primary" rounded
 468 |                             icon-pack="fas"
 469 |                             icon-left="angle-left"
 470 |                             @click="previousPage"
 471 |                             :disabled="previousContinuationTokens.length === 0"
 472 |                     >
 473 |                     </b-button>
 474 |                     <b-button
 475 |                             type="is-primary" rounded
 476 |                             icon-pack="fas"
 477 |                             icon-right="angle-right"
 478 |                             @click="nextPage"
 479 |                             :disabled="!nextContinuationToken"
 480 |                     >
 481 |                     </b-button>
 482 |                 </div>
 483 |             </div>
 484 |         </div>
 485 | 
 486 |         <!-- Footer -->
 487 |         <div class="footer-bucket-url">
 488 |             <a :href="`${config.bucketMaskUrl || config.bucketUrl}?prefix=${bucketPrefix}`">Bucket: {{ config.bucketUrl }}</a>
 489 |         </div>
 490 | 
 491 |     </div>
 492 | </div>
 493 | 
 494 | <!-- Preview App -->
 495 | <div id="preview" style="display: none;">
 496 |     <zero-md id="preview-markdown" src="#">
 497 |         <template>
 498 |             <!-- Sensible host style defaults -->
 499 |             <style>
 500 |                 :host {
 501 |                     display: block;
 502 |                     position: relative;
 503 |                     contain: content;
 504 |                 }
 505 | 
 506 |                 :host([hidden]) {
 507 |                     display: none;
 508 |                 }
 509 | 
 510 |                 .markdown-body {
 511 |                     padding: 4.5rem max(calc(100% - max(1012px, min(1012px, 100%))) / 2, 2.5rem);
 512 |                     min-height: calc(100vh - (2 * 4.5rem));
 513 |                 }
 514 |             </style>
 515 | 
 516 |             <!-- GitHub markdown styles (light/dark) -->
 517 |             <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@5/github-markdown.min.css"/>-->
 518 |             <!-- GitHub markdown styles (light) -->
 519 |             <link rel="stylesheet"
 520 |                   href="https://cdn.jsdelivr.net/npm/github-markdown-css@5/github-markdown-light.min.css"/>
 521 |             <style>
 522 |                 .markdown-body {
 523 |                     background: whitesmoke;
 524 |                 }
 525 |             </style>
 526 | 
 527 |             <!-- Highlightjs Github theme (light) -->
 528 |             <link rel="stylesheet"
 529 |                   href="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11/styles/github.min.css"/>
 530 |             <!-- Highlightjs Github theme (dark) -->
 531 |             <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11/styles/github-dark.min.css" media="(prefers-color-scheme:dark)" /> -->
 532 | 
 533 |             <!-- KaTeX styles (needed for math) -->
 534 |             <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0/dist/katex.min.css"/>
 535 |         </template>
 536 |     </zero-md>
 537 | </div>
 538 | 
 539 | <!-- GitHub Corner -->
 540 | <a href="https://github.com/qoomon/aws-s3-bucket-browser" class="github-corner" aria-label="View source on GitHub">
 541 |     <svg width="80" height="80" viewBox="0 0 250 250"
 542 |          style="fill:#151513; color:#fff; position: fixed; top: 0; border: 0; right: 0;" aria-hidden="true">
 543 |         <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
 544 |         <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
 545 |               fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
 546 |         <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
 547 |               fill="currentColor" class="octo-body"></path>
 548 |     </svg>
 549 |     <style scopped>.github-corner:hover .octo-arm {
 550 |         animation: octocat-wave 560ms ease-in-out
 551 |     }
 552 | 
 553 |     @keyframes octocat-wave {
 554 |         0%, 100% {
 555 |             transform: rotate(0)
 556 |         }
 557 |         20%, 60% {
 558 |             transform: rotate(-25deg)
 559 |         }
 560 |         40%, 80% {
 561 |             transform: rotate(10deg)
 562 |         }
 563 |     }
 564 | 
 565 |     @media (max-width: 500px) {
 566 |         .github-corner:hover .octo-arm {
 567 |             animation: none
 568 |         }
 569 | 
 570 |         .github-corner .octo-arm {
 571 |             animation: octocat-wave 560ms ease-in-out
 572 |         }
 573 |     }</style>
 574 | </a>
 575 | 
 576 | <!-- Helper Functions -->
 577 | <script>
 578 |     String.prototype.removePrefix = function (prefix) {
 579 |         if (!this.startsWith(prefix)) return this
 580 |         return this.substring(prefix.length)
 581 |     }
 582 | 
 583 |     String.prototype.escapeHTML = function () {
 584 |         const template = document.createElement('span')
 585 |         template.innerText = this
 586 |         return template.innerHTML
 587 |     }
 588 | 
 589 |     function devicePlatform_iOS() {
 590 |         return /iPad|iPhone|iPod/.test(navigator.platform) ||
 591 |             (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
 592 |     }
 593 | 
 594 |     function encodePath(path) {
 595 |         const replaceChars = {
 596 |             ";": "%3B",
 597 |             "?": "%3F",
 598 |             ":": "%3A",
 599 |             "@": "%40",
 600 |             "&": "%26",
 601 |             "=": "%3D",
 602 |             "+": "%2B",
 603 |             "$": "%24",
 604 |             ",": "%2C",
 605 |             "#": "%23"
 606 |         }
 607 |         return encodeURI(path).split("").map(char => replaceChars[char] || char).join("");
 608 |     }
 609 | </script>
 610 | 
 611 | <!-- Config Script -->
 612 | <script>
 613 |     const htmlPrefix = 'HTML>'
 614 |     if (config.title) {
 615 |         if (config.title.startsWith(htmlPrefix)) config.titleHTML = config.title.removePrefix(htmlPrefix)
 616 |         else config.titleHTML = config.title.escapeHTML()
 617 |     }
 618 |     if (config.subtitle) {
 619 |         if (config.subtitle.startsWith(htmlPrefix)) config.subtitleHTML = config.subtitle.removePrefix(htmlPrefix)
 620 |         else config.subtitleHTML = config.subtitle.escapeHTML()
 621 |     }
 622 | 
 623 |     if (!config.bucketUrl) {
 624 |         // try get bucket url by request parameter
 625 |         config.bucketUrl = new URL(window.location).searchParams.get('bucket')
 626 |     }
 627 |     if (!config.bucketUrl) {
 628 |         config.bucketUrl = window.location.href
 629 |     }
 630 | 
 631 |     // try adjusting bucket url to bucket rest api endpoint
 632 |     let match
 633 |     let type
 634 | 
 635 |     if (!match) {
 636 |         type = 'AWS'
 637 |         // check for urls like https://s3.eu-central-1.amazonaws.com/example-bucket/index.html
 638 |         match = config.bucketUrl.match(/(?<protocol>[^:]+):\/\/s3\.(?<region>[^.]+)\.amazonaws.com\/(?<name>[^/]+)(\/(?<prefix>[^?]+))?/)
 639 |     }
 640 |     if (!match) {
 641 |         type = 'AWS'
 642 |         // check for urls like http://example-bucket.s3-website-eu-west-1.amazonaws.com/index.html
 643 |         match = config.bucketUrl.match(/(?<protocol>[^:]+):\/\/(?<name>.+)\.s3-website-(?<region>[^.]+)\.amazonaws\.com(\/(?<prefix>[^?]+))?/)
 644 |     }
 645 |     if (!match) {
 646 |         type = 'AWS'
 647 |         // check for urls like http://example-bucket.s3-website.eu-central-1.amazonaws.com/index.html
 648 |         match = config.bucketUrl.match(/(?<protocol>[^:]+):\/\/(?<name>.+)\.s3-website\.(?<region>[^.]+)\.amazonaws\.com(\/(?<prefix>[^?]+))?/)
 649 |     }
 650 |     if (!match) {
 651 |         type = 'GCP'
 652 |         // check for urls like https://storage.googleapis.com/example-bucket/index.html
 653 |         match = config.bucketUrl.match(/(?<protocol>[^:]+):\/\/storage\.googleapis\.com\/(?<name>[^/]+)(\/(?<prefix>[^?]+))?/)
 654 |     }
 655 |     if (!match) {
 656 |         type = 'DGO'
 657 |         // check for urls like https://example-bucket.nyc3.digitaloceanspaces.com/index.html
 658 |         // check for urls like https://example-bucket.nyc3.cdn.digitaloceanspaces.com/index.html
 659 |         match = config.bucketUrl.match(/(?<protocol>[^:]+):\/\/(?<name>.+)\.(?<region>[^.]+)\.(?<domain>(cdn\.)?digitaloceanspaces\.com)(\/(?<prefix>[^?]+))?/)
 660 |     }
 661 |     if (!match) {
 662 |         type = 'IBM'
 663 |         // check for urls like http://example-bucket.s3-web.us-south.cloud-object-storage.appdomain.cloud/index.html
 664 |         match = config.bucketUrl.match(/(?<protocol>[^:]+):\/\/(?<name>.+)\.s3-web\.(?<region>[^.]+)\.cloud-object-storage\.appdomain\.cloud(\/(?<prefix>[^?]+))?/)
 665 |     }
 666 | 
 667 |     if (match) {
 668 |         switch (type) {
 669 |             case 'AWS':
 670 |                 config.bucketUrl = `${match.groups.protocol}://s3.${match.groups.region}.amazonaws.com/${match.groups.name}`
 671 |                 break;
 672 |             case 'GCP':
 673 |                 config.bucketUrl = `${match.groups.protocol}://storage.googleapis.com/${match.groups.name}`
 674 |                 break;
 675 |             case 'DGO':
 676 |                 config.bucketUrl = `${match.groups.protocol}://${match.groups.name}.${match.groups.region}.${match.groups.domain}`
 677 |                 break;
 678 |             case 'IBM':
 679 |                 config.bucketUrl = `${match.groups.protocol}://${match.groups.name}.s3.${match.groups.region}.cloud-object-storage.appdomain.cloud/`
 680 |                 break;
 681 |         }
 682 |         if (config.rootPrefix === undefined) config.rootPrefix = match.groups.prefix
 683 |     }
 684 |     console.log("Bucket REST API: " + config.bucketUrl)
 685 | 
 686 |     config.rootPrefix = config.rootPrefix || ''
 687 |     if (config.rootPrefix) {
 688 |         config.rootPrefix = config.rootPrefix.replace(/\/?$/, '/') // ensure trailing slash
 689 |         console.log("Bucket Root Prefix: " + config.rootPrefix)
 690 |     }
 691 | 
 692 |     document.title = config.title
 693 |     document.getElementById('favicon').href = config.favicon
 694 | </script>
 695 | 
 696 | <!-- Main Script -->
 697 | <script>
 698 |     const initialHashValue = decodeURIComponent(window.location.hash).replace(/^#/, '') || ''
 699 |     const initialHashValueParams = new URLSearchParams(initialHashValue.replace(/^.*?(\?|$)/, ''))
 700 |     // preview mode
 701 |     if (initialHashValueParams.get('preview')) {
 702 |         document.getElementById('app').remove()
 703 |         document.getElementById('preview').style.display = 'block'
 704 | 
 705 |         const filePath = initialHashValue.replace(/\?.*$/, '')
 706 |         const fileUrl = urlFromFilePath(filePath)
 707 | 
 708 |         const previewFormat = initialHashValueParams.get('preview')
 709 |         const previewElement = document.querySelector(`#preview > #preview-${previewFormat}`);
 710 |         ;// remove all other preview elements
 711 |         [...document.querySelectorAll('#preview > *')]
 712 |             .filter(element => element.id !== previewElement?.id)
 713 |             .forEach(element => element.remove())
 714 |         // set source of preview element
 715 |         switch (previewFormat) {
 716 |             case 'markdown':
 717 |                 previewElement.src = fileUrl
 718 |                 break
 719 |             default:
 720 |                 alert(`Unsupported preview for ${previewFormat} files!`)
 721 |         }
 722 | 
 723 |         function urlFromFilePath(filePath) {
 724 |             return `${(config.bucketMaskUrl || config.bucketUrl).replace(/\/*$/, '')}/${encodePath(filePath)}`
 725 |         }
 726 |     }
 727 |     // explorer mode
 728 |     else {
 729 |         document.getElementById('preview').remove()
 730 |         document.getElementById('app').style.display = 'block'
 731 | 
 732 |         const app = Vue.createApp({
 733 |             data() {
 734 |                 return {
 735 |                     config: config, // defined in <head> section
 736 |                     pathPrefix: '',
 737 |                     searchPrefix: '',
 738 |                     pathContentTableData: [],
 739 | 
 740 |                     previousContinuationTokens: [],
 741 |                     continuationToken: undefined,
 742 |                     nextContinuationToken: undefined,
 743 | 
 744 |                     windowWidth: window.innerWidth,
 745 | 
 746 |                     downloadAllFilesCount: null,
 747 |                     downloadAllFilesReceivedCount: null,
 748 |                     downloadAllFilesProgress: null,
 749 |                 }
 750 |             },
 751 |             computed: {
 752 |                 cssVars() {
 753 |                     return {
 754 |                         '--primary-color': this.config.primaryColor
 755 |                     }
 756 |                 },
 757 |                 pathBreadcrumbs() {
 758 |                     return ['', ...(this.pathPrefix.match(/[^/]*\//g) || [])]
 759 |                         .map((pathPrefixPart, index, pathPrefixParts) => ({
 760 |                             name: decodeURI(pathPrefixPart),
 761 |                             url: '#' + pathPrefixParts.slice(0, index).join('') + pathPrefixPart
 762 |                         }))
 763 |                 },
 764 |                 cardView() {
 765 |                     return this.windowWidth <= 768
 766 |                 },
 767 |                 bucketPrefix() {
 768 |                     return `${config.rootPrefix}${this.pathPrefix}`
 769 |                 }
 770 |             },
 771 |             watch: {
 772 |                 pathPrefix() {
 773 |                     this.previousContinuationTokens = []
 774 |                     this.continuationToken = undefined
 775 |                     this.nextContinuationToken = undefined
 776 |                     this.searchPrefix = this.pathPrefix.replace(/^.*\//, '')
 777 |                     window.location.hash = this.pathPrefix
 778 |                     this.refresh()
 779 |                 }
 780 |             },
 781 |             methods: {
 782 |                 blurActiveElement() {
 783 |                     document.activeElement.blur()
 784 |                 },
 785 |                 moment,
 786 |                 validBucketPrefix(prefix) {
 787 |                     if (prefix === '') return true
 788 |                     if (prefix.startsWith(' ') || prefix.endsWith(' ')) return false
 789 |                     if (prefix.includes('//')) return false
 790 |                     if (prefix.startsWith('/') && this.bucketPrefix.includes('/')) return false
 791 |                     return true
 792 |                 },
 793 |                 searchByPrefix() {
 794 |                     if (this.validBucketPrefix(this.searchPrefix)) {
 795 |                         const pathPrefixDir = this.pathPrefix.replace(/[^/]*$/, '')
 796 |                         this.pathPrefix = pathPrefixDir + this.searchPrefix
 797 |                     }
 798 |                 },
 799 |                 previousPage() {
 800 |                     if (this.previousContinuationTokens.length > 0) {
 801 |                         this.continuationToken = this.previousContinuationTokens.pop()
 802 |                         this.refresh()
 803 |                     }
 804 |                 },
 805 |                 nextPage() {
 806 |                     if (this.nextContinuationToken) {
 807 |                         this.previousContinuationTokens.push(this.continuationToken)
 808 |                         this.continuationToken = this.nextContinuationToken
 809 |                         this.refresh()
 810 |                     }
 811 |                 },
 812 |                 async downloadAllFiles() {
 813 | 
 814 | 
 815 |                     const archiveFiles = this.pathContentTableData
 816 |                         .filter(item => item.type === 'content')
 817 |                         .map(item => item.url);
 818 | 
 819 |                     this.downloadAllFilesCount = archiveFiles.length;
 820 |                     this.downloadAllFilesReceivedCount = 0;
 821 |                     this.downloadAllFilesProgress = 0;
 822 | 
 823 |                     let totalContentLength = 0;
 824 |                     let totalReceivedLength = 0;
 825 | 
 826 |                     const archiveName = this.pathPrefix.split('/')
 827 |                         .filter(part => part.trim()).pop();
 828 |                     console.debug(`create archive for ${archiveName}...`)
 829 |                     const archiveData = []
 830 |                     const archive = new fflate.Zip((err, data, final) => {
 831 |                         if (err) throw err;
 832 |                         archiveData.push(data);
 833 |                     });
 834 | 
 835 |                     await Promise.all(archiveFiles.map(async (url) => {
 836 |                         const fileName = url.split('/')
 837 |                             .filter(part => part.trim()).pop();
 838 |                         console.debug(`downloading ${fileName}...`);
 839 |                         const fileStream = new fflate.ZipPassThrough(fileName);
 840 |                         archive.add(fileStream);
 841 | 
 842 |                         const fileResponse = await fetch(url);
 843 |                         totalContentLength += parseInt(fileResponse.headers.get('Content-Length'));
 844 |                         const fileReader = fileResponse.body.getReader();
 845 | 
 846 |                         while (true) {
 847 |                             const {done, value} = await fileReader.read();
 848 |                             if (done) {
 849 |                                 fileStream.push(new Uint8Array(), true);
 850 |                                 break;
 851 |                             }
 852 |                             fileStream.push(new Uint8Array(value));
 853 | 
 854 |                             totalReceivedLength += value.length;
 855 |                             this.downloadAllFilesProgress = (
 856 |                                 (totalReceivedLength / totalContentLength) +
 857 |                                 (this.downloadAllFilesReceivedCount / this.downloadAllFilesCount)
 858 |                             ) / 2;
 859 |                         }
 860 |                         this.downloadAllFilesReceivedCount++;
 861 |                     })).then(() => archive.end());
 862 |                     console.debug('done!')
 863 | 
 864 |                     const archiveBlob = new Blob(archiveData, {type: 'application/octet-stream'});
 865 |                     const objectUrl = window.URL.createObjectURL(archiveBlob);
 866 |                     const link = document.createElement('a');
 867 |                     link.href = objectUrl;
 868 |                     link.download = `${archiveName}.zip`;
 869 |                     link.click();
 870 |                     window.URL.revokeObjectURL(objectUrl);
 871 | 
 872 |                     this.downloadAllFilesCount = null;
 873 |                     this.downloadAllFilesReceivedCount = null;
 874 |                     this.downloadAllFilesProgress = null;
 875 |                 },
 876 |                 async refresh() {
 877 |                     let listBucketResult
 878 |                     try {
 879 |                         if (!config.bucketUrl) {
 880 |                             throw Error("Bucket URL is undefined!")
 881 |                         }
 882 | 
 883 |                         let bucketListApiUrl = `${config.bucketUrl}?list-type=2`
 884 |                         bucketListApiUrl += `&delimiter=/`
 885 |                         bucketListApiUrl += `&prefix=${this.bucketPrefix}`
 886 | 
 887 |                         if (config.pageSize) {
 888 |                             bucketListApiUrl += `&max-keys=${config.pageSize}`
 889 |                         }
 890 |                         if (this.continuationToken) {
 891 |                             bucketListApiUrl += `&continuation-token=${encodePath(this.continuationToken)}`
 892 |                         }
 893 |                         let listBucketResultResponse = await fetch(bucketListApiUrl)
 894 |                         let listBucketResultXml = await listBucketResultResponse.text()
 895 | 
 896 |                         listBucketResult = new DOMParser().parseFromString(listBucketResultXml, "text/xml")
 897 |                         if (!listBucketResult.querySelector('ListBucketResult > Delimiter')) {
 898 |                             throw Error(`Bucket URL ${config.bucketUrl} is not a valid bucket API URL, response does not contain <ListBucketResult><Delimiter> tag.`)
 899 |                         }
 900 |                     } catch (error) {
 901 |                         this.$buefy.notification.open({
 902 |                             message: error.message?.escapeHTML(),
 903 |                             type: 'is-danger',
 904 |                             duration: 60000,
 905 |                             position: 'is-bottom'
 906 |                         })
 907 |                         throw error
 908 |                     }
 909 | 
 910 |                     let nextContinuationTokenTag = listBucketResult.querySelector("NextContinuationToken")
 911 |                     this.nextContinuationToken = nextContinuationTokenTag && nextContinuationTokenTag.textContent
 912 | 
 913 |                     let commonPrefixes = [...listBucketResult.querySelectorAll("ListBucketResult > CommonPrefixes")]
 914 |                         .map(tag => ({
 915 |                             prefix: tag.querySelector('Prefix').textContent.removePrefix(config.rootPrefix)
 916 |                         }))
 917 |                         .filter(prefix => !config.keyExcludePatterns.find(pattern => pattern.test(prefix.prefix.removePrefix(config.rootPrefix))))
 918 |                         .map(prefix => ({
 919 |                             type: 'prefix',
 920 |                             name: prefix.prefix.split('/').slice(-2)[0] + '/',
 921 |                             prefix: prefix.prefix
 922 |                         }))
 923 | 
 924 |                     let contents = [...listBucketResult.querySelectorAll("ListBucketResult > Contents")]
 925 |                         .map(tag => ({
 926 |                             key: tag.querySelector('Key').textContent,
 927 |                             size: parseInt(tag.querySelector('Size').textContent),
 928 |                             dateModified: new Date(tag.querySelector('LastModified').textContent)
 929 |                         }))
 930 |                         .filter(content => content.key !== decodeURI(this.bucketPrefix))
 931 |                         .filter(content => !config.keyExcludePatterns.find(pattern => pattern.test(content.key.removePrefix(config.rootPrefix))))
 932 |                         .map(content => {
 933 |                             if (content.key.endsWith('/') && !content.size) {
 934 |                                 return {
 935 |                                     type: 'prefix',
 936 |                                     name: content.key.split('/')[0] + '/',
 937 |                                     prefix: `${this.pathPrefix}${content.key}`
 938 |                                 }
 939 |                             }
 940 | 
 941 |                             let url = `${(config.bucketMaskUrl || config.bucketUrl).replace(/\/*$/, '')}/${encodePath(content.key)}`
 942 |                             let installUrl = undefined
 943 |                             if (url.endsWith('/manifest.plist') && devicePlatform_iOS()) {
 944 |                                 // generate manifest.plist install urls
 945 |                                 installUrl = `itms-services://?action=download-manifest&url=${encodePath(url)}`
 946 |                             }
 947 |                             return {
 948 |                                 type: 'content',
 949 |                                 name: content.key.split('/').slice(-1)[0],
 950 |                                 size: content.size,
 951 |                                 dateModified: content.dateModified,
 952 | 
 953 |                                 key: content.key,
 954 |                                 url,
 955 |                                 installUrl
 956 |                             }
 957 |                         })
 958 | 
 959 |                     this.pathContentTableData = [...commonPrefixes, ...contents]
 960 |                 },
 961 |                 sortTableData(columnName) {
 962 |                     return (rowA, rowB, isAsc) => {
 963 |                         // prefixes always first
 964 |                         if (rowA.type != rowB.type) {
 965 |                             return rowA.type === 'prefix' ? -1 : 1
 966 |                         }
 967 | 
 968 |                         const valueA = rowA[columnName]
 969 |                         const valueB = rowB[columnName]
 970 |                         if (valueA != valueB) {
 971 |                             if (valueA === undefined) {
 972 |                                 return isAsc ? -1 : 1
 973 |                             }
 974 |                             if (valueB === undefined) {
 975 |                                 return isAsc ? 1 : -1
 976 |                             }
 977 |                             return isAsc ?
 978 |                                 (valueA < valueB ? -1 : 1) :
 979 |                                 (valueA < valueB ? 1 : -1)
 980 |                         }
 981 | 
 982 |                         return 0
 983 |                     }
 984 |                 },
 985 |                 formatBytes(size) {
 986 |                     if (!size) {
 987 |                         return '-'
 988 |                     }
 989 |                     const KB = 1024
 990 |                     if (size < KB) {
 991 |                         return size + '  B'
 992 |                     }
 993 |                     const MB = 1048576
 994 |                     if (size < MB) {
 995 |                         return (size / KB).toFixed(0) + ' KB'
 996 |                     }
 997 |                     const GB = 1073741824
 998 |                     if (size < GB) {
 999 |                         return (size / MB).toFixed(2) + ' MB'
1000 |                     }
1001 |                     return (size / GB).toFixed(2) + ' GB'
1002 |                 },
1003 |                 formatDateTime_date(date) {
1004 | 
1005 |                     return date ? moment(date).format('ddd, DD. MMM YYYY') : '-'
1006 |                 },
1007 |                 formatDateTime_time(date) {
1008 |                     return date ? moment(date).format('hh:mm:ss') : '-'
1009 |                 },
1010 |                 formatDateTime_relative(date) {
1011 |                     return date ? moment(date).fromNow() : '-'
1012 |                 }
1013 |             },
1014 |             async mounted() {
1015 |                 window.onpopstate = () => this.pathPrefix = decodeURIComponent(window.location.hash).replace(/^#/, '')
1016 |                 window.onpopstate()
1017 |                 window.addEventListener('resize', () => {
1018 |                     this.windowWidth = window.innerWidth
1019 |                 })
1020 | 
1021 |                 this.refresh()
1022 |             },
1023 |             async beforeUnmount() {
1024 |                 window.removeEventListener('resize')
1025 |             }
1026 |         })
1027 |         app.use(Buefy.default, {defaultIconPack: 'fas'})
1028 |         app.mount('#app')
1029 |     }
1030 | </script>
1031 | </body>
1032 | 
1033 | </html>
1034 | 


--------------------------------------------------------------------------------
/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qoomon/aws-s3-bucket-browser/5e836768f92beae68057b6fbb622cf0ec5666bbb/logo.png


--------------------------------------------------------------------------------