We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Upload button not showing

Thread ID:

Created:

Updated:

Platform:

Replies:

146397 Aug 2,2019 12:12 PM UTC Aug 6,2019 10:51 AM UTC Angular - EJ 2 2
loading
Tags: Uploader
LUCIANO ALMEIDA PIMENTA
Asked On August 2, 2019 12:12 PM UTC



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 [Syncfusion]
Replied On August 5, 2019 12:24 PM UTC

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 [Syncfusion]
Replied On August 6, 2019 10:51 AM UTC

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. 
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}}); 
} 
} 
 


 
 
To know more about Uploader component, please refer the below UG documentation link. 
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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon