p38
Active Member
So this had me stumped for a while and I thought it was a camera issue, I could never understand why, when taking a photo, the user would always be presented with an option first (ie: choose file, or use camera or use gallery etc).
I then started looking at making my own element plugin using the getUserMedia option. In my research I discovered the image/audio/video option coupled to <input type="file"> using accept="" and capture="camera"
So back to the file upload element I discovered there was a logic error in the code, that prevented the file input from using the "Image Camera" option that is available in the dropdown list.
the logic error in question is line 2522 in fileupload.php
$accept = !empty($fileTypes) ? ' accept="' . $fileTypes . '" ' : ' ';
will always return accept = ".jpg,.png, etc etc" irrespective if $device_capture = 1 to 6 have been selected, so altho the capture = "camera" proptery is correctlys etup, the accept = "" will always have file extensions.
Consequently when the camera fires up it sees there are extensions setup so it assumes you want to load images as well.
for camera, audo and video only options, the accept property needs to be accept="image/*",accept="audio/*", accept="video/*" respectively, without any file extension definitions.
this code change solves the problem and works as expected change line 2522 in fileupload.php replace to
$accept = !empty($fileTypes) && !in_array($device_capture,array(1,2,3,4,5,6)) ? ' accept="' . $fileTypes . '" ' : ' ';
Would someone be so kind as to commit this for me so everyone can benefit from it, as I have not setup a github account to do pull requests yet. I plan to do this as I work a lot with fabrik.
Now we can capture photos directly from the mobile camera, without the risk of the user loading photos instead.
Thanks
Paul
PS: there is some confusion using capture = "camera", as this was actually intended for capture="user" and capture="environment" which allows you to select the forward facing or selfie option of the camera.
https://www.w3.org/TR/html-media-capture/#the-capture-attribute
Here is a good example of all the possible permutations using the "capture" option
https://addpipe.com/html-media-capture-demo/
I then started looking at making my own element plugin using the getUserMedia option. In my research I discovered the image/audio/video option coupled to <input type="file"> using accept="" and capture="camera"
So back to the file upload element I discovered there was a logic error in the code, that prevented the file input from using the "Image Camera" option that is available in the dropdown list.
the logic error in question is line 2522 in fileupload.php
$accept = !empty($fileTypes) ? ' accept="' . $fileTypes . '" ' : ' ';
will always return accept = ".jpg,.png, etc etc" irrespective if $device_capture = 1 to 6 have been selected, so altho the capture = "camera" proptery is correctlys etup, the accept = "" will always have file extensions.
Consequently when the camera fires up it sees there are extensions setup so it assumes you want to load images as well.
for camera, audo and video only options, the accept property needs to be accept="image/*",accept="audio/*", accept="video/*" respectively, without any file extension definitions.
this code change solves the problem and works as expected change line 2522 in fileupload.php replace to
$accept = !empty($fileTypes) && !in_array($device_capture,array(1,2,3,4,5,6)) ? ' accept="' . $fileTypes . '" ' : ' ';
Would someone be so kind as to commit this for me so everyone can benefit from it, as I have not setup a github account to do pull requests yet. I plan to do this as I work a lot with fabrik.
Now we can capture photos directly from the mobile camera, without the risk of the user loading photos instead.
Thanks
Paul
PS: there is some confusion using capture = "camera", as this was actually intended for capture="user" and capture="environment" which allows you to select the forward facing or selfie option of the camera.
https://www.w3.org/TR/html-media-capture/#the-capture-attribute
Here is a good example of all the possible permutations using the "capture" option
https://addpipe.com/html-media-capture-demo/