@programmerg/bs-elements 0.1.0

package/src/extra/BsUploader.js

@@ -0,0 +1,154 @@
+import BsElement from '../core/BsElement';
+import Resumable from 'resumablejs';
+
+export class BsUploader extends BsElement {
+
+  static get properties() {
+    return {
+      state: {type: String},
+      progress: {type: Number},
+      action: {type: String},
+      _files: {state: true},
+      _uploadHandler: {state: false},
+    }
+  }
+
+  static get bs() {
+    return Resumable;
+  }
+
+  firstUpdated() {
+    this._ensureResumable();
+
+    return html`
+      <bs-input type="file" ?multiple=${this.multiple}>
+        Drop video files here to upload or 
+        <a id="browseButton"><u>select from your computer</u></a>
+      </bs-input>
+
+      <div class="progress" style="display:none">
+        <table class="table table-sm">
+          <tr>
+            <td></td>
+            <td></td>
+            <td style="width:100px">
+              <div class="progress" role="progressbar" aria-valuenow="${(this.progress*100)}" aria-valuemin="0" aria-valuemax="100">
+                <div class="progress-bar" style="${'width: ' + (this.progress*100) + '%'}"></div>
+              </div>
+            </td>
+            <td>
+              <button type="button" class="btn btn-default btn-sm" style="${((this._uploadHandler.isUploading() || this.files.length < 1) ? 'display:none' : '')}" $click=${this._uploadHandler.upload()}>Start/Resume</button>
+              <button type="button" class="btn btn-default btn-sm" style="${(!this._uploadHandler.isUploading() ? 'display:none' : '')}" $click=${this._uploadHandler.pause()}>Pause</button>
+              <button type="button" class="btn btn-default btn-sm" style="${(!this._uploadHandler.isUploading() ? 'display:none' : '')}" $click=${this._uploadHandler.cancel()}>Stop</button>
+            </td>
+          </tr>
+          ${this.renderFiles ? this.files.map(this._renderFile) : nothing}
+        </table>
+      </div>
+    `;
+  }
+
+  _renderFile(file) {
+    return html`
+      <tr>
+        <td>${file.fileName}</td>
+        <td>${file.size}</td>
+        <td>
+          ${file.isUploading() ? html`
+          <div class="progress" role="progressbar" aria-valuenow="${(file.progress()*100)}" aria-valuemin="0" aria-valuemax="100">
+            <div class="progress-bar" style="${'width: ' + (file.progress()*100) + '%'}"></div>
+          </div>
+          ` : nothing}
+        </td>
+        <td>
+          <button type="button" class="btn btn-default btn-sm" style="${((!file.isUploading() && !file.isComplete()) ? 'display:none' : '')}" $click=${file.retry()}>Retry</button>
+          <button type="button" class="btn btn-default btn-sm" style="${((file.isUploading() && !file.isComplete()) ? 'display:none' : '')}" $click=${file.abort()}>Abort</button>
+          <button type="button" class="btn btn-default btn-sm" style="${((file.isUploading() && !file.isComplete()) ? 'display:none' : '')}" $click=${file.cancel()}>Cancel</button>
+        </td>
+      </tr>
+    `;
+  }
+
+  _ensureResumable() {
+    let target = '';
+    const form = this.closest('form');
+    if (form && form.action) target = form.action;
+      
+    const headers = {};
+    const jwtToken = localStorage.getItem('token');
+    if (jwtToken) headers["Authorization"] = "Bearer " + jwtToken;
+
+    const uploadHandler = new Resumable({
+      target: target,
+      chunkSize: 5*1024*1024,
+      forceChunkSize: false,
+      simultaneousUploads: 4,
+      fileParameterName: 'file',
+      chunkNumberParameterName: 'chunkNumber',
+      totalChunksParameterName: 'totalChunks',
+      chunkSizeParameterName: 'chunkSize',
+      totalSizeParameterName: 'totalSize',
+      identifierParameterName: 'identifier',
+      fileNameParameterName: 'filename',
+      relativePathParameterName: 'relativePath',
+      currentChunkSizeParameterName: 'currentChunkSize',
+      typeParameterName: 'type',
+      query: {_token: csrfToken},
+      uploadMethod: 'POST',
+      headers: headers,
+      method: 'multipart', // octet
+      testChunks: false,
+      maxFiles: undefined,
+      maxFilesErrorCallback: (files, errorCount) => {},
+      maxFileSize: 5*1024*1024*1204,
+      maxFileSizeErrorCallback: (file, errorCount) => {},
+      fileType: ["image/jpeg"], // any
+      fileTypeErrorCallback: (file, errorCount) => {},
+      maxChunkRetries: 3,
+      withCredentials: false, // send cookies?
+      setChunkTypeFromFile: false, // Set content-type from original file or application/octet-stream
+    });
+
+    uploadHandler.on('uploadStart', () => {
+      this.state = 'UPLOADING';
+    });
+    uploadHandler.on('progress', () => {
+      this.progress = uploadHandler.progress();
+    });
+    uploadHandler.on('pause', () => {
+      this.state = 'PAUSED';
+    });
+    uploadHandler.on('cancel', () => {
+      this.state = 'IDLE';
+    });
+    uploadHandler.on('complete', () => {
+      this.state = 'COMPLETED';
+    });
+    uploadHandler.on('error', (msg, file) => {
+      this.state = 'FAILED';
+    });
+
+    uploadHandler.on('fileAdded', (file, event) => {
+      this._files = [...uploadHandler.files];
+    });
+    uploadHandler.on('fileProgress', (file, message) => {
+      this._files = [...uploadHandler.files];
+    });
+    uploadHandler.on('fileRetry', (file) => {
+      this._files = [...uploadHandler.files];
+    });
+    uploadHandler.on('fileSuccess', (file, message) => {
+      this._files = [...uploadHandler.files];
+    });
+    uploadHandler.on('fileError', (file, message) => {
+      this._files = [...uploadHandler.files];
+    });
+
+    uploadHandler.assignBrowse(this.getElementById('browseButton'));
+    uploadHandler.assignDrop(this.getElementById('dropTarget'));
+
+    this._uploadHandler = uploadHandler;
+  }
+}
+
+customElements.define('bs-uploader', BsUploader);

package/src/index.js

@@ -0,0 +1,12 @@
+export { default as BsAccordion } from "./base/BsAccordion.js"
+export { default as BsAlert } from "./base/BsAlert.js"
+export { default as BsButton } from "./base/BsButton.js"
+export { default as BsCarousel } from "./base/BsCarousel.js"
+export { default as BsCollapse } from "./base/BsCollapse.js"
+export { default as BsDropdown } from "./base/BsDropdown.js"
+export { default as BsModal } from "./base/BsModal.js"
+export { default as BsOffcanvas } from "./base/BsOffcanvas.js"
+export { default as BsPopover } from "./base/BsPopover.js"
+export { default as BsTab } from "./base/BsTab.js"
+export { default as BsToast } from "./base/BsToast.js"
+export { default as BsTooltip } from "./base/BsTooltip.js"