diff --git a/bricks/input.js b/bricks/input.js index 79d3a3c..83999e2 100644 --- a/bricks/input.js +++ b/bricks/input.js @@ -379,16 +379,20 @@ bricks.UiFile = class extends bricks.VBox { /* accept: multiple: + preview: true to show file previews after selection */ constructor(opts){ opts.width = opts.width || '100%'; super(opts); this.set_css('droparea'); + this.accept = opts.accept || ''; + this._preview = opts.preview !== undefined ? opts.preview : true; + this.preview_box = null; this.bind('dragover', (event) => { event.preventDefault(); }); ["dragenter", "dragover", "dragleave", "drop"].forEach(eventName => { - this.bind(eventName, (e) => e.preventDefault(), false); + this.bind(eventName, (e) => e.preventDefault(), false); }); this.bind('dragenter', () => { this.set_css('hover'); @@ -409,6 +413,7 @@ bricks.UiFile = class extends bricks.VBox { var v = this.opts.value || this.opts.defaultvalue||''; this.value = ''; this.input.value = ''; + this._clearPreview(); } handleFileSelect(event){ var files = []; @@ -423,6 +428,7 @@ bricks.UiFile = class extends bricks.VBox { } else { this.value = files[0]; } + this._renderPreview(this.opts.multiple ? files : [files[0]]); console.log('"changed" fired', this.value); this.dispatch('changed', this.getValue()); } @@ -458,9 +464,41 @@ bricks.UiFile = class extends bricks.VBox { this.value = files[0]; this.set_input_file([this.value]); } + this._renderPreview(this.opts.multiple ? files : [files[0]]); this.dispatch('changed', this.getValue()); console.log('"changed" fired', this.getValue()); } + _clearPreview(){ + if (this.preview_box){ + this.remove_widget(this.preview_box); + this.preview_box = null; + } + } + _renderPreview(files){ + if (!this._preview) return; + this._clearPreview(); + if (!files || files.length === 0) return; + this.preview_box = new bricks.HBox({width:'100%', css:'filler'}); + files.forEach(f => { + var url = URL.createObjectURL(f); + var typ = f.type.split('/')[0]; + if (typ === 'image'){ + var w = new bricks.Image({url:url, cheight:10, flexShrink:0, css:'card'}); + this.preview_box.add_widget(w); + } else if (typ === 'video'){ + var w = new bricks.VideoPlayer({url:url, width:'100%', autoplay:false}); + this.preview_box.add_widget(w); + } else if (typ === 'audio'){ + var w = new bricks.AudioPlayer({url:url, width:'100%', autoplay:false}); + this.preview_box.add_widget(w); + } + }); + if (this.preview_box._widgets && this.preview_box._widgets.length > 0){ + this.add_widget(this.preview_box); + } else { + this.preview_box = null; + } + } set_formdata(fd){ var v = this.resultValue(); if (this.opts.multiple && Array.isArray(v)){ diff --git a/bricks/llmout.js b/bricks/llmout.js index 97ed74d..9c40465 100644 --- a/bricks/llmout.js +++ b/bricks/llmout.js @@ -7,29 +7,30 @@ bricks.UserInputView bricks.UserInputView = class extends bricks.VBox { constructor(opts){ super(opts); - this.v_w = null; - this.a_v = null; + this.v_ws = []; + this.a_ws = []; this.show_input(this.data); } show_input(data){ var mdtext = ''; + this.v_ws = []; + this.a_ws = []; this.input_fields.forEach(f =>{ if (data[f.name]){ if (f.name.startsWith('video')){ var url = URL.createObjectURL(data[f.name]); - this.v_w = new bricks.VideoPlayer({ + this.v_ws.push(new bricks.VideoPlayer({ url:url, - autoplay:true, + autoplay:false, width: '100%' - }); + })); } else if (f.name.startsWith('audio')){ var url = URL.createObjectURL(data[f.name]); - console.log('audio:', f.name, data[f.name]); - this.a_w = new bricks.AudioPlayer({ + this.a_ws.push(new bricks.AudioPlayer({ url:url, - autoplay:true, + autoplay:false, width: '100%' - }); + })); } else if (f.name.startsWith('image')){ var url = URL.createObjectURL(data[f.name]); mdtext += ` @@ -53,12 +54,8 @@ ${data[f.name]} }); console.log('mdtext=', mdtext); this.add_widget(w); - if (this.v_w){ - this.add_widget(this.v_w); - } - if (this.a_w){ - this.add_widget(this.a_w); - } + this.v_ws.forEach(v => this.add_widget(v)); + this.a_ws.forEach(a => this.add_widget(a)); } } /* @@ -134,28 +131,28 @@ bricks.LlmOut = class extends bricks.VBox { } if (data.audio){ if (Array.isArray(data.audio)){ - this.audios.concat(data.audio); + this.audios = this.audios.concat(data.audio); } else { this.audios.push(data.audio); } } if (data.glb){ if (Array.isArray(data.glb)){ - this.glbs.concat(data.glb); + this.glbs = this.glbs.concat(data.glb); } else { this.glbs.push(data.glb); } } if (data.video){ if (Array.isArray(data.video)){ - this.videos.concat(data.video); + this.videos = this.videos.concat(data.video); } else { this.videos.push(data.video); } } if (data.image){ if (Array.isArray(data.image)){ - this.images.concat(data.image); + this.images = this.images.concat(data.image); } else { this.images.push(data.image); }