Consider substituting optional BlobPart or sequence<BlobPart> for optional sequence<BlobPart> blobParts at constructor

[guest271314]

Per https://github.com/heycam/webidl/issues/868#issuecomment-609460584

In theory, the type of the argument could have been (BlobPart or sequence) and due to the algorithm for coercing a union type, a lone TypedArray would then end up recognized as a BlobPart rather than a sequence, I believe. That is probably what you were hoping for / would have found more intuitive.

BlobPart or sequence<BlobPart> could allow

new Blob(TypedArray)

to not be converted to a string.

[guest271314]

Use case

If new Blob(undefined) https://github.com/w3c/FileAPI/issues/33 can be handled to output

Blob {size: 0, type: ""}

Similarly

new Blob(new Float32Array([0.00005549501292989589, 0.00006459458381868899, 0.000058644378441385925, 0.00006201512587722391]))

should be handled to output

file.arrayBuffer().then(b =>  console.log(new Float32Array(b))).catch(console.error);
Promise {<pending>}
Float32Array(4) [0.00005549501292989589, 0.00006459458381868899, 0.000058644378441385925, 0.00006201512587722391]

rather than RangeError (Chromium RangeError: byte length of Float32Array should be a multiple of 4; Nightly RangeError: "attempting to construct out-of-bounds TypedArray on ArrayBuffer") due to

file.text().then(console.log).catch(console.error); // new Blob(TypedArray)
Promise {<pending>}
0.000055495012929895890.000064594583818688990.0000586443784413859250.00006201512587722391

instead of

file.text().then(console.log).catch(console.error); // new Blob([TypedArray])
Promise {<pending>}
Q�h8�v�8��u8���8

Will the suggested change break any existing API or be incompatible with implementation that uses File API expecting new Blob(TypedArray) to output a concatenated string of the members of the passed TypedArray?

[domenic]

It seems the use case here is allowing you to avoid typing [ and ]. I'm not sure that's worth the churn.

[guest271314]

Actually the use of [] is not particularly problematic from a front-end coding perspective. It is not clearly specified that, or Set is required to avoid conversion to string, at least not immediately clear in plain language at the specification, that could disambiguate from no use of []. Consistency is the purpose of the suggestion: Why does new Blob(void 0) // new Blob(undefined) not output Blob {size: 6, type: ""} or Blob {size: 9, type: ""} if in fact any value not within [] or Set is converted to string?

The change will avoid unexpected results when [] is not used.

If the change is not worth it from a specification perspective a note describing that to avoid string conversion for the case of new Blob(TypedArray), new Blob([TypedArray]) should be used. That is, if including a note clarifying the case is not expensive: it would certainly be useful for readers of specification, and a reference point.

[guest271314]

The adjacent, or opposite, case is passing an array of TypedArrays, to Blob() with [] included, e.g., new Blob([[Uint8Array, Uint8Array, ..., Uint8Array]]) where when the data is attempted to be converted back to original values, the result will not be expected. In brief,

          Promise.all(promises)
          .then(result => {
            console.log(result); // (890) [Uint8Array(36), Uint8Array(38), ... Uint8Array(38)]
            /*
              0: Uint8Array(36) [82, 73, 70, 70, 28, 0, 0, 0, 87, 69, 66, 80, 86, 80, 56, 76, 16, 0, 0, 0, 47, 149, 64, 37, 0, 7, 80, 194, 168, 66, 255, 3, 17, 209, 255, 0]
              ...
            */
            let blob, file;
            // RangeError: Invalid string length
            // Array.join (<anonymous>)
            // Array.toString (<anonymous>)
            try {
              blob = new Blob([result]);
              console.log(blob);
              blob.arrayBuffer().then(buffer => {
                console.log(new Uint8Array(buffer)); // Uint8Array(94848) [56, 50, 44, 55, 51, 44, 55, 48, 44, 55, 48, 44, 50, 56, 44, 48, 44, 48, 44, 48, 44, 56, 55
              })
            } catch (e) {
                console.error(e);
            }
          });

Now, if we try we will get an error

createImageBitmap(new Blob([new Uint8Array([56, 50, 44, 55, 51, 44, 55, 48, 44, 55, 48, 44, 50, 56, 44, 48, 44, 48, 44, 48, 44, 56, 55, 44, 54, 57, 44, 54, 54, 44, 56, 48, 44, 56, 54, 44])]))
.then(console.log).catch(console.error);
Promise {<pending>}
663a7444cff629a41b76.js:109 DOMException: The source image could not be decoded.

where if we got back the same results we will get

createImageBitmap(new Blob([new Uint8Array([82, 73, 70, 70, 28, 0, 0, 0, 87, 69, 66, 80, 86, 80, 56, 76, 16, 0, 0, 0, 47, 149, 64, 37, 0, 7, 80, 194, 168, 66, 255, 3, 17, 209, 255, 0])]))
.then(console.log);
Promise {<pending>}
663a7444cff629a41b76.js:109 ImageBitmap {width: 150, height: 150}

What happened to the original input data? Simply using [] directly affected the result when converting back to original data?

Evidently, yes. In this case, potentially relatively common, the resulting promise value from Promise.all(), we do not need to use []

          Promise.all(promises)
          .then(result => {
            console.log(result); // (892) [Uint8Array(36), Uint8Array(36), Uint8Array(38)...]
            /*
            0: Uint8Array(36) [82, 73, 70, 70, 28, 0, 0, 0, 87, 69, 66, 80, 86, 80, 56, 76, 16, 0, 0, ...]
            */
            let blob, file;
            // RangeError: Invalid string length
            // Array.join (<anonymous>)
            // Array.toString (<anonymous>)
            try {
              blob = new Blob(result);
              console.log(blob); // Blob {size: 33164, type: ""}
              blob.arrayBuffer().then(buffer => {
                // now we can use subarray(), slice(), ReadableStream/WritableStream, etc. to re-create the ImageBitmap, in sequence, or by specific offset(s)
                console.log(new Uint8Array(buffer)); // Uint8Array(33164) [82, 73, 70, 70, 28, 0, 0, 0, 87, 69, 66, 80, 86, 80, 56, 76, 16, 0, 0, 0, ...]
              })
            } catch (e) {
                console.error(e);
            }
            ...
         })

[guest271314]

Or, are the above examples simply relegated to PEBCAK, without need for note to user re use of [] or not at Blob constructor? If so, kindly close the issue.

[guest271314]

From the wild https://stackoverflow.com/questions/61620389/how-to-load-previous-state-of-file-field-in-react#comment109152574_61620572 at https://stackoverflow.com/q/61620389

However, somehow I cannot completely solve the problem by using your code. It is not possible to create a file from the incoming form data. TypeError: Failed to construct 'File': The provided value cannot be converted to a sequence. – dan_boy May 10 at 7:40

Am not sure what response.data.file is or expected to be in the code.