We recently upgraded to v13.1 Angular single solution. The admin users page import from Excel functionality no longer works.
The Import Users from Excel function allow us to select an excel file, but then does not do anything. there is no submit button - it uses the uploadHandler to auto execute when the file is selected. but it doesn't. they typescript "uploadExcel" never fires. it logs nothing to the console. there are no errors. just pick a file and it closes the control. that's it. I don't understand how the handler passing the event as a parameter convert to the files. Am i missing something that takes the event parameter and returns the data to the typescript?
This is the code from the ANZ users.component.html
<li *ngIf="'Pages.Administration.Users.Create' | permission" role="menuitem"> <button type="button" class="text-dark p-0 m-0 border-0"> <span class="fileinput-button"> <p-fileUpload customUpload="true" name="ExcelFileUpload" #ExcelFileUpload maxFileSize="10000000" auto="auto" accept=".csv,.xls,.xlsx" (uploadHandler)="uploadExcel($event)" (onError)="onUploadExcelError()" chooseLabel="{{ 'ImportFromExcel' | localize }}" ></p-fileUpload> </span> </button> </li>
and this is the code from the ANZ users.component.ts
uploadExcel(data: { files: File }): void {
alert('uploading');
const formData: FormData = new FormData();
const file = data.files[0];
formData.append('file', file, file.name);
this._httpClient
.post<any>(this.uploadUrl, formData)
.pipe(finalize(() => this.excelFileUpload.clear()))
.subscribe((response) => {
if (response.success) {
this.notify.success(this.l('ImportUsersProcessStart'));
} else if (response.error != null) {
this.notify.error(this.l('ImportUsersUploadFailed'));
}
});
}
7 Answer(s)
-
0
fwiw, the chat-bar.component also receives the "data" instead of the event
uploadFile(data: { files: File }): void { const formData: FormData = new FormData(); const file = data.files[0]; formData.append('file', file, file.name); -
0
Hi @henryand
I tested the issue with a fresh solution. But it seems to be working correctly. Could you delete your node modules and run the following commands?
yarnyarn create-dynamic-bundles
-
0
yarn was already up to date and create-dynamic-bundles did not have any effect on the issue.
My guess is that the issue is that the html calling parameter does not match the typescript function parameter signature. Can you tell me if there is something in code that maps these together? maybe it was lost in the upgrade merges, but i don't know what to look for.
(uploadHandler)="uploadExcel($event)" is not firing uploadExcel(data: { files: File }): void {
-
0
Hi @henryand,
The
chat-bar.component.htmlhas the same code<p-fileUpload customUpload="true" (uploadHandler)="uploadImage($event)" id="chatImageUpload" #chatImageUpload name="ChatImageUpload"Is the
chat-bar.component.tsworking correctly? -
0
No, that also does not do anything after selecting the file.
i realize the chat-bar component works the same way, which is why i sent the code snippet from the chat bar typescript last week, where it takes in files but is not firing. the html, as you pasted is sending an $event as the parameter.
- "I don't understand how the handler passing the event as a parameter convert to the files. Am i missing something that takes the event parameter and returns the data to the typescript?"
- My guess is that the issue is that the html calling parameter does not match the typescript function parameter signature. Can you tell me if there is something in code that maps these together?
-
0
Hi @henryand,
You can look to prime-ng documentation for the file upload component. https://primeng.org/fileupload#api.fileupload.emitters.uploadHandler
If the problem still occurs, could you share your project with [email protected]
-
0
I found the solution so i am posting it here. the p-fileupload html declaration needed mode="basic"
<p-fileUpload mode="basic" customUpload="true" name="ExcelFileUpload" #ExcelFileUpload maxFileSize="10000000" auto="auto" accept=".csv,.xls,.xlsx" (uploadHandler)="uploadExcel($event)" (onError)="onUploadExcelError()" chooseLabel="{{ 'ImportFromExcel' | localize }}" > </p-fileUpload>
