All Components

Globalization

Globalization is a process that combines the translation of component messages and the usage of specific culture locales.

The following example demonstrates how to customize the built-in messages of the Upload.

import { Component } from '@angular/core';

@Component({
  selector: 'my-upload',
  template: `
  <kendo-upload
    [autoUpload]="false"
    [saveUrl]="uploadSaveUrl"
    [removeUrl]="uploadRemoveUrl">
    <kendo-upload-messages
        select="Seleccione..."
        uploadSelectedFiles="Subir archivos"
        clearSelectedFiles="Anular la selección"
        >
    </kendo-upload-messages>
  </kendo-upload>
  `
})
export class UploadComponent {
  uploadSaveUrl: string = "saveUrl";
  uploadRemoveUrl: string = "removeUrl";
}
import { Component } from '@angular/core';
import { Response, ResponseOptions } from '@angular/http';
import { MockBackend } from '@angular/http/testing';

@Component({
  selector: 'my-app',
  template: `<my-upload></my-upload>`
})
export class AppComponent {
  constructor(private backend: MockBackend) {
    /*
      Mocked backend service.
      For further details check:
      https://angular.io/docs/ts/latest/api/http/testing/index/MockBackend-class.html
    */
    this.backend.connections.subscribe((c: any) => {
      let response = new Response(<ResponseOptions>{ status: 200 });

      if (c.request.url === "saveUrl") {
        c.mockDownload(response);

        setTimeout(() => {
          c.mockRespond(response);
        }, 1500);
      } else if (c.request.url === "removeUrl") {
        c.mockRespond(response);
      }
    });
  }
}
import { enableProdMode, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Http, HttpModule, ConnectionBackend, BaseRequestOptions,
         Response, ResponseOptions, ResponseType } from '@angular/http';
import { MockBackend } from '@angular/http/testing';
import { UploadModule } from '@progress/kendo-angular-upload';
import { AppComponent }   from './app.component';
import { UploadComponent }  from './upload.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports:      [ BrowserModule, HttpModule, UploadModule, BrowserAnimationsModule ],
  declarations: [ AppComponent, UploadComponent ],
  bootstrap:    [ AppComponent ],
  providers: [BaseRequestOptions, MockBackend, {
        provide: Http,
        deps: [MockBackend, BaseRequestOptions],
        useFactory: (backend, options) => {
            return new Http(backend, options);
        }
  }]
})

export class AppModule { }

enableProdMode();

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Internationalization

The Upload does not provide specific culture locales.

For more information on the Kendo UI for Angular Internationalization (i18n) component, refer to kendo-angular-intl. For more information on the date and number formats Kendo UI for Angular supports, refer to kendo-intl.

Localization

Localization (l10n) is the process of translating the component messages in specific languages.

Built-In Messages

To translate the built-in Upload messages, you can utilize the Angular i18n framework. For more information on how to achieve this, refer to the article on Localization.

Custom Messages

You can also override individual messages for each Upload instance by utilizing the attribute bindings.

In this article