@rws-framework/components/src/components/rws/uploader/template.html

<div class="upload_area">
    <section>
        <h3>Upload file</h3>
        <rws-progress :value="${x => x.uploadProgress}" min="1" max="100"></rws-progress>
        <article>
            <div class="drag-and-drop"> 
                <div @click="${x => !x.chosenFile ? x.onChoose() : (() => {})()}" class="upl-background"></div>
                ${T.when(x => !x.chosenFile, T.html`<p @click="${x => !x.chosenFile ? x.onChoose() : (() => {})()}" class="dropinfo">Drag and drop here to upload</p>`)}
                ${T.when(x => x.chosenFile, T.html`<div class="file-block">${ x => x.chosenFile.name} <span @click="${ x => x.removeFile() }" class="close-btn">X</span></div>`)}
            </div>
            <div class="upl-controls">
                <button @click="${ x => x.onChoose() }" class="outline">Choose file</button>                
            </div>
        </article>
        <button @click="${ x => x.onUploadStart() }" :disabled="${ x => x.chosenFile ? false : true }" appearance="accent" class="next">Upload</button>
    </section>
</div>