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.
Related
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".
I am taking a photo with the user's native camera application via HTML, like so:
<input
type="file"
accept="image/*"
capture="camera" />
This opens the user's native camera application and gives a reject/confirm dialogue, which fits our use case perfectly.
Firstly and most importantly - can we force the flash using this or any other method?
Also, it would be nice to force the rear camera, but this is not necessary.
Thanks!
I think the first comment is correct, but by using a client-side image EXIF data library it seems that we can accept/reject photos based on flash fired.
Up until about a couple weeks ago, my web app was working great on desktop and mobile, using dropzone.js as a drag and drop means of uploading images. Now suddenly on my Android device things have changed.
When it was working:
Member hit the upload button and was prompted to select which app to use to select the images for upload. Typically default app was "Gallery" which doesn't allow for multiple selections, but when Google Photos was selected, multiple images could be selected and all images selected would upload. With a tool tip I was able to advise users on Android to use Google Photos vice Gallery.
Now
Same scenario, including being able to select multiple images to upload. However, when the "Done" button is pressed to initiate the upload, only the first image selected uploads.
Multiple uploads work as expected on desktop and iOS but for whatever reason something has changed with Android and/or Google Photos that for the life of me I can't figure out.
fiddle
For those of you willing to take the time to help out, please try it on both your desk top and Android device to see the difference in behavior.
Also note that the .js included with the fiddle is for reference only and is being driven by the same file externally.
Please note the above fiddle doesn't actually upload the images anywhere, but it is the exact behavior I am having issues with. The upload part of the script and db management is separate from this issue.
The actual structure when all located together is to have the following script:
<script src="js/dropzone.js"></script>
Thanks
Here is what I tried
I've updated a bit the code.
https://jsfiddle.net/_jserodio/dgq50zc3/10/
Here is what I tested
In Android 5.0 it works with Google Chrome.
But It didn't work with Firefox and/or Lightning browser.
It's not supported for Android 4.x and bellow
http://caniuse.com/#feat=input-file-multiple
For the mobile website of a project I need to add a image-uploading button which does allow the access of the Iphone camera.
For example, the user does have his own profile and wants to add an avatar to that, he should have the possibility to make a photo, which is directly uploading to a database. Ive found some scripts where it is possible to access the photo-gallery, but i want to access the camera, which automatically uploads the picture...
Take a picture and upload
something like that!
Any help is much appreciated,
Greets
If you have iOS 6 or greater you can use the
<input type="file" accept="image/*" capture="camera">
For iOS < 6, you can always implement an image picker yourself and then inject the captured image data into the html as base64 encoded data.
Take the picture, base 64 encode your captured image data, then,
with jQuery, it should be quite simple:
[self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:#"$('#imagePlaceholder').attr('src','data:image/png;base64,%#');", base64ImageDataString]];
I used input tag with file="type" option to capture photo in my HTML5 mobile webpage. In some devices web page crashes because of memory issue when the photo is captured(Where camera is > 12MP). Is there any way that I can control image resolution/quality while using camera from HTML5?
Current tag:
<input id="ext-element-175" type="file" name="file" accept="image/*" capture="camera">
Is there any alternative other than input tag to access camera from HTML5 page for mobile web app and has more options to have control on camera?
There is no way to specify the desired resolution when using HTML Media Capture to capture an image from the device cameras.
The latest W3C recommendation spec for HTML Media Capture does not require such options.
You can, however, suggest such an addition to the spec, to be considered for a possible next version of the specification, by submitting an issue on GitHub at https://github.com/w3c/html-media-capture/issues. This was suggested to me by Anssi from Intel - one of the spec editors - after contacting him about a similar issue.
From my experience some Android devices do offer a way, at the OS level, to choose the resolution when recording video (accept="video/*"). Such devices might also offer such options when capturing photos.
The current Android device I have access to right now (Lenovo P2) does not offer such OS level options (only flash and switch camera):
That being said your code is not in line with the spec. You should use capture or capture=capture, not capture="camera". See Correct Syntax for HTML Media Capture for more details.
Use <input type="hidden" name="MAX_FILE_SIZE" value="4000000" /> It wont upload if file is bigger than 4mb.