Angular file input example

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Angular file input example

stgiaf pro asked 7 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?

 

 

Dawid Adach pro answered 7 years ago

Dear stgiaf, ussing following code from docs:
You can create a file upload placholder. Once you choose file, the name of the files along with path will show in a input. If you want to upload multiple files at time simply add multiple to the input:
<input type="file"mdbFileSelect (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" multiple>
 Once you choose files  they will be stored in this.files  ,you can check that calling:
console.log(this.files);
If you want to submit your files you can  add a button within a form:
<button type="button"class="start-upload-btn" (click)="startUpload()">
Start Upload
</button>
And implement logic to the function :
  startUpload(): void {
    const event: UploadInput = {
      type: 'uploadAll',
      url: 'http://my-website.com/upload',
      method: 'POST',
      data: { foo: 'bar' }
    };

stgiaf pro commented 7 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, Damian

wavelytech 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, Damian

David Conlisk answered 6 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

Damian Gemza staff answered 7 years ago

Hello stgiaf, I'm sorry, but we're not providing any examples of backend services in our product. MDB is a set of frontend controls. If users need backend services for our components, they have to create it by self. Best Regards, Damian

stgiaf pro answered 7 years ago

Hello Damian, I understand this and this is fine. But the documentation is not enough of when the component calls what and what is the meaning of events provided. I don't want a backend implementation but rather an example to demonstrate and better describe the functionality of the component.   Regards, Stefanos

Dawid Adach pro commented 7 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 7 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 7 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 7 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, Stefanos

Raúl Carlos Rodrigo Sierra Hernández pro answered 7 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 7 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, Damian

David Conlisk answered 6 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

Arkadiusz Idzikowski staff answered 6 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.

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
stgiaf
Pro User
12Support score
3Questions 2Answers
0Snippets likes 0Snippets