MDB - FileUpload Plugin - Support for blob and base64 string

Topic: MDB - FileUpload Plugin - Support for blob and base64 string

alstria asked 2 years ago

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 won't work while ( is working fine.

Arkadiusz Idzikowski staff answered 2 years ago

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 commented 2 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 2 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.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue
  • User: 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