Show only valid actions on file input click on mobile devices - html

I have a input type=file and I want when user click on it to show only valid actions for documents. I don't want pictures or videos.
My file tag is:
<input type="file" name="file" accept=".doc,.docx,.pdf,.txt,.odt,.wps"/>
With this configuration when user click on it on ios safari will display a menu with:
Take a Photo or Video
Photo Library
iCloud
More
and on Android devices will show something like this:
Camera
Camcorder
Documents
Voice Recorder
other, depends what's installed on device.
What I want is to have on iOS only the options iCloud and More and on Android only Documents or other where you can find documents. I want to exclude to take a picture/video or to choose from photo library.
Is this possible?

No. You can dictate what kind of document you're willing to accept, but you cannot dictate what the file upload box actually looks like on a particular browser/OS.
Clearly it would be sensible for the browser not to show "Camera" or "Take a Photo" when the photo produced in that manner wouldn't ultimately be accepted, but that level of intelligence just isn't baked in... yet.

Related

Upload multiple camera photos with html input

I have a web application with an upload form.
<input type="file" name="c_files[]" id="c_files" multiple="multiple" />
I can select and upload mutliple files from the gallery but can't make multiple photos from the camera app. Taking the photos first and then uploading them from the gallery is not a good way to go.
I'm using Google Chrome Version 92.0.4515.159 on Android 11.
Firefox for Android and Safari on iOS isn't working either.
Apparently I have to use javascript right or is their an exisiting work around?
There is no such thing as "Out of the Box" that will solve your problem or your scenario, and the truth is that not HTML have at least one way to get there.
But... we have javascript I can think of something that is not exactly what you are looking for but it would be the way to perform this feat:
detect that you are on a mobile device.
allow that if you are on a mobile device when you click on the file field, you directly invoke the camera APP and take multiple photos.
when returning to the form detect the event and make the programmatic trigger of the multiple input type file, but directly open the image gallery...
select multiple images to attach.
As you can see, this is a concept/solution based on the capabilities that we know the mobile environment and the javascript language have. regardless of HTML.
To achieve this you must get each point mentioned above to work.

Html 5 Input accept Video Capture or Video Upload

Using HTML 5 it is now possible to use video capture on an input like so:
<input type="file" accept="video/*" capture="camcorder"/>
The OS of the mobile device drops into the recorder immediately and allows video capture.
The problem is, on most mobile devices it doesn't give you an option to use an existing video file.
However, I'm looking for a way to give the user a choice: Either Capture New Video or Upload an Existing Video.
I believe one solution would be to make 2 inputs (one for live capture and the other for a file upload) and then prompt the user for which one they desire.
My question is:
Is there additional information I can put on a SINGLE input that will allow the user (or tell the OS device) to allow capture or allow upload?
Something that might look like this:
<input type="file" accept="video/*" capture="camcorder;fileupload"/>
The above code is not functional just what I might believe to be a future solution.
It seems silly that most mobile OS's don't allow the user to select an existing file, since the end result is generally the same: The user is selecting a file on the system to upload.
they need to improve INPUT with better attributes....
if your on https you can do it in code....
You gain access to camera with the users permission....
Yet its open to anything.<--wrong way
The best way is by Input with good attributes no permission needed with code.
The Input provides the way to grant or not grant by the action at hand by the user...
Access to mic feed input... a bowser dialog
Camera take picture input jpg with size and quality...
Its the user doing it not your code.....

HTML file input on iOS - accept images and videos

I want to implement a HTML file input to let the user shoot a picture or a video. I define the allowed formats via accept attribute:
<input type="file" id="sentFile" accept="image/*,video/*">
If I click on the input, iOS 9 shows me a modal, where I'm able to "Record picture or video". After clicking on that button, the camera app opens and I'm able to take a picture, but can't record a video.
If I define a single input with video only, f.e.:
<input type="file" id="sentFile" accept="video/*">
I'm able to record a video.
Why is the first one not working on iOS?
try this
accept="image/*;video/*;capture=camcorder"
Have you set the Privacy - Camera Usage Description in your ios application?
You need to add that permission if you want to take a photo in your application.

Cordova / Phonegap photo browser

I would like to create an application for iOS and Android that (among other things) allows the user to browse the device's photos and select some of them. Thus I would like to present the user with a list of directories containing photos and once a directory is opened, a gallery of the images is displayed.
My questions are:
1) Is there a standard way in Cordova to get a list of the "library" directories such as camera photos, facebook photos, viber photos, screenshots etc.?
2) Is there a way with Cordova to get a thumbnail of each image to display in the gallery (or even better take advantage of each OS' thumbnail caching system), since resizing the original images will run the application quickly out of resources?
Notes:
a) I know about the camera plugin, that has a nice native dialog to pick an image, but it only allows the user to pick one image.
b) I know about the image picker plugin, but it doesn't search in folders other than the camera's directory (i.e. no Facebook, Viber etc. directories).
c) I don't like a & b approaches. Instead I would prefer to display a gallery directly in my app rather than showing a dialog for this.

Is there a way to specify which camera input type='file' should use?

I am using
<input type="file" accept="image/*;capture=camera">
to get image input from the users camera. This is apparently the old way of doing it but that is what they want.
Is there any way to specify that the front (or back) camera should be used? The user would still be able to switch cameras if desired but the default camera would be set in html (maybe as an attribute?).
I only need this for Chrome on Android so cross-browser is not an issue.
The Media Capture docs say the user should be able to choose which camera but it says nothing about the developer:
Similarly, the user agent should allow the user:
-to select the exact media capture device to be used if there exists multiple devices of the same type (e.g. a front-facing camera in addition to a primary camera).
An official response from a Google developer on July 7 says that this is not yet possible: https://groups.google.com/d/msg/discuss-webrtc/i07T1X_DY94/fVE5_vYK6sAJ