Uploading images via the phone camera is broken on iOS

[klonos]

Description of the bug Back in version 1.4 we added the ability to select an image from a mobile device's camera. Sometime since then, we lost it. We should find out how that happened and add it back.

Heres the markup for current input element:

<input data-file-auto-upload="1" data-file-extensions="png,gif,jpg,jpeg" accept="*/*,capture=camera" type="file" id="edit-field-image-und-0-upload" name="files[field_image_und_0]" size="22" class="form-file validate-extension-processed auto-upload-processed">

I think the problem maybe accept="*/*,capture=camera". That may need to be accept="image/*,capture=camera" for iOS.

Steps To Reproduce To reproduce the behavior:

1. Log into a clean backdrop install from your iPhone or iPad.
2. Create a post, and scroll to the image field.
3. Click "upload" and see if you can browse through your camera.

Actual behavior Unable to open images in the camera app

Expected behavior I should be able to load photos from my camera on an iPhone

Additional information Add any other information that could help, such as:

• Backdrop CMS version: 1.15 and 1.14 (and maybe others)
• Device: iPhone

Recommended Solution

Since we are only addressing about image fields in the PR, the change should not have any negative side affects.

This will NOT solve the problem for file fields that also allow images, those will still be unable to select images from the camera on iOS devices.

---

Original issue:

I've been owning Android phones for many years now, so I have not noticed this, but I have recently asked a colleague to confirm this for me on their iPhone, and it is indeed broken.

Can we please have a few more people test in various Apple devices and confirm?

---

PR: https://github.com/backdrop/backdrop/pull/3064

Advocate: @laryn

[klonos]

I have just tested this on BrowserStack...

• iPhone X, iOS 11, Chrome: works 👍
• iPhone X, iOS 11, Safari: works 👍
• iPad Pro 11 2018, iOS 12, Chrome: works 👍
• iPad Pro 11 2018, iOS 12, Safari: works 👍

Hmm, not sure what's wrong with the people that have reported this not working for them

[klonos]

...I have also tested this by adding images in CKEditor. Also works 👍

[olafgrabienski]

I've tested uploading images in CKEditor and via the post image field on iOS.

• iPhone SE, iOS 12.4.1, Chrome and Safari: works √
• iPad Pro 11, iOS 12.4, Chrome and Safari: works √

Side note: Images uploaded via the image field with the iPhone didn't appear with the correct orientation, e.g. upside down. I've then enabled the setting "Enable image re-orientation" in the field settings and uploaded a new image from the iPhone, again without re-orientation success. Can someone confirm the issue? If so, we should have another look at https://github.com/backdrop/backdrop-issues/issues/2887.

[Graham-72]

@olafgrabienski Is re-orientation working when uploading in CKeditor?

[olafgrabienski]

Is re-orientation working when uploading in CKeditor?

@Graham-72 - sorry to not have mentioned it explicitly: In CKEditor it is working.

[Graham-72]

@olafgrabienski Thanks. I don't have an iPhone but a friend emailed me a photo and it arrived with its EXIF data which gives an orientation value 'Right top', it's a portrait photo. I uploaded as an image field with re-orientation set and is has been turned by 90 degrees, so in this case it worked in Backdrop.

EXIF data shows the version of the iPhone software as 13.1.3.

Can you find out the EXIF data of the image you were testing? Maybe in Backdrop we are not correctly recognising what iOS uses to denote 'upside down'?

[Graham-72]

Another thought, which version of PHP were you using? We (Backdrop) are relying on PHP function exif_read_data and then we (Backdrop) rely on the numerical value it produces for orientation. Apparently camera manufacturers differ on this (notably Apple of course). My test was with PHP 7.1.33

[Graham-72]

A further thought! My desktop image browser (IrfanView) may be converting EXIF orientation number codes into 'Right top' etc. so maybe I am not seeing what iOS is actually producing. More tests are needed.

[olafgrabienski]

@Graham-72 Thanks for your questions! Mabe it's just an issue with my phone: When I open the image with the Mac OS preview, the info dialog says "Orientation 3", which means "180 degrees – image is upside down". So, technically it's okay to show it upside down. (Now I'm wondering why with CKEditor the image wasn't displayed upside down. Maybe because of different information about orientation? An info dialog in my alternative Mac OS X file manager says for instance "Orientation 0". I'd say, unless nobody else reports orientation issues, we shouldn't invest further time investigating this.

Apart of that, the PHP version of the website was 7.2.23. (I've used a demo sandbox from https://backdropcms.org/demo/create.)

[Graham-72]

@olafgrabienski if it receives a file with EXIF orientation value 3, the re-orientation function in Backdrop's core/includes/file.inc will rotate the image by 180 degrees (- code on line 1952 and following). I would be interested to hear anyone else's reports of problems. I feel there must be some other reason for this experience.

[olafgrabienski]

if it receives a file with EXIF orientation value 3, the re-orientation function in Backdrop's core/includes/file.inc will rotate the image by 180 degrees

Then it worked in my case, as the image has been rotated (i.e. it turned upside down). When I said in https://github.com/backdrop/backdrop-issues/issues/4185#issuecomment-549131624 that it "didn't appear with the correct orientation", I didn't know of the orientation value 3. (On my phone and on my computer it's displayed 'upside up' regardless of value 3.)

[Graham-72]

Thanks for this news. I wonder whether users sometimes have problems because they do not realise that the re-orientation function has to be set by admin? Personally I think it should be on by default.

[cellear]

I've tested uploading images in CKEditor and via the post image field on iOS.

• iPhone SE, iOS 12.4.1, Chrome and Safari: works √
• iPad Pro 11, iOS 12.4, Chrome and Safari: works √

Wait...it does?

I've not been able to get it to work. I guess it's a support issue to figure out what I'm doing wrong :(

[cellear]

Here's what I see on in the interface on my vanity site. No "use camera" or similar option that I can see:

[cellear]

As compared to this “take photo” option on this very Github interface that we're chatting on. Is Backdrop showing you guys this kind of interface?

...which pulls up the camera. I think this is a killer feature if we really have it, which I've been told we do :)

[olafgrabienski]

Is Backdrop showing you guys this kind of interface?

Yes, it is. Tested on a vanilla demo site with iPhone SE, iOS 12.4.1, Safari:

[Graham-72]

And I can confirm that re-orientation is working when using an Android phone and Chrome and the option to take a photo.

@klonos we seem unable to re-create this problem.

[laryn]

Total spitball -- is it possible a secure page is required for the camera to connect to the field directly?

[jenlampton]

Aha, I thought this issue had been raised before, but all my searches turned up nothing. :( Sorry for the dupe over in https://github.com/backdrop/backdrop-issues/issues/4300. I've closed that issue in favor of this one since this one is older.

I have just tested this on BrowserStack...

I don't think BrowserStack is a suitable way to test this problem since we need to access the camera on an iPhone device. I'm not sure that an file access on an emulator would work exactly the same way as file access on a device.

Total spitball -- is it possible a secure page is required for the camera to connect to the field directly?

No, because applying the change in the PR fixes the issue for iPhone users that are having the problem.

[klonos]

@jenlampton BrowserStack has been using real devices for some time now:

https://www.browserstack.com/real-device-cloud

What is a Real Device Cloud?

Imagine that you have access to thousands of real desktop and mobile devices, each of which can be used for testing websites and apps in real-time, under real-user conditions. These devices are hosted on cloud-based servers, thus making them accessible online at all times. Such a testing infrastructure is called a real device cloud.

[jenlampton]

Woah.

[quicksketch]

The PR at https://github.com/backdrop/backdrop/pull/3064 seems straight forward to me. We already have this bit in file.module:

    // Add support for mobile camera uploads if jpg is a valid extension.
    // Browser support for HTML5 extension validation is still weak at this
    // point, add more extensive extension support in the future.
    if (in_array('jpg', $extension_array)) {
      $element['upload']['#attributes']['accept'] = '*/*,capture=camera';
    }

Would it work to add '*/*,image/*,capture=camera' as the accept attribute so this would work on file fields as well?

In any case, the current approach seems fine as-is anyway. Have we confirmed it solves the problem in the demo sandbox?

[olafgrabienski]

Have we confirmed it solves the problem in the demo sandbox?

I've tested the sandbox, and for me it works on iPhone and iPad. However, both worked for me already before this PR -- see https://github.com/backdrop/backdrop-issues/issues/4185#issuecomment-549131624 --, so I guess more testing is needed.

[Retsell]

I’m confused. Not a programmer; just need to be able to upload photos to my sites from my iPad. Apparently it works for some but not others. Certainly doesn’t work for me. I have backdrop sites on 3 different servers and none of them allow image uploads. The “Take Photo/Photo Library/Browse” options don’t show, for image fields, or Ckeditor insert image. All works fine on a PC, but not on the iPad or iPhone, either in safari or Firefox for iOS. If there is a fix, I’d sure like to know what it is. This thread seemed to go off on a tangent about an image orientation issue that sounds to me like a separate issue. Thanks for any help clearing this up!

Edit: Mine is an iPad Air 2 on iOS 13. I see the testing noted above was with iOS 12.

[olafgrabienski]

@retsell Thanks for your input! It would be interesting to see if the suggested PR (pull request) fixes the issue for you. Could you give the PR a try?

To test the PR easily, go to https://github.com/backdrop/backdrop/pull/3064, scroll down a bit and look for the Website link http://3064.backdrop.backdrop.qa.backdropcms.org. This is a sandbox site which includes the changes of the PR. You'll find the login credentials directly below the website link.

[Retsell]

@olafgrabienski - Thanks for that helpful information. I tested on that site and find that the problem was resolved for uploading to an image field. However, it did not fix the problem for uploading images into the body text field via the editor’s image uploader. Can the same fix be applied to the Ckeditor??

Thanks!

[olafgrabienski]

Thank you, @Retsell, for testing! I confirm that the PR works for the image field but not in the CKEditor image dialog. (Tested on iPhone, iOS 13.4.) @jenlampton Can you extend your PR for images to be inserted via CKEditor?

[klonos]

@jenlampton it seems that the default for '#type' => 'managed_file' when the extension is jpg (the file type that i-devices seem to be using for images taken with the camera) is to set the accept attribute to */*,capture=camera which doesn't seem to work. It needs to be image/*,capture=camera instead.

Here's a PR against your PR/branch that should fix things for CKEditor + other instances where '#type' => 'managed_file' is used 😉

https://github.com/jenlampton/backdrop/pull/11

[klonos]

Hey @Retsell 👋 ...can you please try testing the PR sandbox again? Things should now also work with the "Insert image" dialog in CKEditor. Please confirm.

[olafgrabienski]

For me it works in CKEditor now, using PR https://github.com/backdrop/backdrop/pull/3064! (iPhone, iOS 13.4)

Btw, the sandbox website has a lot of available DB updates, didn't run them.