Upload multiple camera photos with html input - html

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.

Related

Cast an entire webpage to tv?

I need to cast an entire webpage (which includes images, videos, iframes and carousels) to a chromecast enabled TV.
Once loaded, the webpage is auto scroll enabled and hence keeps showing few images, videos and iframes (think of it like a looped slideshow).
I know there's an option in the chrome browser itself to cast a tab/entire desktop, but it would require my laptop/computer screen to be open all the time.
I also came across chromecast for web app docs: https://developers.google.com/cast/docs/chrome_sender/integrate , but as far as I can figure out, it will help only to cast videos but not iframes/carousels embedded in my website.
Any suggestions how to achieve this? The requirement is to show an advertisement kind of data to the TV in every 3 hours. All this cannot be automated fully I guess?
Yes, you can do this. You just need to create a custom receiver app, which is basically just an HTML page that implements the cast receiver framework javascript. https://developers.google.com/cast/docs/caf_receiver/basic

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.....

Show only valid actions on file input click on mobile devices

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.

Cast a website to TV from Android app - Chromecast; is it possible?

This is what I want to do.
Have a screen on my Android app with a few buttons on it. One of them would be the Chromecast icon, the other buttons would just be a few numbers most like (a "1" button, a "2" button, a "3" button etc).
When the cast button is hit, a default website is loaded (eg. www.example.com) on the TV. In the Android app, I still just see my buttons.
When a number his hit (ie. "1") the website changes, and www.example.com/parameter/1 is loaded for example.
I have been reading Google's documentation. If I understand correctly, I can create Android sender app code to do part 1 and 2. And a receiver application for part 3.
What I am confused about though is how I just get it to load a preexisting website. Surely I wouldn't need any custom HTML5 code for that? All I want to do is load a URL.
Could someone please advise me if what I want to do is possible, and if so point me in the right direction? Thanks
The default receiver only loads media URLs. Video, images, etc. If you want it to do anything else, like show a website, you need to create a custom receiver.
Luckily, that's rather easy, and they have some good samples on the Github account.
https://github.com/googlecast

Can I run different versions of my website based on detection of mode

I would like to create one website. This website will have behave differently if I am viewing it at a specific event via a kiosk. The kiosk, will just be an iPad. I believe I can figure out how to lock down the iPad to act like a kiosk and just show my website based on this http://www.webascender.com/Blog/ID/447/How-to-Setup-Kiosk-Mode-Lock-Your-iPad-to-Just-One-App#.U9Fx3oBdVX4
But what I am asking is, in code, is there a way to detect that I am in 'kiosk' mode and show different pages? For example, if you are at home(or anywhere that is NOT the event) you should be able to hit my website to find out all about my company and to view your existing profile. You should be able to see these same pages on the 'kiosk'(the iPad while at an event) but you will now see additional pages such as pages dealing with the specific event and payment pages. Vice-versa you might be able to see additional pages on the website while at home that you will not see while in 'kiosk' mode.
I do not know if the solution is tools/language dependent as we have not settled yet on all tools/languages/frameworks we will be using to build the site and so I am open to all but we will definitely have some javascript/css/html.
I believe you will need to write a native app in order to detect whether you are in 'guided access' aka 'kiosk' mode.
Taken from Detect or react to Guided Access?
NSLog(#"Accessabilitiy enabled: %#", UIAccessibilityIsGuidedAccessEnabled() ? #"YES" : #"NO");
if (!UIAccessibilityIsGuidedAccessEnabled()) {
// show something since I'm not in guided access
}
If you want to know when it changes...
[[NSNotificationCenter defaultCenter] addObserver:self selector:#selector(guidedAccessChanged) name:UIAccessibilityGuidedAccessStatusDidChangeNotification object:nil];
- (void)guidedAccessChanged
{
// do something when guided access changes
}
If you must work with a website then what you can do is write a native app that embeds a UIWebView. This class allows you to show websites within a native app. So, what you could do with this method is pass along the guided access setting to your website so that it can adjust itself accordingly.
If you know the IP address you can direct views using PHP (and probably a host of other programs). Or you can lock the iPad to only open a specific URL (http://mysubdomain.mydomain.com) and only have pages that you want viewed by the kiosk. I'm sure there are a mess of other ways too.