import { customElement, DeesElement, TemplateResult, property, html, css, unsafeCSS, cssManager, } from '@designestate/dees-element'; import * as domtools from '@designestate/dees-domtools'; declare global { interface HTMLElementTagNameMap { 'dees-input-fileupload': DeesInputFileupload; } } @customElement('dees-input-fileupload') export class DeesInputFileupload extends DeesElement { public static demo = () => html``; // INSTANCE public changeSubject = new domtools.rxjs.Subject(); @property({ type: String, }) public label: string = null; @property({ type: String, }) public key: string; @property({ attribute: false, }) public value: File[] = []; @property() public state: 'idle' | 'dragOver' | 'dropped' | 'uploading' | 'completed' = 'idle'; public static styles = [ cssManager.defaultStyles, css` :host { position: relative; display: grid; margin: 10px 0px; margin-bottom: 24px; } .maincontainer { color: ${cssManager.bdTheme('#333', '#ccc')}; } .label { font-size: 14px; margin-bottom: 5px; } .uploadButton { position: relative; cursor: pointer; padding: 20px 20px; max-width: 200px; background: ${cssManager.bdTheme('#fafafa', '#333333')}; border-radius: 3px; text-align: center; } .uploadButton::after { top: 7px; right: 7px; left: 7px; bottom: 7px; transform: scale3d(0.9, 0.9, 1); position: absolute; content: ''; display: block; border: 4px dashed rgba(255, 255, 255, 0); transition: all 0.2s; } .uploadButton.dragOver::after { transform: scale3d(1, 1, 1); border: 4px dashed rgba(255, 255, 255, 0.3); } `, ]; public render(): TemplateResult { return html`
${this.label ? html`
${this.label}
` : null}
Upload File! (Drag/Drop enabled)
`; } public async updateValue(eventArg: Event) { const target: any = eventArg.target; this.value = target.value; this.changeSubject.next(this); } public firstUpdated() { const dropArea = this.shadowRoot.querySelector('.uploadButton'); const handlerFunction = (eventArg: DragEvent) => { eventArg.preventDefault(); switch(eventArg.type) { case 'dragover': this.state = 'dragOver'; break; case 'dragleave': this.state = 'idle'; break; } console.log(eventArg); for (const file of Array.from(eventArg.dataTransfer.files)) { this.value.push(file); }; console.log(`Got ${this.value.length} files!`); }; dropArea.addEventListener('dragenter', handlerFunction, false); dropArea.addEventListener('dragleave', handlerFunction, false); dropArea.addEventListener('dragover', handlerFunction, false); dropArea.addEventListener('drop', handlerFunction, false); } }