Sign in


Sign up


Angular file input example

MDB SupportCategory: MDB AngularAngular file input example
stgiaf Pro User asked 3 months ago in MDB pro, version:5

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?

 

 

4 Answers
Damian Gemza answered 3 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 Pro User answered 3 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

stgiaf Pro User replied 3 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

Dawid Adach Pro User replied 3 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 Pro User replied 3 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 Pro User replied 3 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!

Dawid Adach Pro User answered 3 months 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 User replied 2 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.

Raúl Carlos Rodrigo Sierra Hernández Pro UserPremium answered 5 days 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 replied 5 days 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