Topic: Angular file input example
stgiaf pro asked 6 years ago
Since the documentation for the file input in angular is quite poor and the link to the demo is not showing up (jsfiddle)could you please provide better documenation or a fully featured example with submitting data to a backend service?
David Conlisk free answered 5 years ago
Hi Arkadiusz,
Thanks for getting back to me. I am using the pro version (ng-uikit-pro-standard) but when I tried to use the following html I got an exception (as noted above):
I've managed to get it working by stripping out the code included in the sample documentation, and using my own custom code in the (change) event instead. It's difficult to share what I was attempting to do as it's part of a much larger client project.
Cheers,
David
Arkadiusz Idzikowski staff answered 5 years ago
I just checked basic example from our documentation and I can't recreate this problem on my end. Which version of MDB Angular do you use? Could you show us the code you are using for rendering file input or send a demo app on which we will be able to debug this problem? You can send it to a.idzikowski@mdbootstrap.com.
David Conlisk free answered 5 years ago
Guys,
I have copied all of the html and code from the basic documentation here:
https://mdbootstrap.com/docs/angular/forms/file-input/
It doesn't work. It throws an exception: "Can't bind to 'uploadInput' since it isn't a known property of 'input'."
It's simply not good enough that your documentation is incorrect.
Can you please provide a simple working example of the file upload in use? All I want is to be able to see the name of the file in the text input on the screen, and to be able to get a reference to that file in my code. I can handle it from there.
Thanks,
David
Raúl Carlos Rodrigo Sierra Hernández pro answered 6 years ago
Hola, yo encontré un error en la clase MDBUploaderService para el componente de mdbFileSelect y lo que estaba pasando era que al añadir los archivos de tipo UploadInput ('uploadFile') no hacía nada y esto era por que el Observable se añadía después de lanzar el Subscriber. Después logré que me funcionara correctamente.
Cambié esto 'mdb-uploader.class.ts:115':
case 'uploadFile': this.serviceEvents.emit({type: 'start', file: event.file}); const sub = this.uploadFile(event.file, event).subscribe((data: any) => { this.serviceEvents.emit(data); }); this.uploads.push({file: event.file, sub: sub}); break;
Por esto 'mdb-uploader.class.ts:115':
case 'uploadFile': this.serviceEvents.emit({type: 'start', file: event.file}); const sub = this.uploadFile(event.file, event); this.uploads.push({file: event.file, sub: sub}); sub.subscribe((data: any) => { this.serviceEvents.emit(data); }); break;
Saludos.
Damian Gemza staff commented 6 years ago
Dear Raul, I’m sorry, but we’re not providing support in Spanish. Please ask your question in English, or I won’t be able to help you. I don’t know Spanish. Best Regards, DamianDawid Adach pro answered 6 years ago
<input type="file"mdbFileSelect (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" multiple>
<button type="button"class="start-upload-btn" (click)="startUpload()"> Start Upload </button>
startUpload(): void { const event: UploadInput = { type: 'uploadAll', url: 'http://my-website.com/upload', method: 'POST', data: { foo: 'bar' } };
stgiaf pro commented 6 years ago
Hello Dawid, I tired your suggestion, with no luck.. I cannot understand from the source of mdb-file-input, who will be the reciever of the InputInvent, sinceit is an input, so the mdb will not receive it right? Nevertheless, I called the startUpload function on the submit() of a from, and nothing happend, neither anyhting is logged in the console.wavelytech pro commented 6 years ago
exactly, who will be the reciever of the InputInvent ? calling startUpload() does nothing at all. Pls update the doc. Pls !Damian Gemza staff commented 6 years ago
Dear wavelytech, We have in plans for nearest future to update File Uploader docs. For now, you can check the ngx-uploader documentation because our File Uploader is based on that uploader. LINK: https://github.com/bleenco/ngx-uploader Best Regards, Damianwavelytech pro commented 6 years ago
been banging my head on the wall for 2 hours to try to get it to work. Turns out the file input won't work without ngx-uploader and its module... and this is not mentioned anywhere in the doc. wonder why did we pay for this at all? ):Damian Gemza staff commented 6 years ago
Dear wavelytech, You're not paying only for File Input component, but for whole MDB Angular Pro library. We have adapt it to our needs, because it's an MIT library, so everyone would use it :) Thanks for your report about ngx-uploader module! We'll check that and we'll fix it. Best Regards, Damianstgiaf pro answered 6 years ago
Dawid Adach pro commented 6 years ago
Dear stgiaf, could you pleae provide more inforamtion about your exmaple? I can't promise that we will be able to provide you solution however that will be an indication for us how to extend docs in next releases. Thank you in advance!stgiaf pro commented 6 years ago
Hello Dawid and thanks for your answer. My main topic was the following: 1. In the documentation (https://mdbootstrap.com/angular/components/inputs/#file-input) you have used many functions in order to be able to select files and then with UploadStart you possibly send a message to upload it somewhere. Nevertheless, you do not describe what these functions do and they are mandatory from the component side as I understand. So first things would be to describe these functions. 2. The link to jsfiddle in the documentation does not work (https://embed.plnkr.co/plunk/mMVsbT) So could you please be so kind and give me some further description of the component so that I am able to use it? If I have misunderstood anything let me know so that I can carefully read other resources and understand.Dawid Adach pro commented 6 years ago
Dear stgiaf, my apologies, we will check why plunker stopped working. Meantime, please use code in documentation, one you import file, it will give you file path and depending on implementation. You can upload it to server, transfer, transform etc.stgiaf pro commented 6 years ago
Can you please explain what the startUpload function in documentation does, and what are all the statuses in the UploadOutput event you have used? The concept is that i need all this code in order to get the files array and then use it to get the files and upload them in the server by myself? I am really sorry but i do not fully understand.. The purpose of FileInput Input is not understandable as well. Why it is used and what it does? The documentation is really not good at this point. KR, StefanosDamian Gemza staff answered 6 years ago
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No