Compute FileUpload value on the frontend

Author: jtpio

ipywidgets/widgets/widget_upload.py

@@ -15,15 +15,7 @@
 from .widget_core import CoreWidget
 from .widget_button import ButtonStyle
 from .widget import register, widget_serialization
-from .trait_types import bytes_serialization, InstanceDict
-
-def content_from_json(value, widget):
-    """
-    deserialize file content
-    """
-    from_json = bytes_serialization['from_json']
-    output = [from_json(e, None) for e in value]
-    return output
+from .trait_types import InstanceDict
 
 
 @register
@@ -33,11 +25,6 @@ class FileUpload(DescriptionWidget, ValueWidget, CoreWidget):
     """
     _model_name = Unicode('FileUploadModel').tag(sync=True)
     _view_name = Unicode('FileUploadView').tag(sync=True)
-    _counter = Int(read_only=True).tag(sync=True)
-    _metadata = List(Dict(), read_only=True, help='List of file metadata').tag(sync=True)
-    _data = List(Bytes(), read_only=True, help='List of file content (bytes)').tag(
-        sync=True, from_json=content_from_json
-    )
 
     accept = Unicode(help='File types to accept, empty string for all').tag(sync=True)
     multiple = Bool(help='If True, allow for multiple files upload').tag(sync=True)
@@ -48,17 +35,7 @@ class FileUpload(DescriptionWidget, ValueWidget, CoreWidget):
         help="""Use a predefined styling for the button.""").tag(sync=True)
     style = InstanceDict(ButtonStyle).tag(sync=True, **widget_serialization)
     error = Unicode(help='Error message').tag(sync=True)
-    value = Dict(read_only=True)
-
-    @observe('_counter')
-    def on_incr_counter(self, change):
-        res = {}
-        msg = 'Error: length of metadata and data must be equal'
-        assert len(self._metadata) == len(self._data), msg
-        for metadata, content in zip(self._metadata, self._data):
-            name = metadata['name']
-            res[name] = {'metadata': metadata, 'content': content}
-        self.set_trait('value', res)
+    value = List(Dict(), help="The file upload value").tag(sync=True)
 
     @default('description')
     def _default_description(self):

packages/controls/src/widget_upload.ts

@@ -12,25 +12,22 @@ export class FileUploadModel extends CoreDOMWidgetModel {
             _model_name: 'FileUploadModel',
             _view_name: 'FileUploadView',
 
-            _counter: 0,
-            _file_count: 0,
-            _data: [],
-            _metadata: [],
             accept: '',
             description: 'Upload',
             tooltip: '',
             disabled: false,
             icon: 'upload',
             button_style: '',
             multiple: false,
+            value: [],
             error: '',
             style: null
         });
     }
 
     static serializers = {
         ...CoreDOMWidgetModel.serializers,
-        _data: { serialize: (buffers: any) => { return [...buffers]; } },
+        value: { serialize: (x: any) => x },
     };
 }
 
@@ -97,18 +94,14 @@ export class FileUploadView extends DOMWidgetView {
 
             Promise.all(promisesFile)
                 .then(contents => {
-                    const metadata: any[] = [];
-                    const li_buffer: any[] = [];
-                    contents.forEach(c => {
-                        metadata.push(c.metadata);
-                        li_buffer.push(c.buffer);
+                    const value = contents.map(c => {
+                        return {
+                            metadata: c.metadata,
+                            content: c.buffer
+                        };
                     });
-                    let counter = this.model.get('_counter');
                     this.model.set({
-                        _counter: counter + contents.length,
-                        _file_count: contents.length,
-                        _metadata: metadata,
-                        _data: li_buffer,
+                        value,
                         error: '',
                     });
                     this.touch();
@@ -131,7 +124,8 @@ export class FileUploadView extends DOMWidgetView {
         this.el.disabled = this.model.get('disabled');
         this.el.setAttribute('title', this.model.get('tooltip'));
 
-        let description = `${this.model.get('description')} (${this.model.get('_file_count')})`;
+        const value: [] = this.model.get('value');
+        let description = `${this.model.get('description')} (${value.length})`;
         let icon = this.model.get('icon');
         if (description.length || icon.length) {
             this.el.textContent = '';

packages/schema/jupyterwidgetmodels.latest.md

@@ -388,10 +388,7 @@ Attribute        | Type             | Default          | Help
 
 Attribute        | Type             | Default          | Help
 -----------------|------------------|------------------|----
-`_counter`       | number (integer) | `0`              | 
-`_data`          | array            | `[]`             | List of file content (bytes)
 `_dom_classes`   | array of string  | `[]`             | CSS classes applied to widget DOM element
-`_metadata`      | array            | `[]`             | List of file metadata
 `_model_module`  | string           | `'@jupyter-widgets/controls'` | 
 `_model_module_version` | string           | `'1.5.0'`        | 
 `_model_name`    | string           | `'FileUploadModel'` | 
@@ -409,6 +406,7 @@ Attribute        | Type             | Default          | Help
 `multiple`       | boolean          | `false`          | If True, allow for multiple files upload
 `style`          | reference to ButtonStyle widget | reference to new instance | 
 `tabbable`       | `null` or boolean | `null`           | Is widget tabbable?
+`value`          | array            | `[]`             | The file upload value
 
 ### FloatLogSliderModel (@jupyter-widgets/controls, 1.5.0); FloatLogSliderView (@jupyter-widgets/controls, 1.5.0)