Topic: mdb-file-upload not recognize in defaultPreview the amazon s3 signed URL
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)
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'>
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 commented 9 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 pro premium priority commented 9 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 commented 8 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 pro premium priority commented 8 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 commented 8 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 pro premium priority commented 8 months ago
Thank you Rafael :)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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
Rafał Seifert commented 9 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?