App: uploading a file without extension breaks interface

[joselcvarela]

Preflight Checklist

• I have completed all Troubleshooting Steps.
• I'm on the latest version of Directus.
• There's no other issue that already describes my problem.

Describe the Bug

After uploading a file without file extension the image interface does not appear properly.
Can't click on buttons, but I was able to override image by clicking on Clear Value.

Possible solutions:

• API: Deny uploads without file extension (Nope, I believe)
• API: Try to guess file extension using some technique like file magic numbers (could be helpful in some use cases)
• App: Show some placeholder / warning (easier to implement)

To Reproduce

In my use case:

1. Create an image field on some collection
2. Upload an image without file extension using that interface

Errors Shown

No errors, just ugly and unusable UI.

What version of Directus are you using?

9.2.2 (73faf14)

What version of Node.js are you using?

v16.13.0

What database are you using?

What browser are you using?

Edge

What operating system are you using?

macOS

How are you deploying Directus?

Locally

[rijkvanzanten]

App: Show some placeholder / warning (easier to implement)

I think this is the way to go. The same applies for any other image error that happens actually. We should add a on error handler to the element that's used to render the preview, and gracefully fallback to a placeholder.

[azrikahar]

Just a note for reference: although #11898 is technically a different component (<file-preview> rather than <file-image> for this issue), perhaps we can reuse the placeholder design here once it gets finalized over there.