background

In the development process of H5 upload file business, the upload function needed to allow users to upload pictures/PDF files. It was easy for us to think that we only needed to change the Accept attribute of input, and we used the accept attribute as follows.

<input accept="image/jpeg,image/jpg,image/png,application/pdf" type="file" />

But when I tested it on Chrome, a real Android phone, I had some problems.

It can be seen that after we click Choose File, there appear two buttons that should not appear, Camcorder and Recorder. Through the investigation, I judge that the problem is Chrome itself, so how to raise issues for Chrome?

Where can I raise Issues for Chrome?

Bugs.chromium.org/p/chromium/…

Some of you might say, well, isn’t that chromium bug zone? It’s not Chrome.

Here’s a quick reminder:

  • Chromium is an open source project at Google that all developers can work on to improve.

  • Chrome is not an open source project and Google will update Chromium stuff into Chrome. So Chromium is more like the experience version, whereas Chrome is the official version.

Mention issues steps

Enter the Issues page

We openBugs.chromium.org/p/chromium/…page

Enter the model environment information

Here Chrome versions, the website will automatically help us to identify. Since we are filling in on PC, we need to fill in our own mobile device system and version.

Select Issues Type

Since we are developers, we choose Web Developer directly

The above questions belong to the browser API, and we chose the API

Describe our problem in detail

It is recommended to upload the source code or provide a CodesandBox. Here, because my problem is relatively simple, I just uploaded an HTML page. In order for Chrome maintainers to better reproduce the bug, I have uploaded 4 images and provided the performance in Firefox (it is normal on Firefox, no bug).

So that’s the end of raising issues for Chrome,

The following is the link to the issues I mentioned, welcome to watch:

Bugs.chromium.org/p/chromium/…

The following is a detailed description of the problem

Specific Case analysis above

The bug of recording and camera button appears when H5 uploads popup.

Here is our simplest page:

Click on the first line of the input id = “1” accept = “image/jpeg image/JPG, image/PNG” type = “file” / > button

You can see that Chrome is behaving normally

Click on the second row < input accept = “image/jpeg image/JPG, image/PNG, application/PDF” type = “file” / > button

You can see that four buttons pop up, but there are more Camcorder and Recoder, which is not normal. We did not declare in Accept that we require users to upload files in these two formats

What about performance in Firefox? Click on the button in the second row, you can see Everything is fine. So we can determine that the bug is a Chrome problem.

How to self-compatible?

In the input onChange callback, make your own judgment based on files. If the user uploads the wrong type, discard the file and give the user tips.

The issues I have raised are as follows

Welcome to watch:

Bugs.chromium.org/p/chromium/…