kaijonas2021 free asked 3 years 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
}

kaijonas2021 free answered 3 years ago


//.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 free commented 3 years ago

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


Arkadiusz Idzikowski staff commented 3 years 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 free commented 3 years 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 3 years 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 free commented 2 years ago

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


kaijonas2021 free commented 2 years 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.


kaijonas2021 free answered 3 years ago


//.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 free commented 3 years ago

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


kaijonas2021 free commented 3 years 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

  • ForumUser: 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