The Problem
I've built an HTML web form for the purpose of uploading files. When accessed from an iOS device, non-image files (.pdf, .docx, etc.) appear greyed-out when the "Browse" button is chosen to select a file from the iOS file explorer.
I have a fully-featured page (HTML, CSS, JS, PHP), but I've stripped the whole page down to the simplest form element to test functionality. Here's an example of code that does not work on my server (this is all that's in the HTML file besides the boilerplate tags), when viewed on a device running iOS 12.3:
<form action="" enctype="multipart/form-data" method="post">
<input type="file" accept="image/*, .heic, .hevc, .heif, .pdf, .png, .gif, .jpg, .jpeg, .doc, .docx, image/png, image/jpg, image/jpeg, image/gif, application/msword, application/pdf" multiple>
</form>
You can see a similarly simple working example of non-image files being selectable from an iOS device with one of the W3School's "Try It" editors:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_file
What I've Tried
SSL (extended validation)
Apple technical support (referred to Apple Developer website after a couple hours on the phone)
Multiple browsers (iOS Safari, iOS Chrome, iOS Google App)
Multiple Apple devices (works on Mac, fails on iPhone and iPad)
Competitive platforms (works on Android)
iOS 13 beta (works)
The Question
Something is causing W3School's and other sites' servers to behave differently than mine when working with forms on iOS.
What is the factor on iOS that determines which sites/forms are able to select non-image files for an upload?
You must remove image/* and the other image/ file types.
<form action="" enctype="multipart/form-data" method="post">
<input type="file" accept=".heic, .hevc, .heif, .pdf, .png, .gif, .jpg, .jpeg, .doc, .docx, application/msword, application/pdf" multiple>
</form>
Here is a sample of your code with my corrections:
https://codepen.io/VladimirButakov/pen/XvXxGq?&editable=true
I made a web page that can get pdf files and send them to chats over a telegram bot.
I opened the web page from my Iphone and just selected a pdf and sended it and it worked just fine.
The code I used for the input file is the following.
<form action="inviapdf.php" enctype="multipart/form-data" method="post" class="inputfile">
<input accept=".png, .jpg, .jpeg" class="bott" type="file" name="pdf"/>
<button>SendPDF</button>
</form>
I have an Iphone 7+ with latest IOS release.
If I didn't answer your question can you be a bit more specific about it?
thanks
Related
I am facing problem with HTML code, which when opened in the mobile web browser has one input type file that opens the mobile back camera, i need to force open front facing camera. My code is as below. I know user can switch camera mode when camera is opened but i want to open by default front facing camera. Any help will be appreciated. Thanks.
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="image" accept="image/*" capture="user" />
<input type="submit" value="Upload">
</form>
I tried your code above mentioned.
It was working for me when I opened from mobile browsers.
But I think it won't work on desktop.
https://developers.google.com/web/fundamentals/media/capturing-images
<input type="file" accept="image/*" capture>
<input type="file" accept="image/*" capture="user">
<input type="file" accept="image/*" capture="environment">
Adding the capture attribute without a value let's the browser decide which camera to use, while the "user" and "environment" values tell the browser to prefer the front and rear cameras, respectively.
The capture attribute works on Android and iOS, but is ignored on desktop.
I want to open mobile camera when I clicked a button from browser. Below there is an image what i want to do.
This is an image what i have now
I can choose file from local and also want to add from camera.
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="uploadedfile" accept="image/*" capture="camera">
<input type="submit" value="Upload">
</form>
I tried above code for opening camera and it is from How to access a mobile's camera from a web app? .
Now please help me to show camera on mobile through Browser.
With an input[type="file"] field you can pick a file, or ask the device to record a media. It will always open an app or a prompt to choose an app. If you want to stay in the browser you need to use the MediaStream Recording API but it is not fully supported yet. For now, it is not working in iOS so either way, you have to open up the default camera app.
If you want to take photos you can try the MediaStream Image Capture API. But it is still just an experimental technology which won't work in most of the current browsers.
You can find some examples here:
Taking still photos with WebRTC - MDN
ImageCapture.takePhoto - MDN
Take Photos and Control Camera Settings - Google developers
Access the camera interactively - Google developers
I hope the links above can help you
I'm tasked with creating a 508 compliant form that includes a file upload function. It works just fine in any browser except for IE, but we need to support IE as well.
The problem is that the "Browse..." button on the file upload element won't open the file upload dialogue with the enter key. Instead, the enter key attempts to submit the form. The space key, however, opens the file upload dialogue just fine.
The code is super basic- a vanilla file upload element:
<form name="submitForm" action=....>
<fieldset>
<%---other stuff here---%>
<input type="file" name="..." id="..." tabindex="12"/>
</fieldset>
</form>
I have an html page with the following code.
<form method="POST" action="https://formspree.io/email">
<input type="submit" value="SEND"/>
</form>
My browser does not include the referrer header field in the http request when a user submits the form. Why wouldn't it ?
I fixed this by adding <meta name="referrer" content="origin"> to the <head> section of my HTML page.
You are testing your site by opening it in a browser as a static HTML file in your computer's filesystem. In this case its URL will not start with http:// or https://. This will not work, because browsers don't treat these pages as normal web resources and thus they do not automatically send the "Referer" header when you submit a form. Formspree requires that header to work. This can be solved if you just open your HTML files as a web resource from a local web server. If you're on Mac or Linux, just type python -m SimpleHTTPServer 8000 or your HTML files directory and visit http://localhost:8000 on your browser. If you're on Windows, try installing one of the following super simple web servers: Web server for Chrome, thttpd or Quickshare.
You are using an old Safari version, Safari mobile or some other browser that is not recent Chrome, Firefox or Edge. In this case you could have been a victim of an old HSTS policy we had on Formspree that didn't allow sites to post content to non-https versions of Formspree. In this case please change your form's action= attribute to https://formspree.io/.
First use the atributtes that formspree specify:
<form action="https://formspree.io/your#email.com"
method="POST">
<input type="text" name="name">
<input type="email" name="_replyto">
<input type="submit" value="Send">
</form>
and second: maybe you tried the form before in another site (like formspree site), so you'll have to reset it in the formspree site and then try it directly in your site, so you will have to confirm again.
Hope it works for you...
As statosdotcom commented, the issue happened because I was opening my webpage locally.
I have a basic form using <input type="file" multiple> to upload multiple files. It works fine when I'm developing (IIS Express) but when I publish the site to IIS, the multi-select only allows one file to be selected at a time. This behavior is consistent across all browsers and the page source at the browser is identical.
Is there a setting on IIS that could be causing this?
Here is the form code:
<form action="/Home/SubmitFiles" enctype="multipart/form-data" method="post" role="form">
<div class="form-group">
<label>Select one or more documents to convert:</label>
<input name="files" id="files" type="file" multiple>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Convert</button>
</div>
</form>
I have exactly the same problem. multiple is a html5 feature for input. After testing in IE10 with "IE7-Emulate" turned on, I've found an interesting thing: I turned proxy server off and multiple selecting suddenly start working with all browsers. First think was: "my proxy rewrites headers". I tried to modify popup page by adding . Multiselection started to work in IE10. There is no support for multiselection in IE7,8,9. If you want to use this versions of IE, you should try Flash or custom ActiveX controls.