formio.js icon indicating copy to clipboard operation
formio.js copied to clipboard

Add capture option to file fields

Open bmcbride opened this issue 3 years ago • 3 comments

This adds a new capture option to file fields, which allows a mobile device to open the camera or microphone directly in capture mode. This offers more flexibility over the current webcam setting as it lets the user configure which device to launch (camera, video, microphone- based on filePattern) and specify front or rear device, on supported platforms (iOS). Capture can be used alongside webcam and is ignored on desktop.

While working on this, I also tried to tidy up the file input a bit, removing the "Drop files to attach" label on mobile and adding some icons to the link buttons.

Example Configurations

Launch rear-facing camera

{
  type: "file",
  label: "My Photos",
  key: "photos",
  storage: "base64",
  image: true,
  capture: "environment",
  filePattern: "image/*",
  multiple: true,
  imageSize: "250"
}

Launch front-facing video camera

{
  type: "file",
  label: "My Videos",
  key: "videos",
  storage: "base64",
  capture: "user",
  filePattern: "video/*",
  multiple: true,
  imageSize: "250"
}

Launch microphone

{
  type: "file",
  label: "My Audio",
  key: "audio",
  storage: "base64",
  capture: "environment",
  filePattern: "audio/*",
  multiple: true,
  imageSize: "250"
}

image

bmcbride avatar Oct 15 '21 22:10 bmcbride

This is great! Thank you for your contribution. This will most likely get pulled into the 4.15.x versions.

travist avatar Oct 19 '21 13:10 travist

Awesome, thanks! Let me know if I'm missing anything with this PR.

bmcbride avatar Oct 19 '21 14:10 bmcbride

Will we have a chance to see this PR merged in 5.x.x ? Looking for this feature for resolving the issue: when we are taking picture from a mobile, we cannot switch from front camera (selfie) to back camera, on Android.

kamel-msaoubi avatar Sep 07 '22 08:09 kamel-msaoubi

This is getting pulled into the 5.x branch. Great feature!

travist avatar Jul 26 '23 14:07 travist