Angular file input example

stgiaf asked 8 months 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 answered 7 months ago

Dear stgiaf,

ussing following code from docs:

https://mdbootstrap.com/angular/components/inputs/#file-input
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 commented 7 months 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 commented 3 months ago

exactly, who will be the reciever of the InputInvent ?

calling startUpload() does nothing at all.

Pls update the doc. Pls !


Damian Gemza commented 3 months 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 commented 3 months 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 commented 3 months 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


Damian Gemza answered 8 months 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 answered 8 months 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 commented 8 months 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 commented 8 months 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 commented 8 months 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 commented 7 months 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


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 commented 5 months 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


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No