I have a dxFileUploader:

<div data-bind="dxFileUploader: { buttonText: 'Select file', labelText: 'Drop file here', accept: 'image/*' }"></div>

On the UI I got a surrounding white area (div).

How to get rid of it? I need only a simple button with an icon and no text that looks like this:

<div data-bind="dxButton: { icon: 'arrowup' }"></div>

I have a dxFileUploader:

<div data-bind="dxFileUploader: { buttonText: 'Select file', labelText: 'Drop file here', accept: 'image/*' }"></div>

On the UI I got a surrounding white area (div).

How to get rid of it? I need only a simple button with an icon and no text that looks like this:

<div data-bind="dxButton: { icon: 'arrowup' }"></div>

• javascript
• user-interface
• knockout.js
• devexpress
• devextreme

3 Answers 3

Use following styling for your file uploader

.dx-fileuploader, 
.dx-fileuploader * {
    display: inline-block;    
    margin: 0;
    vertical-align: middle;
}
.dx-fileuploader-input-container {
    display: none;
}
.dx-fileuploader-wrapper, 
.dx-fileuploader-input-wrapper{
    padding: 0;
    border: none;
}

To set icon to the button do following

$("#fileUploader").find(".dx-button").dxButton("option", "icon", "arrowup");

If you also need to hide selected files information add one more css rule

.dx-fileuploader-files-container {
    display: none;
}

See the fiddle http://jsfiddle/tabalinas/uf5vzgdw/

Simply just set [showFileList]="false"

ex:

<dx-file-uploader
  selectButtonText="Select File..."
   [showFileList]="false"
   labelText
   accept="image/*"
   uploadMode="useForm">
 </dx-file-uploader>

you can hack with fontawesome in

onContentReady = e => {
    const node = document.createElement('I');
    node.className = 'cstm-icon fas fa-upload'
    document.querySelector('.uploader-container .dx-button-text').appendChild(node);
}

and add some css