Upload button not showing

[LUCIANO ALMEIDA PIMENTA]

I could not reproduce the example page: https://ej2.syncfusion.com/angular/documentation/uploader/getting-started/

My control does not appear with the Upload button. I used:

<ejs-uploader #defaultupload [autoUpload] = 'false' locale = 'locale'> </ejs-uploader>

In that same case, how can I override the Upload button click?

[Narayanasamy Panneer Selvam]

Hi LUCIANO,

Greetings from Syncfusion support.

Currently we are working on your issue, we will get back to you with further details shortly. 

 

Regards, 

Narayanasamy P. 

[Narayanasamy Panneer Selvam]

Hi LUCIANO, 

 

Thanks for your patience. 

We have validated your queries. Please find the details in below, 

Query 1: I could not reproduce the example page: https://ej2.syncfusion.com/angular/documentation/uploader/getting-started/ 

 

Answer: 

We were unable to reproduce your issue from the getting started document. Uploader was rendered with Upload and Cancel buttons.

Sample Link: 

Also, if you want to change the button names in the Uploader component as per the required culture, you can load it as mentioned in the below code example. Here, we have changed as per the “fr-CH” culture. 

[app.component.html] 

<ejs-uploader #defaultupload [autoUpload]='false' [asyncSettings]='path' [locale]='locale'></ejs-uploader> 

 

[app.component.ts] 

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

import { detach, L10n } from '@syncfusion/ej2-base'; 

 

@Component({ 

selector: 'app-root', 

templateUrl: './app.component.html', 

styleUrls: ['./app.component.css'] 

}) 

export class AppComponent { 

// Define the Save and remove URL for upload and remove action 

public path = { 

saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save', 

removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove' 

{color:#ff991f}}; 

// Define the locale. 

locale= 'fr-CH'; 

ngOnInit() { 

// Customize the Uploader names with corresponding locale. 

L10n.load({ 

"fr-CH": { 

"uploader": { 

"invalidMinFileSize": "La taille du fichier est trop petite! S'il vous plaît télécharger des fichiers avec une taille minimale de 10 Ko", 

"invalidMaxFileSize": "La taille du fichier dépasse 28 Mo", 

"invalidFileType": "Le type de fichier n'est pas autorisé", 

"Browse": "Feuilleter", 

"Clear": "Clair", 

"Upload": "Télécharger", 

"dropFilesHint": "ou Déposer des fichiers ici", 

"uploadFailedMessage": "Impossible d'importer le fichier", 

"uploadSuccessMessage": "Fichier téléchargé avec succès", 

"removedSuccessMessage": "Fichier supprimé avec succès", 

"removedFailedMessage": "Le fichier n'a pas pu être supprimé", 

"inProgress": "Téléchargement", 

"readyToUploadMessage": "Prêt à télécharger", 

"remove": "Retirer", 

"cancel": "Annuler", 

"delete": "Supprimer le fichier" 

} 

} 

}) 

} 

 

 

 

To know more about localization, please refer the below UG link. 

UG Link: https://ej2.syncfusion.com/angular/documentation/uploader/localization/ 

Query 2: 

In that same case, how can I override the Upload button click? 

Answer: 

We can override the upload button click by create the external HTML button component by using “buttons” API as mentioned in the below code example. Here, we bind the click event to the external button component and call the upload method from the Uploader source. 

[app.component.html] 

<ejs-uploader #defaultupload id='defaultfileupload' [asyncSettings]='path' [autoUpload]='false' [dropArea]='dropElement' (removing)='onFileRemove($event)' [buttons]='buttons'></ejs-uploader> 

 

[app.component.ts]

 

import { Component, ViewChild, ViewEncapsulation, Inject } from '@angular/core'; 

import { createElement } from '@syncfusion/ej2-base'; 

import { UploaderComponent, RemovingEventArgs } from '@syncfusion/ej2-angular-inputs'; 

 

@Component({ 

selector: 'app-root', 

templateUrl: 'app.component.html', 

styleUrls: ['app.component.css'], 

encapsulation: ViewEncapsulation.None 

}) 

export class AppComponent { 

@ViewChild('defaultupload') 

public uploadObj: UploaderComponent; 

public path: Object = { 

saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save', 

removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove' 

}; 

public dropElement: HTMLElement = document.getElementsByClassName('control-fluid')[0] as HTMLElement; 

public onFileRemove(args: RemovingEventArgs): void { 

args.postRawFile = false; 

} 

public uploadEle: HTMLElement = createElement('span', { className: 'upload e-icons', innerHTML: 'Upload All' }); 

public buttons: Object = { 

browse: 'Choose file', 

// Assign the external button to upload button 

upload: this.uploadEle 

{color:#ff991f}}; 

 

ngAfterViewInit() { 

// Store the uploader instnce in the variable 

var Uploader = this.uploadObj; 

(this.uploadEle).addEventListener('click', function (e) { 

// Call source upload method to perform upload action 

(Uploader as any).uploadButtonClick(); 

{color:#ff991f}}); 

} 

} 

 

 

 

Sample Link: https://stackblitz.com/edit/angular-cduza6-dajge7?file=app.component.ts 

To know more about Uploader component, please refer the below UG documentation link. 

UG LInk:https://ej2.syncfusion.com/angular/documentation/uploader/how-to/customize-button-with-html-element/ 

Still the reported issue persists, please revert us with issue reproducing sample, code example or clear requirement that will help us to provide the exact solution at our end. 

 

 

Regards, 

Narayanasamy P.