HTML File Selector for ipad - javascript

Just wanted to open the camera (Take photo or video) option from ipad when clicking on button () which is currently giving me a popup with three option (Take photo or video, choose from library and browse)...didn't want to use cordova or any othe plugin.
Using Javascript with html and css. (Is it possible ?)
Have already tried cordova plugin and it worked but now required without any plugin.

I have use Cordova in the past and has never treated me well in this case for just accessing the camera I would try this:
<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camera">

Related

Disable camera option in mobile browser when uploading file by input tag

I am using a file type input. It should accept only images file formats. So I added the following input tag -
<input type="file" accept="image/*" multiple (change)="selectFiles($event)" />
This works as expected on desktop i.e. It shows only these files on file browser. But on android devices it prompts the user to select either file browser or camera. Since we need images only from storage how can we disable the camera option.
But is there any way to disable the camera option on mobile devices? I am looking for something opposite to capture="camera".

HTML input file capture=camera for multiple files

I'm trying to make a mobile web application (both for IOS and Android) that lets the user upload some pictures, either by choosing them from the library or by taking them with the device camera.
I'm using this input <input type="file" accept="image/*" capture="camera" multiple>. It works great, it opens the camera and it lets me choose to use the photo or to try again, but the multiple attribute doesn't work. I can only take one photo per time.
Am i missing something? Maybe the multiple attribute is not supported?
Just remove,
capture="camera"
then it will open on gallery directly and allow multiple selection.
I think it actually is impossible to take multiple pictures with the camera this way before uploading, and that it's only possible to upload multiples with the file browser.
You will need to use JavaScript and the MediaStream functionality, pretty much writing a quick camera app yourself. It works but there are a few pitfalls with how manufacturers report sensors etc.

target image folder on mobile (Android or IOS) when html input[type="file"] is clicked

i have this problem and can't figure out:
i have a simple input
<input type="file" id="mfile" name="file" class="input display-none optional_check" accept="image/jpg"/>
It works perfectly on desktop browsers but when i click it from a mobile device it opens a choiche between:
File system or Document folder
Camera
Video
Sounds
I would like to redirect the browse to the image folder of the mobile device like Facebook does.
Is it possible? Thank you!
EDIT 1:
putting accept="image/*" changed from (image/png,image/jpg,image/jpeg,image/gif) changed a little bit the situation avoiding choosing audio and video.
Now on Android 5.02 this is what i see:
while on Android 4.42 i see this:
What i want is getting the same choiches as android 4.4.2 in every device (IOS too).
Or if is possible doing like facebook wich goes straight to the images global folder.
It Seems to be a Android 5 Bug,anyone can help me?
Fiddle
Thanks!
Your "accept" value is wrong. Try to use "image/*":
<input type="file" id="mfile" name="file" class="input display-none optional_check" accept="image/*"/>
Now it should work.

HTML5 mobile camera capture doesn't work on server side

I'm using HTML5 capture in my application. The html page works fine and directly captures image using camera when i use following tag and store the HTML file in my mobile directly.
<input type="file" name="file" accept="image/*" capture>
But when i use the same code in my published version of website the pop up shows multiple options to upload the image file as shown below
I just want image to be directly uploaded from camera and restrict users to upload file from other locations. Please help.

Pop camera or video capture options from Android HTML5 based app used with Cordova

I have an android app I developed using the cordova framework using HTML5 for the interface. I have a form with a file input tag used to grab photos or videos from the device. In the Ios version, clicking this button pops a dialogue where you can select to capture a pic or video, which is then used by the app.
However, in the android version, the file browser dialogue pops with no options to capture direct. This is my problem. I want to be able to have the pic and video capture options displayed.
I subsequently use uploadifive to send some text and the selected media(video or pic) to a server.
When I do this from the web version of this form, using the android browser, both video and picture capture options appear and work great.
In the app I have tried using the capture options in the file input tag as follows:
<input type="file" name="image" id="image" accept="image/*; capture=camera" />
But this is not working either.
You will have to use cordova's capture event for camera to work. Check cordova documentation.

Categories