This is regarding iOS6's ability to handle <input type="file" />.
When you ask for a single file:
<input type="file" accept="image/*,video/*">
http://jsfiddle.net/CJSU6/1/
https://www.dropbox.com/s/d18kcin8eyypjd3/2013-03-13%2010.40.22.png
But when you ask for multiple files, the user is directly sent to the gallery
<input type="file" accept="image/*,video/*" multiple="multiple">
http://jsfiddle.net/CJSU6/0/
https://www.dropbox.com/s/b3uugzweoeqbtlc/2013-03-13%2010.39.58.png
Is there no way to access the camera if you ask for multiple files?
iOS 9+ Update: When focusing an <input type="file" /> in iOS 9, the user is allowed to choose whether to take a picture or choose a picture from the Photo library. This functionality is consistent even when specifying the multiple attribute.
Thanks Voodoo for the heads up comment!
The reason that the camera is not available on multiselect uploads is because iOS is designed to allow "selecting multiple pictures" or "take one picture and select it".
Historically, the "Take picture" choice has always allowed the user to take a temporary picture to memory, and that single picture is provided to the application, without permitting selecting additional saved pictures. In fact, that temporary picture taken on the spot is not saved to the Camera Roll.
The only way around that when using HTML is to instruct the user to take multiple pictures ahead of time, and then upload them altogether.
You can see a similar situation in the Messages (former SMS) App, where you are given the same choices. Selecting to take a picture, will let you take one and that one is immediately placed to be sent. The fact that it is an App allows you to keep on adding by subsequently pressing the picture button. This, however, isn't the case for HTML input fields.
PS. I recall this being the case as far back as iOS 4.
As a last resort, you could create your own "simple" iOS App that allows the user to either select pictures, or take and upload simultaneously.
Related
In my shopify store I make custom arts based on customer's image. I need to add an image uploader where user selects the image and when they hit continue I should take them to checkout. I am using the debut theme. How can I make this happen?
You can add additional details to a product by including an input field with a name of properties[some-property-name], and this also works for input fields with a type of file.
For example, you could add the following to your product form to create an image upload field. (Note: Make sure your form has enctype="multipart/form-data" set so that browsers submit the form correctly)
<input type="file" name="properties[Uploaded Image]" class="custom-upload" />
The resulting file will be uploaded to Shopify and will be accessible to you through the order in the Shopify admin. Your customers will be bound by whatever limits Shopify enforces regarding file sizes, which from a quick Google search looks to be set at 20MB currently.
NB: If your theme uses Javascript to submit your product form, it may or may not be compatible with file inputs out-of-the-box. Many simple stay-on-page features assume that all of the form data can be treated as text, so would ignore your file field. Here's an answer to a similar question where I tried to provide some ideas on how you could get around this problem: https://stackoverflow.com/a/58271610/2592369
I have a form that allows the user to upload several images to a server. This form also allows the user to edit the form as well depending upon qs parameters. As additional information, I am using redux-saga with react, just to provide more background.
I am able to upload the image and allow the user to preview the image after they make their selection and before they upload it. However, upon reviewing the documentation, I do not see a way to populate the react-dropzone field when the user edits the other form items. I saw a way to do a preview onDrop but not with data coming from the server. I also found this article on Stackoverflow because am not sure if it could be applied to my case within the redux-saga scenario: How to add the URL of an image already uploaded, to Dropzone?.
Can this be done and if so how can it be achieved?
https://electronics2electrical.com I have this site I want to add a camera function to it so user can take and upload the images directly on Answers like handwritten notes or mathematical problems photo etc. how can I add this camera function for mobile users .
Basically, camera upload is simple file upload (like any other) so it should work with simple
<input type="file" name="upload" />
However, in HTML5 there is support for directly opening camera to take a photo instead of choosing from gallery using something like
<input type="file" accept="image/*" id="capture" capture="camera">
You can test different modes of operation using these pages:
https://anssiko.github.io/html-media-capture/
https://mobilehtml5.org/ts/?id=23
Is this what you needed?
BigCommerce allows for product options that a user can upload a file to attach to an order (think a business card printer needs art files uploaded to the order)
Once a user selects all the options, and clicks add to cart, the page uploads the selected file along with the order details and takes you to the shopping cart. The time it takes for it to load depends on the weight of the files being uploaded.
Does anyone have a solution for having a visual tool for while a file is uploading, a percentage (either bar, or numbers) can be shown (or simply a "uploading images" overlay). People who are not familiar with the site think the page has frozen - they only realize when they let it upload - sometimes files can take up to 30 seconds to upload.
Im fairly proficient at CSS and HTML5 - if there are any solutions, please advise.
Thanks!
-Sebastian
In this case, you'd need to add HTML and CSS to create and style the loading bar. For the actual function of checking the upload status and displaying the progress, I'd suggest using jQuery with form plugin (uploadProgress function).
The necessary steps required to accomplish this will be a bit different in Bigcommerce than you'd see in this blog post, but it is explains it in a bit more depth with examples
I'm building a website with very small amounts of Javascript, just to add things to the page (like a contact form) without having to go to a new page.
I understand that I should build the contact page anyways (just in case the user doesn't have javascript turned on) and then use javascript if they've got it.
So where do I store the HTML for the form if I don't want to have it in two places?
(Normally I'm not so picky, but I'm curious on this one.)
If you have access to a server-side language, you can keep a separate snippet of the form in an external page. Then, you can include the snippet into the HTML content page with an appropriate include call. This has the added benefit that, for your JavaScript, you can pull the contact form from this snippet file using AJAX. In fact, many plugins allow you to display DHTML windows with HTML content. For example, check out ThickBox.
Without a server-side language, you can do something similar with frames. Just display the form snippet in a frame when you need to reference it. Personally, I don't like frames very much, so this isn't a very attractive solution for me, but you can use it if you choose (and style the frames appropriately).
Just put your HTML for the contact form in a .html file. Assuming you're using PHP or something, just include the file in your contact page and include it in the section for your dynamic contact form. The form should still submit to the same server-side page and have the same look and feel..
e.g. contactForm.html
<div class="contact-form">
<input ....>
</div>