@@ -59,6 +59,39 @@ function postBinaryEmptyResponse(theUrl: string, body: any, callback): void {
5959 xmlHttp . send ( body ) ;
6060}
6161
62+ function uploadBinaryAsVariableValue ( variableKey : string ) : void {
63+ const input = document . createElement ( 'input' ) ;
64+ input . type = 'file' ;
65+
66+ input . onchange = e => {
67+ const file = ( e . target as HTMLInputElement ) . files [ 0 ] ;
68+
69+ const reader = new FileReader ( ) ;
70+ reader . readAsArrayBuffer ( file ) ;
71+
72+ reader . onload = readerEvent => {
73+ const content = readerEvent . target . result as string ; // this is the content!
74+ postBinaryEmptyResponse ( "./variable/value/" + variableKey , content , ( ) => {
75+ location . reload ( ) ;
76+ } )
77+ }
78+ }
79+
80+ input . click ( ) ;
81+ }
82+
83+ function formatFileSize ( bytes : number ) : string {
84+ if ( bytes === 0 ) return '0 B' ;
85+
86+ const units = [ 'B' , 'KB' , 'MB' , 'GB' , 'TB' , 'PB' ] ;
87+ const k = 1024 ;
88+ const i = Math . floor ( Math . log ( bytes ) / Math . log ( k ) ) ;
89+ const size = bytes / Math . pow ( k , i ) ;
90+
91+ // Show up to one decimal if needed
92+ return `${ size . toFixed ( size < 10 && i > 0 ? 1 : 0 ) } ${ units [ i ] } ` ;
93+ }
94+
6295export class VariableManager {
6396
6497 variableListView : Element ;
@@ -118,19 +151,10 @@ export class VariableManager {
118151 }
119152
120153 newImageVariable ( key : string , variable : Variable ) : ElementConfig {
121- const variableTopic = new Subject < string > ( ) ;
122-
123- // variableTopic.pipe(
124- // map(mapper),
125- // mergeMap((val) => this.setVariableValue(key, val))
126- // ).subscribe((resp: Response) => {
127- // console.log(resp);
128- // })
129-
130154 return {
131155 style : {
132156 display : "flex" ,
133- flexDirection :"column" ,
157+ flexDirection : "column" ,
134158 gap : "8px"
135159 } ,
136160 children : [
@@ -145,33 +169,34 @@ export class VariableManager {
145169 tag : "button" ,
146170 text : "Set Image" ,
147171 onclick : ( ) => {
148- const input = document . createElement ( 'input' ) ;
149- input . type = 'file' ;
150-
151- input . onchange = e => {
152- const file = ( e . target as HTMLInputElement ) . files [ 0 ] ;
153-
154- const reader = new FileReader ( ) ;
155- reader . readAsArrayBuffer ( file ) ;
156-
157- reader . onload = readerEvent => {
158- const content = readerEvent . target . result as string ; // this is the content!
159- postBinaryEmptyResponse ( "./variable/value/" + key , content , ( ) => {
160- location . reload ( ) ;
161- } )
162- }
163- }
172+ uploadBinaryAsVariableValue ( key ) ;
173+ }
174+ }
175+ ]
176+ } ;
177+ }
164178
165- input . click ( ) ;
179+ newFileVariable ( key : string , variable : Variable ) : ElementConfig {
180+ return {
181+ style : {
182+ display : "flex" ,
183+ flexDirection : "column" ,
184+ gap : "8px"
185+ } ,
186+ children : [
187+ {
188+ text : formatFileSize ( variable . value . size ) ,
189+ style : {
190+ maxWidth : "100%"
191+ }
192+ } ,
193+ {
194+ tag : "button" ,
195+ text : "Set File" ,
196+ onclick : ( ) => {
197+ uploadBinaryAsVariableValue ( key ) ;
166198 }
167199 }
168- // {
169- // tag: "input",
170- // // change$: variableTopic,
171- // value: `${variable.value}`,
172- // size: 1,
173- // classList: ['variable-number-input'],
174- // }
175200 ]
176201 } ;
177202 }
@@ -412,6 +437,10 @@ export class VariableManager {
412437 console . log ( variable ) ;
413438 break ;
414439
440+ case VariableType . File :
441+ input = this . newFileVariable ( key , variable )
442+ break ;
443+
415444 default :
416445 throw new Error ( "unimplemented variable type: " + variable . type ) ;
417446 }
0 commit comments