Might not be the best way, but you can use conditional visibility and css to get the behaviour you want.
On your entity that inherits form FIle add two attributes e.g. ShowValidationMessage : Boolean and ValidationMessage: String.
Then on your page add a label with the content of ValidationMessage and the class
. Make the label visible only when ShowValidationMessage is true. Thats the frontend done, now you need to add some logic to set the attribtes when you do your custom validation and refresh the file object.
Hope this helps,
I'm also experiencing the same issue that my validation feedback on the file upload widget is shown in a popup message instead of below the file upload widget.
For me it wasn't a blocking issue so we left it, but you can create a support ticket for this issue if blocking.
//get the formgroup div
//check if the div with the validation message was already added
var validationDiv = $('.form-group.mx-name-fileManager1 > div > div');
if (validationDiv.length > 0)
//create the validation message div and append it underneath the div with the file upload
var validationMessageDiv = $('<div class="alert alert-danger mx-validation-message">Please upload a file.</div>');
$('.form-group.mx-name-fileManager1 > div').append(validationMessageDiv);
$('.form-group.mx-name-fileManager1 > div > div').hide();