fix #684: pin.get_pin_values() not work for put_file_upload()

Author: wang0618

pywebio/platform/utils.py

@@ -55,7 +55,7 @@ def is_same_site(origin, host):
 
 def deserialize_binary_event(data: bytes):
     """
-    Binary event message is used to submit data with files upload to server.
+    Binary event message is used to submit form data with files upload to server.
 
     Data message format:
     | event | file_header | file_data | file_header | file_data | ...
@@ -82,9 +82,9 @@ def deserialize_binary_event(data: bytes):
 
      - When a form field is not a file input, the `event['data'][input_name]` will be the value of the form field.
      - When a form field is a single file, the `event['data'][input_name]` is None,
-        and there will only be one file_header+file_data at most.
+        and there will only be one file_header+file_data for the field.
      - When a form field is a multiple files, the `event['data'][input_name]` is [],
-        and there may be multiple file_header+file_data.
+        and there may be multiple file_header+file_data for the field.
 
     Example:
         b'\x00\x00\x00\x00\x00\x00\x00E{"event":"from_submit","task_id":"main-4788341456","data":{"data":1}}\x00\x00\x00\x00\x00\x00\x00Y{"filename":"hello.txt","size":2,"mime_type":"text/plain","last_modified":1617119937.276}\x00\x00\x00\x00\x00\x00\x00\x02ss'
@@ -104,14 +104,14 @@ def deserialize_binary_event(data: bytes):
     # deserialize file data
     files = defaultdict(list)
     for idx in range(1, len(parts), 2):
-        f = json.loads(parts[idx])
-        f['content'] = parts[idx + 1]
+        file_header = json.loads(parts[idx])
+        file_header['content'] = parts[idx + 1]
 
         # Security fix: to avoid interpreting file name as path
-        f['filename'] = os.path.basename(f['filename'])
+        file_header['filename'] = os.path.basename(file_header['filename'])
 
-        input_name = f.pop('input_name')
-        files[input_name].append(f)
+        input_name = file_header.pop('input_name')
+        files[input_name].append(file_header)
 
     # fill file data to event
     for input_name in list(event['data'].keys()):

webiojs/src/handlers/input.ts

@@ -258,9 +258,7 @@ class FormController {
                     input_data[name] = value;
                     if (that.spec.inputs[idx].type == 'file') {
                         input_data[name] = value.multiple ? [] : null;
-                        value.files.forEach((file: File) => {
-                            files.push(serialize_file(file, name))
-                        });
+                        files.push(...value.files.map((file: File) => serialize_file(file, name)));
                     }
                 }
                 let msg = {

webiojs/src/handlers/pin.ts

@@ -23,18 +23,24 @@ export class PinHandler implements CommandHandler {
                 task_id: msg.task_id,
                 data: values
             };
-            this.submit(send_msg, IsFileInput(msg.spec.name));
+            this.submit(
+                send_msg, 
+                msg.spec.names.filter(IsFileInput)
+            );
         } else if (msg.command === 'pin_update') {
             PinUpdate(msg.spec.name, msg.spec.attributes);
         } else if (msg.command === 'pin_wait') {
             let p = WaitChange(msg.spec.names, msg.spec.timeout);
             Promise.resolve(p).then((change_info: (null | { name: string, value: any })) => {
                 // change_info: null or {'name': name, 'value': value}
-                let send_msg = {event: "js_yield", task_id: msg.task_id, data: change_info}
-                this.submit(send_msg, IsFileInput(change_info.name));
+                let send_msg = {event: "js_yield", task_id: msg.task_id, data: change_info};
+                this.submit(
+                    send_msg, 
+                    (change_info && IsFileInput(change_info.name)) ? ['value'] : []
+                );
             }).catch((error) => {
                 console.error('error in `pin_wait`: %s', error);
-                this.submit({event: "js_yield", task_id: msg.task_id, data: null});
+                this.submit({event: "js_yield", task_id: msg.task_id, data: null}, []);
             });
         } else if (msg.command === 'pin_onchange') {
             let onchange = (val: any) => {
@@ -43,43 +49,48 @@ export class PinHandler implements CommandHandler {
                     task_id: msg.spec.callback_id,
                     data: {value: val}
                 }
-                this.submit(send_msg, IsFileInput(msg.spec.name));
+                this.submit(
+                    send_msg, 
+                    IsFileInput(msg.spec.name)? ['value'] : []
+                );
             }
             PinChangeCallback(msg.spec.name, msg.spec.callback_id ? onchange : null, msg.spec.clear);
         }
     }
 
     /*
-    * Send pin value to server.
-    * `msg.data` may be null, or {value: any, ...}
-    * `msg.data.value` stores the value of the pin.
-    * when submit files, `msg.data.value` is {multiple: bool, files: File[] }
+    * Send pin values to server.
+    * `msg.data`: {input_name: input_value, ...} or null
+    * for file input, the `input_value` is in {multiple: bool, files: File[] }
     * */
-    submit(msg: ClientEvent, is_file: boolean = false) {
-        if (is_file && msg.data !== null) {
-            // msg.data.value: {multiple: bool, files: File[]}
-            let {multiple, files} = msg.data.value;
-            msg.data.value = multiple ? [] : null; // replace file value with initial value
+    submit(msg: ClientEvent, file_input_names: string[]) {
+        // See: deserialize_binary_event() in pywebio/platform/utils.py
+        let file_blobs:Blob[] = [];
+        for (let name of file_input_names) {
+            if (msg.data && msg.data[name]) {
+                // {multiple: bool, files: File[]}
+                let {multiple, files} = msg.data[name];
+                msg.data[name] = multiple ? [] : null; // replace file value with initial value
+                file_blobs.push(...files.map((file: File) => serialize_file(file, name)));
+            }
+        }
 
+        if (file_blobs) {
             let toast = Toastify({
                 text: `⏳${t("file_uploading")} 0%`,
                 duration: -1,
                 gravity: "top",
                 position: 'center',
                 backgroundColor: '#1565c0',
             });
-            if (files.length > 0) toast.showToast();
+            toast.showToast();
             state.CurrentSession.send_buffer(
-                new Blob([
-                    serialize_json(msg),
-                    ...files.map((file: File) => serialize_file(file, 'value'))
-                ], {type: 'application/octet-stream'}),
+                new Blob([serialize_json(msg), ...file_blobs], {type: 'application/octet-stream'}),
                 (loaded: number, total: number) => {
                     toast.toastElement.innerText = `⏳${t("file_uploading")} ${((loaded / total)*100).toFixed(2)}%`;
                     if (total - loaded < 100) toast.hideToast();
                 }
             );
-
         } else {
             state.CurrentSession.send_message(msg);
         }