How to create read-only UploadMany field?

maxmedia

In certain situations I am opening editor as read-only. For most fields readonly type is fine. I am also adding attr:{ disabled:true } for visual clue and disabling focus on field.
How can I do this with UploadMany (or Upload) field type?
Using API method disable() works, but upload and delete buttons are still visible and clickable, though click itself is discarded. This UX is confusing for users.
I have tried setting readonly field using setFormatter() to the html code with links to uploaded files. But this html is shown as literal string inside readonly <input> element.
Can I insert arbitrary HTML in place of field using API?
Direct HTML DOM manipulation could possibly be the solution, but is there any native DT solution?

allan

That sounds like a bug I'm afraid. If it is disabled the upload and delete buttons shouldn't do anything. Let me get back to you about that.

Allan

maxmedia

Upload and delete buttons are not doing anything (probably catched by javascript). But they are visible and focusable, which is confusing for users. Only I can hide is drag-and-drop area. There should be visible only result of display option function.

allan

Add this to your CSS:

div.DTE_Field_Type_uploadMany.disabled div.cell.upload,
div.DTE_Field_Type_uploadMany.disabled button.btn.remove {
  display: none !important;
}

That will hide those controls.

Allan

maxmedia

Thanks Allan, that did the trick!
For those interested, disable() must be used as API method on field before opening editor, there is no such option when creating editor instance. You also need to use dragDrop: false option when creating UploadMany field instance.