mdx-editor / mdx-editor/editor

"Upload an image" dialog opens gallery only (no camera) on Chromium-based Android browsers

Open
#951 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
3.7k
Forks
307
Avg merge
14h 22m
Merged PRs (30d)
5

Description

  • I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
  • I have read the documentation and cannot find an answer.

Describe the issue
The built-in "Upload an image" dialog's device-upload field is a plain <input type="file" accept="image/*"> with no capture attribute. On Samsung Internet and iOS Safari, the OS still offers a "camera" option for this input, but on Chromium-based Android browsers (Chrome specifically) the input only opens the device gallery/file picker, with no way to trigger the camera directly. This is inconsistent behavior across mobile browsers for what is meant to be the same "upload an image" action.

Reproduction
The public demo at https://mdxeditor.dev/editor/demo reproduces this too, since it uses the same default image dialog.

To Reproduce
Steps to reproduce the behavior:

  1. Open https://mdxeditor.dev/editor/demo on an Android phone using Chrome.
  2. Click the "Insert image" toolbar button.
  3. In the "Upload an image" dialog, click "Choose File".
  4. The device gallery/file picker opens directly; there is no option to open the camera.
  5. Repeat the same steps on the same device using Samsung Internet, or on an iOS phone using Safari: the camera option is offered there.

See attached unwanted_behaviour.gif (Chrome on Android: gallery only) vs. wanted_behaviour.gif (Samsung Internet: camera option available).

Unwanted (Chrome on Android: gallery only) Wanted (Samsung Internet: camera option available)
Image Image

Expected behavior
The device-upload field should consistently offer the option to take a photo directly with the camera, regardless of browser. Since this is a common web-platform gotcha (the fix is adding capture="environment" to the file input), it would help if imagePlugin exposed an option to add this attribute to the built-in dialog's file input, e.g.:

imagePlugin({
  imageUploadHandler,
  captureAttribute: 'environment', // or 'user', or undefined to keep current behavior
})

Screenshots
See attached wanted_behaviour.gif and unwanted_behaviour.gif.

Mobile (please complete the following information):

  • OS: Android (issue reproduces), iOS (works correctly)
  • Browser: Chrome on Android (issue reproduces); Samsung Internet on Android and Safari on iOS (both work correctly, camera option offered)

Additional context
As a workaround, we added a second toolbar button next to the existing "insert image" button. It uses a hidden <input type="file" accept="image/*" capture="environment">, and on change calls the public insertImage$ signal with the selected file, so it goes through the same imageUploadHandler pipeline as a normal image insert. This reliably opens the camera across Chrome Android, Samsung Internet, and iOS Safari, confirming capture="environment" is the fix.
It would be nice to have this built into the default dialog/plugin options rather than requiring a separate button.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by inspecting imagePlugin and the built-in "Upload an image" dialog, especially the device-upload input described in the issue. Compare its options with the workaround's hidden input and capture attribute. Done means the plugin can optionally pass the requested capture value through to the file input while preserving current behavior when it is undefined, and the dialog works across the listed mobile browsers.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, mobile-dev
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
64/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.