Search results

Customize Button with HTML Element in Angular Uploader component

The uploader component allows you to customize the action buttons by using the buttons  property. Refer to the following example.

Source
Preview
app.component.ts
app.module.ts
main.ts
default.html
index.css
import { Component } from '@angular/core';
import { createElement } from '@syncfusion/ej2-base';
@Component({
    selector: 'app-root',
    templateUrl: 'default.html',
    styleUrls: ['index.css']
})

export class AppComponent {

   public path: Object = {
       saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',
       removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'
   };
   public uploadEle: HTMLElement = createElement('span', { className: 'upload e-icons', innerHTML : 'Upload All' });
   public clearEle = createElement('span', { className: 'remove e-icons', innerHTML : 'Clear All' });
   public buttons: Object = {
    browse: 'Choose file',
    clear: this.clearEle,
    upload: this.uploadEle
   };
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { UploaderModule } from '@syncfusion/ej2-angular-inputs';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, UploaderModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<div class="control-section">
    <div class="col-lg-9">
        <div class="control_wrapper">
            <ejs-uploader #defaultupload id='fileupload' [asyncSettings]='path' [autoUpload]='false' [buttons]="buttons"></ejs-uploader>
        </div>
    </div>
</div>
#container {
  visibility: hidden;
}

#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}

.control_wrapper {
  max-width: 500px;
  min-width: 245px;
  margin: auto;
}
.e-upload .e-upload-actions .e-file-clear-btn,
.e-upload .e-upload-actions .e-file-upload-btn {
  -webkit-tap-highlight-color: transparent;
    background-color: #ddd;
    border-color: #c3c3c3;
    color: #000000;
    box-shadow: none;
    width: 50%;
    margin: 0;
    text-transform: none;
    padding: 8px 0;
}
.upload::before {
  content: '\e725';
  position: relative;
  font-size: 10px;
  right: 10px;
}
.remove::before {
  content: '\e932';
  position: relative;
  font-size: 10px;
  right: 10px;
}

.e-upload .e-upload-actions {
  width: 100%;
}