Topic: MDB - FileUpload Plugin - Support for blob and base64 string
Expected behavior
When assigning a base64 or blob url to the [defaultFile] attribute I expect to see the preview of the image.
Actual behavior
No image is shown, the blob and base64 string is removed/ignored and console shows:
ERROR TypeError: url.split is not a function at MdbFileUploadComponent._cleanFileName (mdb-file-upload.js:217) at MdbFileUploadComponent._setDefaultPreview (mdb-file-upload.js:124) at MdbFileUploadComponent.set defaultFile [as defaultFile] (mdb-file-upload.js:116)
Resources (screenshots, code snippets etc.)
<mdb-file-upload #uploader [defaultFile]="image"></mdb-file-upload>
this.http.get(environment.graphUrl + 'v1.0/me/photo/$value', { responseType: 'blob' })
.subscribe(blobImage => {
const objectURL = URL.createObjectURL(blobImage);
this.image = this.sanitizer.bypassSecurityTrustUrl(objectURL);
},
Final URL: "blob:http://localhost:4200/65d8ef50-98b9-4824-9b90-bdecf877d5e1"This is also happening with base64 strings or images returned by an api that don't have a file ending (for example http://myapi.com/getPicture/23) won't work while (http://myapi.com/getPicture/23.jpg) is working fine.
The name of input can be a bit confusing in this case, but it's not possible to use an actual javascript file object as a default file added to the HTML file input. It is just a default preview image displayed in the component drop zone.
IT-Boys free commented 3 years ago
I want to use a simple image (in my opinion a safeurl and a base64 string are no javascript objects) but both are not displayed in the drop zone.
Arkadiusz Idzikowski staff commented 3 years ago
The [defaultFile] accepts only image src that is directly passed to the src tag of the element inside the drop zone. It is expected behavior in this case.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 9.3.1
- Device: Windows
- Browser: Edge (Chromium)
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes