Upload file fixed (#8211)

<!--
Thank you for your contribution.

Before making a PR, please read our contributing guidelines at

https://github.com/DevExpress/testcafe/blob/master/CONTRIBUTING.md#code-contribution

We recommend creating a *draft* PR, so that you can mark it as 'ready
for review' when you are done.
-->

## Purpose
Protocol.Fetch.RequestPausedEvent postData is now deprecated resulting
in file corruption in file uploads.

## Approach
Replace postData with postDataEntries.

## References

https://chromedevtools.github.io/devtools-protocol/tot/Network/#type-Request
closes #8198

## Pre-Merge TODO
- [ ] Write tests for your proposed changes
- [ ] Make sure that existing tests do not fail

---------

Co-authored-by: Bayheck <[email protected]>

Author: Bayheck

src/native-automation/request-pipeline/index.ts

@@ -358,12 +358,17 @@ export default class NativeAutomationRequestPipeline extends NativeAutomationApi
     }
 
     private _getUploadPostData (event: Protocol.Fetch.RequestPausedEvent): string | undefined {
-        if (!event.request.postData)
+        if (!event.request.postDataEntries || !event.request.postDataEntries.length)
             return void 0;
 
         const contentTypeHeader = event.request.headers['Content-Type'] as string;
-        const postData          = Buffer.from(event.request.postData, 'utf-8');
-        const bodyWithUploads   = injectUpload(contentTypeHeader, postData);
+        const dataBuffers       = [];
+
+        for (const dataEntry of event.request.postDataEntries)
+            dataBuffers.push(Buffer.from(dataEntry.bytes ?? '', 'base64'));
+
+        const postData        = Buffer.concat(dataBuffers);
+        const bodyWithUploads = injectUpload(contentTypeHeader, postData);
 
         return bodyWithUploads ? bodyWithUploads.toString('base64') : void 0;
     }

test/functional/fixtures/api/es-next/upload/pages/index.html

@@ -13,5 +13,32 @@
             <input type="file" id="fileRequired" name="fileRequired" required />
             <input type="submit" id="submitRequired" />
         </form>
+        <form>
+            <input type="file" id="fileAlternative" />
+        </form>
+        <div id="uploadedContent"></div>
+        <script>
+            const fileInput       = document.querySelector("#fileAlternative");
+            const form            = document.querySelector("form");
+            const resultContainer = document.querySelector("#uploadedContent");
+
+            fileInput.addEventListener("change", async (e) => {
+                const file     = e.target.files[0];
+                const formData = new FormData();
+                formData.append("files", file);
+
+                try {
+                    const res = await fetch("/file-upload-size", {
+                        method: "post",
+                        body: formData,
+                    });
+                    const text = await res.text();
+                    resultContainer.textContent = text;
+                    form.reset();
+                } catch (error) {
+                    console.error(error);
+                }
+            });
+        </script>
     </body>
 </html>

test/functional/fixtures/api/es-next/upload/test-data/file1.xls

@@ -7,6 +7,10 @@ describe('[API] Upload', function () {
             return runTests('./testcafe-fixtures/upload-test.js', 'Upload the file', { only: 'chrome' });
         });
 
+        it('Should upload the specified xls file', function () {
+            return runTests('./testcafe-fixtures/upload-test.js', 'Upload the xls file', { only: 'chrome' });
+        });
+
         it('Should upload the specified file with required input', function () {
             return runTests('./testcafe-fixtures/upload-test.js', 'Upload the file with required input', { only: 'chrome' });
         });

test/functional/fixtures/api/es-next/upload/test.js

@@ -47,3 +47,12 @@ test('Upload the file with required input', async t => {
 
     expect(await getUploadedText()).equals('File 1 is uploaded!');
 });
+
+test('Upload the xls file', async t => {
+    const file1SizeBytes = 6971392;
+
+    await t
+        .setFilesToUpload('#fileAlternative', '../test-data/file1.xls');
+
+    expect(Number(await getUploadedText())).to.be.at.least(file1SizeBytes);
+});

test/functional/fixtures/api/es-next/upload/testcafe-fixtures/upload-test.js

@@ -230,6 +230,14 @@ Server.prototype._setupRoutes = function (apiRouter) {
         res.end(Mustache.render(UPLOAD_SUCCESS_PAGE_TEMPLATE, { uploadedDataArray: filesData }));
     });
 
+    this.app.post('/file-upload-size', upload.any(), function (req, res) {
+        const filesData = req.files.map(function (file) {
+            return file.size;
+        });
+
+        res.end(`${filesData[0]}`);
+    });
+
     this.app.post('/xhr/test-header', function (req, res) {
         res.send(req.headers.test);
     });