mdb-file-upload

kaijonas2021 asked a year ago

Description

I have several reactive form elements on different pages and I submit them together. My problem is, when I switch between these pages the file upload plugin (of course) loses the uploaded image.

Actual behavior

You can only set default images via 'url'?!

Desired behavior

Set image as well I receive the image. See my suggestion below (setFile)

Resources (screenshots, code snippets etc.)

//.html
<mdb-file-upload type="file" #uploader (fileRemoved)="onFileRemove()" (fileAdded)="onFileAdd($event)"
    [defaultFile]="'./../assets/profile.jpg'" [height]="'150'"
    [setFile]="myFile">
</mdb-file-upload>


//.ts
...
onFileAdd(event){
    this.myForm.get('image').setValue(event);
}

ngOnInit(): void {    
    this.myForm = this.formsService.getForm("myForm");
    this.myFile = this.myForm.get('image').value
}

//.html
<mdb-file-upload type="file" #uploader (fileRemoved)="onFileRemove()" (fileAdded)="onFileAdd($event)"
    [defaultFile]="'./../assets/profile.jpg'" [height]="'150'"
    [setFile]="myFile">
</mdb-file-upload>


//.ts
...
onFileAdd(event){
    this.myForm.get('image').setValue(event);
}

ngOnInit(): void {    
    this.myForm = this.formsService.getForm("myForm");
    this.myFile = this.myForm.get('image').value
}

kaijonas2021 commented a year ago

btw., I couldn't add the code directly in my first post. I always got the http error 406.


Arkadiusz Idzikowski staff commented a year ago

@kaijonas2021 We will take a closer look at the problem with the 406 error and take care of that.

Could you provide more information about how to reproduce this problem step by step?


kaijonas2021 commented a year ago

Yesterday I couldn't add the code snipped in my problem description. Neither Firefox nor Chrome worked. For that reason I copied the code snipped inside the comment.

But I just tried it again (updated my description) and now it works well. Obvisously a temporary problem... .

Do you have any ideas or suggestions regarding my actual question? Do you understand what I meant?


Arkadiusz Idzikowski staff commented a year ago

[@kaijonas2021](/profile/?id=183519) We currently use url for defaultFile to provide a visual representation of the file, you don't add an actual file this way. If you need to instantiate the component with the default file then I'm afraid it won't be possible due to the limitations of the HTML file input, however, we will check it further and let you know what we found.


kaijonas2021 commented a year ago

Hi, any updates related to my questions? Did you read my suggestion below?


kaijonas2021 commented a year ago

Finally i managed it by myself. You can use ViewChild decorator to access the file-upload module. Simply overriding the 'url' property gave me what I want.


//.html
<mdb-file-upload type="file" #uploader (fileRemoved)="onFileRemove()" (fileAdded)="onFileAdd($event)"
    [defaultFile]="(imgUrl!=='')?imgUrl:'./../assets/profile.jpg'" [height]="'150'"
</mdb-file-upload>

<div class="imagePreview" *ngIf="imgUrl !== ''">
    <img [src]="imgUrl">
</div>


//.ts
imgUrl: string = "";

...

onFileAdd(event){
    this.myForm.get('image').setValue(event);
}

ngOnInit(): void {    
    this.myForm = this.formsService.getForm("myForm");
    let file = this.myForm.get('image').value;

    const reader = new FileReader();
    reader.onload = () => {
      this.imgUrl = reader.result as string;
      //console.log(this.imgUrl);
      }
    reader.readAsDataURL(file);

}

kaijonas2021 commented a year ago

I just tried another approach, but unfortunately without success. But maybe it gives you an idea how to solve the 'problem'.


kaijonas2021 commented a year ago

The dataUri works for basic html 'imagePreview' but not for 'mdb-file-upload' in my example


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: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 10.1.1
  • Device: Notebook
  • Browser: Firefox
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No