What should have happened instead?:
There should be a thumbnail of this media file inside the warningBox contains previewnote (like if tog-uselivepreview is disabled).

I don't see a thumbnail there. On which wiki and which file page do you see it? Are you sure it's not some local customization?

It's on commonswiki, random image (example). Seems to be a customized script, but I could not add safemode param in URL during preview so I am not pretty sure.

I see, it's an override in https://commons.wikimedia.org/wiki/MediaWiki:Previewnote. It's only defined for English, so you wouldn't see the preview when using another language. This is such a bad way to do it, eh…

The message displays the image using wikitext like this: {{#ifeq:{{NAMESPACE}}|{{ns:6}}|[[File:{{PAGENAME}}|350x220px|none]]}}, which doesn't work in the live preview, because the message is a part of the JavaScript code and it's the same for every page (magic words that depend on the page title always return "Special:Badtitle/ResourceLoaderContext").

There is an old feature request to display the image when previewing: T13243: Show images on image description page previews.

Thanks for this. So I believe the actual bug here is "Live preview could not load customized MediaWiki:Previewnote".