uploadFile no longer works

[kendalsickels-wf]

After this change #98 we are seeing a failure in uploadFile

Stack:

Evaluation failed: TypeError: Failed to fetch
      at __puppeteer_evaluation_script__:3:30
  package:puppeteer/src/page/execution_context.dart 171:11  ExecutionContext._evaluateInternal

Pinning puppeteer to 1.14.1 works around the issue in the meantime.

[xvrh]

Sorry about that.
I just blindly applied the puppeteer change in puppeteer/puppeteer#5196

May be, I will back-off and revert the change until I figure out why this is needed and what version of Chromium are compatible.

[xvrh]

I published 1.15.1 with the revert.
The change will wait until this is clearer what it is about.

[xvrh]

The uploadFile change has been submitted again in version 1.16.0.
This is necessary due to the removal on an internal command in the dev tool protocol.
Please open this bug again if this causes any issue.

[kendalsickels-wf]

@xvrh doesn't look like I have perms to reopen but this most definitely does result in the same stack as above.

[xvrh]

OK thank. I reopen and I'll investigate. This time I can't just revert the change.

[xvrh]

Hi @kendalsickels-wf
Would you mind trying to reproduce the problem in an isolated environment?

Can you modify this kind of script to understand the difference you are seing with the new version?

import 'dart:convert';
import 'dart:io';

import 'package:mime/mime.dart';
import 'package:shelf/shelf_io.dart' as shelf;
import 'package:shelf/shelf.dart' as shelf;
import 'package:puppeteer/puppeteer.dart';

void main() async {
  var httpServer = await shelf.serve((request) async {
    if (request.method.toLowerCase() == 'post') {
      var header =
          HeaderValue.parse(request.headers[HttpHeaders.contentTypeHeader]);
      var boundary = header.parameters['boundary'];
      print(request.headers);
      await for (var part
          in request.read().transform(MimeMultipartTransformer(boundary))) {
        print('Part ${part.headers}');
        var partHeaders =
            HeaderValue.parse(part.headers['content-disposition']);
        var fileName = partHeaders.parameters['filename'];
        if (fileName != null) {
          var fileSink = File('_received_$fileName').openWrite();
          await part.pipe(fileSink);
          await fileSink.close();
        }
      }
    }
    return shelf.Response.ok(utf8.encode('''
<form method="post" enctype="multipart/form-data">
  <input type="file" name="my_file">
  <input type="submit" value="Upload" name="submit">
</form>
'''), headers: {HttpHeaders.contentTypeHeader: 'text/html'});
  }, InternetAddress.anyIPv4, 0);

  var browser = await puppeteer.launch();
  var page = await browser.newPage();
  await page.goto('http://${httpServer.address.host}:${httpServer.port}',
      wait: Until.networkIdle);

  var inputFile = await page.$('input[type=file]');
  await inputFile.uploadFile([File('CHANGELOG.md')]);
  var submitButton = await page.$('input[type=submit]');
  await submitButton.click();

  await browser.close();
  await httpServer.close(force: true);
}

[kendalsickels-wf]

So after some debugging it there were a few issues at play. First, the new uploadFile changes were hitting a CSP issue with our application:

VM171 __puppeteer_evaluation_script__:3 Refused to connect to 'data:application/octet-stream;base64,FQYVBhiTmAHsnfmXJMl90KNqemZqpnt29rS09iLF7nqNMU1PRMY92JZWIy0SSPKiXRv/JsfZk1Zdm5k1s+LSGrC5ZHMfQphLxtwgsLnF9Q/oIS4BNgLEJU4B4jZgXmRm93T1dE1PT09Hxzw69+2rqeo6vp/vFd+I/GbGBhhsgME6WAMAPOX8ZPbR22Vzc7ZoPlpO9LavR+A8AGAwAhcAAAMAroLhBgDgse5z7UcHAIAnXtdm7OEswBuzaeOnTT0ClwH46uMjsA4G7HtGYAOA5+AIXAHgOTgCj3XPrsYHsAGG6+23vBQqvX2dIYK1tRphxSkSzGglrCHcBi2Nl2wIzoMRuAhA+18vEFgH5wAAL3DrOWc4WOEIpYFoHkjgFgdiUcGU+igG+0R//oNl3dQwYsN6EUL5pq+hnjo4r3z75PqDo5jgjCXCKOo91YU0yknqMKNKCqywGR4LhYJ9KM++/J2vfw...HEulSjigYlFFngwaqgEup8Pwj66C047hNuPlejigalrFEsSeYtRBQ8UIAocthrJRTChl/asKJBOaYUqTxeYgk9C8ajU8QYB0oU44axjyoalBUyBsEtZ8yi0d4pLfLSfpQqCpOvWKnbalTRoBI73UGF5J3BCM4Ka50XXmgWiGyZO5w/V6OKBqUMA+E45JcGno6ERuWYVQFETFZvjHNHFQ1KMmVEUE4xLxCNtqBS0EpF0Ap43Hg1jioaVMovXeVAIQDGyIxgIl8hJ8hH4PnWmbqtRhUNChAC995ZJjkKpa1QhEkaqXxiZDfewqOKBuV4DAYJteUR0Tly0iGLSiumY9rwghxWNKjgg/fKQhRSIQNryDDiXplgpSXX+j4OKxpUckmByofiOEPlnPOJh6hJCaUV5BPmTVsNKhqU0CFCEloI5pEHJJAcyet4uv8qbbTVqKJBRYzAozaRSUKNylD0CUErUia3V/vCH1WsqMPh68OXX704HA6Hw/8HAAD//wA=' because it violates the document's Content Security Policy.

I worked around that by adding data: to default-src. For the record if someone wished to not add to their CSP they could use await page.setBypassCSP(true); prior to their page.goto() and that would also avoid the issue.

Upload was still not working. So I changed the dispatchEvent from input to change and now everything works. It appears js puppeteer has an issue opened for this too: puppeteer/puppeteer#5434

Would you like me to put up a PR to make this change in puppeteer-dart?

[kendalsickels-wf]

Pushed this up: #105 Changing the event type broke a few tests so I added an additional event to accommodate the need for change

[xvrh]

Thanks for the debugging and all the information!
It seems there is a lot of issue reported in the main puppeteer repository about the uploadFile change.