Cannot select PDF files in Chrome iOS using Dropbox - ios
I have an issue using Wordpress's Media Manager whilst using iOS Chrome browser. It won't allow me to select any PDF files. It works fine in Safari but was wondering if there is any restrictions on Chrome, Dropbox or iOS which is stopping a user from selecting it.
I have checked that all the correct "accepted types" are correct. I'm sure it's not that. (Wordpress has added .pdf and application/pdf to type="file")
Code:
iOS Chrome (59.0.3071.102) This is the exact code for our File Input:
<input id="html5_1bka" type="file" multiple="" accept="image/jpeg,.jpg,.jpeg,.jpe,image/gif,.gif,image/png,.png,image/bmp,.bmp,image/tiff,.tiff,.tif,.ico,.asf,.asx,video/x-ms-wmv,.wmv,.wmx,.wm,video/avi,.avi,.divx,video/x-flv,.flv,video/quicktime,.mov,.qt,video/mpeg,.mpeg,.mpg,.mpe,video/mp4,.mp4,video/x-m4v,.m4v,video/ogg,.ogv,video/webm,.webm,video/x-matroska,.mkv,video/3gpp,.3gp,.3gpp,video/3gpp2,.3g2,.3gp2,text/plain,.txt,.asc,.c,.cc,.h,.srt,text/csv,.csv,.tsv,.ics,.rtx,text/css,.css,text/html,.htm,.html,.vtt,.dfxp,audio/mpeg,.mp3,audio/x-m4a,.m4a,.m4b,.ra,.ram,audio/x-wav,.wav,audio/ogg,.ogg,.oga,.mid,.midi,audio/x-ms-wma,.wma,.wax,.mka,text/rtf,.rtf,application/x-javascript,.js,application/pdf,.pdf,.class,.tar,application/zip,.zip,.gz,.gzip,.rar,.7z,image/photoshop,.psd,.xcf,application/msword,.doc,application/vnd.ms-powerpoint,.pot,.pps,.ppt,.wri,.xla,application/vnd.ms-excel,.xls,.xlt,.xlw,.mdb,.mpp,application/vnd.openxmlformats-officedocument.wordprocessingml.document,.docx,.docm,application/vnd.openxmlformats-officedocument.wordprocessingml.template,.dotx,.dotm,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,.xlsx,.xlsm,.xlsb,.xltx,.xltm,.xlam,application/vnd.openxmlformats-officedocument.presentationml.presentation,.pptx,.pptm,application/vnd.openxmlformats-officedocument.presentationml.slideshow,.ppsx,.ppsm,application/vnd.openxmlformats-officedocument.presentationml.template,.potx,.potm,.ppam,.sldx,.sldm,.onetoc,.onetoc2,.onetmp,.onepkg,.oxps,.xps,.odt,.odp,.ods,.odg,.odc,.odb,.odf,.wp,.wpd,.key,.numbers,.pages,.bz2,.jpeg,.jpg,.mp4,.onetoc,.ppt,.tgz,.txz,.txt,.wpd,.xz,.jpe">
Screen shots:
I've seen another site working and looking at the code I could see that they didn't specify an "accept" attribute. I remove it and tested. It still doesn't allow PDF selection. Totally stumped.
Try removing all the file types in the accept attribute. Removing the entire attribute altogether didn't work for me.
Your input html should now look like:
<input id="html5_1bka" type="file" multiple="" accept="">
In order to fix this in Wordpress you might have to write a bit of custom JS to listen for wp.media, open event
How to Trigger some JavaScript when Media Popup is opened?
Related
Launching an application from a browser using HTML?
I have been asked by our iPad Admin. to create a link on our intranet that will open the application Filebrowser on student's iPads. Is there a way to code this in HTML or HTML5? No icon needed, just a link to open from browser (Safari) on the iPad. I'm a novice coder, really a front-end designer who often has to find ways to code something so any help is greatly appreciated.
Generally no. See: How to run an external program, e.g. notepad, using hyperlink? That being said, you can open a "file browser" when you click on an <input type="file" /> form tag, to browse and select a file for upload, but I gather that is not what you want. You can also create a link to a local file, but you'll run into permissions issues. See: How can I create a link to a local file on a locally-run web page?
How to stop automatic download on IE 11 while using iframe
I have given a source in a Iframe tag, my is issue is that when the page loads on IE the download begins automatically and it generally happens on IE installed on windows 8. <div> <iframe src="../../Images/Sample.pdf" width="800px" height="800px" ></iframe> </div>
It's downloaded probably because there is not Adobe Reader plug-in installed. In this case IE (it doesn't matter which version) doesn't know how to render it and it'll simply download file (Chrome, for example, has its own embedded PDF renderer). That said. is not best way to display a PDF (do not forget compatibility with mobile browsers, for example Safari). Some browsers will always open that file inside an external application (or in another browser window). Best and most compatible way I found is a little bit tricky but works on all browsers I tried (even pretty outdated): Keep your but do not display a PDF inside it, it'll be filled with an HTML page that consists of an tag. Create an HTML wrapping page for your PDF, it should look like this: <html> <body> <object data="your_url_to_pdf" type="application/pdf"> <embed src="your_url_to_pdf" type="application/pdf" /> </object> </body> </html> Of course you still need the appropriate plug-in installed in the browser. Also take a look to this post if you need to support Safari on mobile devices. 1st. Why nesting inside ? You'll find answer here on SO. Instead of nested tag you may even provide a custom message for your users (or a built-in viewer, see next paragraph). 2nd. Why an HTML page? So you can provide a fallback if PDF viewer isn't supported. Internal viewer, plain HTML error messages/options and so on... It's tricky to check PDF support so you may provide an alternate viewer for your customers, take a look to PDF.JS project, it's pretty good but rendering quality - for desktop browsers - isn't as good as a native PDF renderer (I didn't see any difference in mobile browsers because of screen size, I suppose). See also: HTML embedded PDF iframe
JQuery Mobile Problems With Input Type File
So I want to use a document upload element in a web form using JQuery Mobile. Every mobile platform in my testing environment allows it, (only small additional styling is allowed but some none the less) until I come to IE and IE Mobile. It is all scew-whiff in both and doesn't function at all in IE Mobile. Am I missing some secret documentation or am I being stupid expecting IE to behave like others... I am going to guess that yet again, they are laughing in the face of conformity. Thank you for any input and advice. In regards to code, I am not using anything fancier then: <input name="exampleName" class="exampleClass" id="exampleDocument" type="file" size="250" value=""/> <!--and Jquery Mobile changes the class name to input ui-input-text ui-body-a-->
IE for Windows Phone 7/8 as like iOS 5 and lower don't support file upload from web browser. File Upload Support
Chrome extension: empty URL bar on created tabs
Currently, I'm working on an extension for Chrome, which is great fun so far, but now I encountered a little problem.
Generally, tabs that contain a file of the plugin have an empty URL bar (I'm using Chrome 13.xx), like shown in this screenshot:
This tab was created by the following code:
chrome.tabs.create({
url: chrome.extension.getURL('../relative/path/to/a/file.html')
}, function(newTab){
...
});
It would be nice to have the URL visible, so it can be shared with other people who have the same extension installed (the URL has a unique ID for the extension, if I'm not mistaken)
I don't believe it's possible for the time being. See issue 72021 for Chromium: http://code.google.com/p/chromium/issues/detail?id=72021 You might just want to include the URL somewhere on the page and make it easy to copy for users (e.g. an <input type="text"> box wouldn't be much more intrusive than the URL bar itself).
Opening my JQTouch Iphone WebApp for the home icon, why every external link open in another safari window?
Using the JQTouch library, usely links like the following ... should open the new page in the SAME window. That works fine when I go to the site using Safari BUT when I launch the site from the home saved icon, it opens a fullscreen site and on the first link it opens a NEW Safari window. How can I make it stay in the same original fullscreen window?
You have to set the target to _webapp. E.g: <li class="arrow">Some Page</li> and then it will load on the same page.
You need to look into manifest files. The manifest file declares what files (html, javascript, css, jpgs etc.) that the iPhone should cache in order to make a webapp work offline. A part of the manifest file is used to declare which URLs are OK to use when in full screen (webapp) mode. Specifically look at NETWORK in manifest files. Example: NETWORK: * This should allow access to any URL you like, and stay in webapp mode. Alternatively use target="_self" - I haven't seen target="_webapp" anywhere. /Mogens
One solution I found here is to change the way you write your links for a mobile app. Rather than a href='link.url' you'd write a href="javascript.window.location.href='link.url'" Dislaimer: I haven't personally tried this yet, so I can't guarantee it will work. But logically, it does make sense.
Using target="_webapp" works only if you remove the rel="external", you cannot have both.