added support for small text files
This commit is contained in:
parent
e2ee020ec5
commit
f4cf544f4f
|
@ -74,6 +74,9 @@ class Renderer{
|
||||||
if(this.isSecret(input)){
|
if(this.isSecret(input)){
|
||||||
return new SecretInputRenderer(input)
|
return new SecretInputRenderer(input)
|
||||||
}
|
}
|
||||||
|
if(this.isFile(input)){
|
||||||
|
return new FileInputRenderer(input)
|
||||||
|
}
|
||||||
return new SimpleInputRenderer(input)
|
return new SimpleInputRenderer(input)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -95,6 +98,13 @@ class Renderer{
|
||||||
(input.schema.format.toLowerCase() === "code")
|
(input.schema.format.toLowerCase() === "code")
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static isFile(input){
|
||||||
|
return (input.schema.type === "string") &&
|
||||||
|
("format" in input.schema) &&
|
||||||
|
(input.schema.format != null) &&
|
||||||
|
(input.schema.format.toLowerCase() === "file")
|
||||||
|
}
|
||||||
|
|
||||||
static isDateTime(input){
|
static isDateTime(input){
|
||||||
return (input.schema.type === "string") &&
|
return (input.schema.type === "string") &&
|
||||||
("format" in input.schema) &&
|
("format" in input.schema) &&
|
||||||
|
@ -132,6 +142,68 @@ class SimpleInputRenderer extends Renderer{
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
class FileInputRenderer extends Renderer{
|
||||||
|
|
||||||
|
#html = null;
|
||||||
|
#content = null;
|
||||||
|
|
||||||
|
constructor(input){
|
||||||
|
super(input)
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback(controller){
|
||||||
|
controller.querySelector(`input[name=${this.name}]`).addEventListener("change", ev=>{
|
||||||
|
const tgt = ev.target
|
||||||
|
const ename = tgt.getAttribute("name")
|
||||||
|
if(ename === this.name){
|
||||||
|
const file = ev.target.files[0]
|
||||||
|
if(file.type !== this.schema.contentMediaType){
|
||||||
|
alert("Unsupported media type. Must be " + this.schema.contentMediaType)
|
||||||
|
ev.stopPropagation()
|
||||||
|
ev.preventDefault()
|
||||||
|
tgt.value = null
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
if(file.size > 100*1024){
|
||||||
|
alert("This input allows only small files (100K). Use references instead ")
|
||||||
|
ev.stopPropagation()
|
||||||
|
ev.preventDefault()
|
||||||
|
tgt.value = null
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
const reader = new FileReader()
|
||||||
|
reader.addEventListener('load', ev=>{
|
||||||
|
let encoded = ev.target.result.toString().replace(/^data:(.*,)?/, '');
|
||||||
|
if ((encoded.length % 4) > 0) {
|
||||||
|
encoded += '='.repeat(4 - (encoded.length % 4));
|
||||||
|
}
|
||||||
|
this.#content = encoded
|
||||||
|
})
|
||||||
|
reader.readAsDataURL(file)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
getValue(parent){
|
||||||
|
return this.#content
|
||||||
|
}
|
||||||
|
|
||||||
|
render(){
|
||||||
|
let required = this.required ? 'required="required"' : ""
|
||||||
|
let readonly = this.readOnly ? 'readonly="readOnly"' : ""
|
||||||
|
this.#html = `
|
||||||
|
<div class="ccp-input-widget form-field">
|
||||||
|
<label>
|
||||||
|
${this.title}
|
||||||
|
<span class="ccp-help-icon" title="${this.description}" alt="${this.description}">?</span>
|
||||||
|
</label>
|
||||||
|
<input type="file" class="ccp-input-widget form-control" name="${this.name}" value="${this.schema.default}" ${required} ${readonly}></input>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
return this.#html
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
class SecretInputRenderer extends Renderer{
|
class SecretInputRenderer extends Renderer{
|
||||||
|
|
||||||
#html = null;
|
#html = null;
|
||||||
|
|
|
@ -98,7 +98,8 @@ class CCPInputWidgetEditorController extends HTMLElement{
|
||||||
<option value="time" selected="${this.isSelectedFormat('time')}">Time</option>
|
<option value="time" selected="${this.isSelectedFormat('time')}">Time</option>
|
||||||
<option value="dateTime" selected="${this.isSelectedFormat('dateTime')}">Date time</option>
|
<option value="dateTime" selected="${this.isSelectedFormat('dateTime')}">Date time</option>
|
||||||
<option value="code" selected="${this.isSelectedFormat('code')}">Code</option>
|
<option value="code" selected="${this.isSelectedFormat('code')}">Code</option>
|
||||||
<option value="secret" ${this.isSelectedFormat('secret')}>Secret</option>
|
<option value="file" selected="${this.isSelectedFormat('file')}"}>File</option>
|
||||||
|
<option value="secret" selected="${this.isSelectedFormat('secret')}">Secret</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -164,6 +165,8 @@ class CCPInputWidgetEditorController extends HTMLElement{
|
||||||
this.querySelector("div[name=input-default] input[name=default]").type = "time"
|
this.querySelector("div[name=input-default] input[name=default]").type = "time"
|
||||||
}else if(this.#input.schema.format === "dateTime"){
|
}else if(this.#input.schema.format === "dateTime"){
|
||||||
this.querySelector("div[name=input-default] input[name=default]").type = "dateTime"
|
this.querySelector("div[name=input-default] input[name=default]").type = "dateTime"
|
||||||
|
}else if(this.#input.schema.format === "file"){
|
||||||
|
this.querySelector("div[name=input-default] input[name=default]").type = "file"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else if(ename === "contentMediaType"){
|
else if(ename === "contentMediaType"){
|
||||||
|
|
Loading…
Reference in New Issue