Topic: mdb-file-upload
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 4 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 4 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 commented 4 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 4 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 commented 4 years ago
Hi, any updates related to my questions? Did you read my suggestion below?
kaijonas2021 commented 4 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.
//.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 4 years ago
I just tried another approach, but unfortunately without success. But maybe it gives you an idea how to solve the 'problem'.
kaijonas2021 commented 4 years ago
The dataUri works for basic html 'imagePreview' but not for 'mdb-file-upload' in my example
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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