Topic: mdb-file-upload not recognize in defaultPreview the amazon s3 signed URL

DEVGASA priority asked 4 months ago


Expected behavior allow show the URL signed of Amazon S3

Actual behavior the componente mdb-file-upload not recognize in defaultPreview the amazon s3 signed URL

Resources (screenshots, code snippets etc.)

you can use this URL ( expired to 23:00Hrs Miami Time)

https://garibaldi-corporate.s3.us-east-2.amazonaws.com/Intranet/garibaldi/documentos/pdf/Captura.png?response-content-disposition=inline&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEAYaCXVzLWVhc3QtMiJIMEYCIQDiB6h9PQRUGpjYHaTAZTipvlugMy%2Bf%2FT%2Fi%2BCs%2FB%2FRTZwIhAJAsYLt3%2BBnkeJVGZbS7crn1qi9KJ%2FQMw378nIIL7MtAKu0CCO%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEQAhoMNzQ5NTczMTk2NDA3Igxa2oBwnZhwZv5Jzl8qwQIzgm9QjeruH62go%2Bepwk%2FIySpO%2BKnqcomL6reCRLF9vYg3zRSWdNYlhVLN5MgYMc9xsmnp2EwK3L8pJWhn1rDkZaqwaDv8%2BHmHnWIj5H5X6EsvibeH3T9TvTp6yEmZwH5V8UNx04Jvf63VK9GaWyXh9%2Fn3fNOzVVAAeb2f%2Bme24LXHeW9C68TxBq7kfT2dBfk4PsaE8GC%2FMt0k4xOMaWB8tMjT6O5jWDk%2FgscIoVDidv4z63MxxTUVlmU0jdi6ND6thxC0E7GVZBRjK83VVjoLerujgbTtzoxJcoUld7OQLR0wlnBMcAQcS5hAzA0bWjQv3zhTdH0%2BurN8LZZzqTl55wHKuqnBk7fj6BQirTaN2YBKtMfgt%2FKVnMYGlnrTKbixSDPM%2BnHDfbKTySOJtrD9Em2sMBHR058XgS4L%2BsAgqDMwyfD8rgY6sgI4kG6OLtWOlt43Vp3SsBWl1X72OFXyfJNPH%2F6ZoZYvra7xYpDBpn5qYix4Sgw9EpQX5GDiJo7tYIQWp0v5CMNlz0bemSLoN3kTr33mz%2FmWFR6fWMG0s0NtkWD32autLCgjl4u%2F9AVq8u%2B8FdapO%2FXHZAIBPL1PwHzbmXD2jWYLU2oyyR1LysM3abw9nZjiwaC54n3WbXhGEsu8Qr2vxfvEp6hr76VL4p0CtYKiRQLYEtIDMaChXdXdFiLippnabGzIgw%2FElha1GdT8QqFzw2nNYlJQh1cymKdiyVMDhLRT3zwerVbFrApqjP6jMLdCTPU0pXnULRNMwlan1OycKhbcT5gFea88dRGa5htxQCBnYucxs1U9Z0fdWRIRd4G46SqU4PBHocutTHqP4G7Qt0X81j8%3D&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20240228T151407Z&X-Amz-SignedHeaders=host&X-Amz-Expires=300&X-Amz-Credential=ASIA25BQLJJ3UU754DGU%2F20240228%2Fus-east-2%2Fs3%2Faws4_request&X-Amz-Signature=f7660e0f883afc23a261abd8a2283674c8a1b883f948124ddd2684d873e51bef

if you use this URL in

<mdb-file-upload
            #fileUpload
            [defaultPreview]="'https://garibaldi-corporate.s3.us-east-2.amazonaws.com/Intranet/garibaldi/documentos/pdf/Captura.png?response-content-disposition=inline&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEAYaCXVzLWVhc3QtMiJIMEYCIQDiB6h9PQRUGpjYHaTAZTipvlugMy%2Bf%2FT%2Fi%2BCs%2FB%2FRTZwIhAJAsYLt3%2BBnkeJVGZbS7crn1qi9KJ%2FQMw378nIIL7MtAKu0CCO%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEQAhoMNzQ5NTczMTk2NDA3Igxa2oBwnZhwZv5Jzl8qwQIzgm9QjeruH62go%2Bepwk%2FIySpO%2BKnqcomL6reCRLF9vYg3zRSWdNYlhVLN5MgYMc9xsmnp2EwK3L8pJWhn1rDkZaqwaDv8%2BHmHnWIj5H5X6EsvibeH3T9TvTp6yEmZwH5V8UNx04Jvf63VK9GaWyXh9%2Fn3fNOzVVAAeb2f%2Bme24LXHeW9C68TxBq7kfT2dBfk4PsaE8GC%2FMt0k4xOMaWB8tMjT6O5jWDk%2FgscIoVDidv4z63MxxTUVlmU0jdi6ND6thxC0E7GVZBRjK83VVjoLerujgbTtzoxJcoUld7OQLR0wlnBMcAQcS5hAzA0bWjQv3zhTdH0%2BurN8LZZzqTl55wHKuqnBk7fj6BQirTaN2YBKtMfgt%2FKVnMYGlnrTKbixSDPM%2BnHDfbKTySOJtrD9Em2sMBHR058XgS4L%2BsAgqDMwyfD8rgY6sgI4kG6OLtWOlt43Vp3SsBWl1X72OFXyfJNPH%2F6ZoZYvra7xYpDBpn5qYix4Sgw9EpQX5GDiJo7tYIQWp0v5CMNlz0bemSLoN3kTr33mz%2FmWFR6fWMG0s0NtkWD32autLCgjl4u%2F9AVq8u%2B8FdapO%2FXHZAIBPL1PwHzbmXD2jWYLU2oyyR1LysM3abw9nZjiwaC54n3WbXhGEsu8Qr2vxfvEp6hr76VL4p0CtYKiRQLYEtIDMaChXdXdFiLippnabGzIgw%2FElha1GdT8QqFzw2nNYlJQh1cymKdiyVMDhLRT3zwerVbFrApqjP6jMLdCTPU0pXnULRNMwlan1OycKhbcT5gFea88dRGa5htxQCBnYucxs1U9Z0fdWRIRd4G46SqU4PBHocutTHqP4G7Qt0X81j8%3D&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20240228T151407Z&X-Amz-SignedHeaders=host&X-Amz-Expires=300&X-Amz-Credential=ASIA25BQLJJ3UU754DGU%2F20240228%2Fus-east-2%2Fs3%2Faws4_request&X-Amz-Signature=f7660e0f883afc23a261abd8a2283674c8a1b883f948124ddd2684d873e51bef'"
        </mdb-file-upload>

this don't show the preview

any validation for extensions ?

but if you use this in a HTML element , example img , this work !

<img src ='https://garibaldi-corporate.s3.us-east-2.amazonaws.com/Intranet/garibaldi/documentos/pdf/Captura.png?response-content-disposition=inline&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEAYaCXVzLWVhc3QtMiJIMEYCIQDiB6h9PQRUGpjYHaTAZTipvlugMy%2Bf%2FT%2Fi%2BCs%2FB%2FRTZwIhAJAsYLt3%2BBnkeJVGZbS7crn1qi9KJ%2FQMw378nIIL7MtAKu0CCO%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEQAhoMNzQ5NTczMTk2NDA3Igxa2oBwnZhwZv5Jzl8qwQIzgm9QjeruH62go%2Bepwk%2FIySpO%2BKnqcomL6reCRLF9vYg3zRSWdNYlhVLN5MgYMc9xsmnp2EwK3L8pJWhn1rDkZaqwaDv8%2BHmHnWIj5H5X6EsvibeH3T9TvTp6yEmZwH5V8UNx04Jvf63VK9GaWyXh9%2Fn3fNOzVVAAeb2f%2Bme24LXHeW9C68TxBq7kfT2dBfk4PsaE8GC%2FMt0k4xOMaWB8tMjT6O5jWDk%2FgscIoVDidv4z63MxxTUVlmU0jdi6ND6thxC0E7GVZBRjK83VVjoLerujgbTtzoxJcoUld7OQLR0wlnBMcAQcS5hAzA0bWjQv3zhTdH0%2BurN8LZZzqTl55wHKuqnBk7fj6BQirTaN2YBKtMfgt%2FKVnMYGlnrTKbixSDPM%2BnHDfbKTySOJtrD9Em2sMBHR058XgS4L%2BsAgqDMwyfD8rgY6sgI4kG6OLtWOlt43Vp3SsBWl1X72OFXyfJNPH%2F6ZoZYvra7xYpDBpn5qYix4Sgw9EpQX5GDiJo7tYIQWp0v5CMNlz0bemSLoN3kTr33mz%2FmWFR6fWMG0s0NtkWD32autLCgjl4u%2F9AVq8u%2B8FdapO%2FXHZAIBPL1PwHzbmXD2jWYLU2oyyR1LysM3abw9nZjiwaC54n3WbXhGEsu8Qr2vxfvEp6hr76VL4p0CtYKiRQLYEtIDMaChXdXdFiLippnabGzIgw%2FElha1GdT8QqFzw2nNYlJQh1cymKdiyVMDhLRT3zwerVbFrApqjP6jMLdCTPU0pXnULRNMwlan1OycKhbcT5gFea88dRGa5htxQCBnYucxs1U9Z0fdWRIRd4G46SqU4PBHocutTHqP4G7Qt0X81j8%3D&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20240228T151407Z&X-Amz-SignedHeaders=host&X-Amz-Expires=300&X-Amz-Credential=ASIA25BQLJJ3UU754DGU%2F20240228%2Fus-east-2%2Fs3%2Faws4_request&X-Amz-Signature=f7660e0f883afc23a261abd8a2283674c8a1b883f948124ddd2684d873e51bef'>

Rafał Seifert staff commented 4 months ago

I could not recreate your problem. With the link above (propably expired) or with the 89.webp image. Can you provide full code how you implement your file-upload? Do you get any console errors? Do you import file-upload module correctly?


DEVGASA priority answered 4 months ago


neither work with : this image : https://dummyimage.com/600x400/000/fff or this image : https://mdbootstrap.com/img/Photos/Others/images/89.webp


Rafał Seifert staff commented 4 months ago

We have double checked this issue and it seems that we do not support .webp format indeed. We will look into this as it seems like a bug and we will try to address this problem in the nearest release. For now we support only those formats: ['png', 'jpg', 'jpeg', 'bmp', 'gif']


DEVGASA priority commented 4 months ago

Thank you for you response, other question, and support for images as amazon signed or this format (that is, images that do not end in an extension ['png', 'jpg', 'jpeg', 'bmp', 'gif']) ? https://dummyimage.com/600x400/000/fff , Can they be supported in the next version?


Rafał Seifert staff commented 4 months ago

Please try to manually add the .png extension to your url and then try to use the combined url in our component. It looks like you can just add .png at the end and the image still works. It might be problematic to implement in our component but we will take this into consideration if we can do something with this.


DEVGASA priority commented 4 months ago

Hi Rafael Rafał Seifert s , other issue with mdb-file-upload: don't recognise .SVG files , example if [defaultPreview]=https://www.svgrepo.com/show/76519/dummy.svg don't work , but if [defaultPreview]=https://w7.pngwing.com/pngs/994/313/png-transparent-bitcoin-for-dummies-bitcoin-trademark-business-bitcoin-thumbnail.png this show the image. a question, svg not is allow in this component ?


Rafał Seifert staff commented 4 months ago

Yes. As I have mentioned before only those formats are available at the moment: ['png', 'jpg', 'jpeg', 'bmp', 'gif'] We have added this issue to our to-do list and we will work on adding more formats.


DEVGASA priority commented 4 months ago

Thank you Rafael :)



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 5.2.0
  • Device: PC
  • Browser: Chrome 117.0.5938.63
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: Yes