I have to implement file upload feature in my phonegap project. User should be able to upload any type of file from the phone memory or sd card. The application screens I designed using jQuery Mobile framework. I tried input type="file", but it is not supported in android 4.4. I tried phonegap camera API too, but it is supported only media files. I found some cordova plugins (exm1,exm2 ). But these plugins using custom UI. I want to invoke native file browser for choosing the file & it has to work in both Android & iPhone platforms. Is there a way to implement the same?
I found cordova file chooser plugin (https://github.com/cdibened/filechooser) would be helpful for android platform, but I am unable to make it work. The success callback function is not immediately getting triggered after the file selection (tested with android 4.4.2). Please find my code below,
<input type="file" id="fileinput" name="fileinput"/>
$("#fileinput").bind('click',function(){
console.log("choose file selected");
filechooser.open( {}, fileChooseSuccess, fileChooseFailed );
});
function fileChooseSuccess(data) {
var filepath = data.filepath;
console.log("file path:"+filepath);
}
function fileChooseFailed(msg) {
console.log(msg);
}
I was able to get your plugin, FileChooser working.
There are certain things that have to be done though.
You need to open the following with your editor
FileChooser.java
FileChooserActivity.java
FileListAdapter.java
FileListFragment.java
LocalStorageProvider.java
and append
import your.package.name.R;
to each of those files.
Here is the demo code I used:
<html>
<head>
<title>Hello World</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", function(){
var success = function(data) {
alert("File chosen: " + data.filepath);
};
var error = function(msg) {
console.log( msg );
};
$('#fileinput').click(function(e) {
filechooser.open({}, success,error);
});
});
</script>
</head>
<body>
<input type="file" id="fileinput" name="fileinput"/>
</body>
</html>
Also, be aware that the author intended this to be used in KitKat 4.4.4. It may work with lower versions but he's uncertain.
Take note that the only difference between the HTML5 choice window and this is the "Internal Storage" option.
Hope this helps.
For android you can use this plugin:
https://github.com/cdibened/filechooser
input file should work on android too (on most of the versions, but it doesn't work on android 4.4, 4.4.1 and 4.4.2)
HTML file input in android webview (android 4.4, kitkat)
for iOS there is no plugin, you don't have a native file browser.
Sample project
https://github.com/jcesarmobile/FileBrowserAndroidTest
Related
We are using Webfont Loader to load google fonts. And inside the active callback of WebFont.load we load our main script and bootstrap angular.js application.
<script type="text/javascript">
WebFontConfig = {
google: {
families: ['Open Sans:400,700,700i,400i:latin-ext']
},
active: function() {
var mainScript = document.createElement('script');
mainScript.src = "/js/main.js";
mainScript.onload = function() {
angular.bootstrap(document, ['cob']);
}
document.body.appendChild(mainScript);
}
};
WebFont.load(WebFontConfig);
</script>
To make browser use default fonts until the google font file loaded, we set fonts for .wf-active class
html.wf-active {
font-family: 'Open Sans', sans-serif;
}
Inside angular run, we switch apploaded and clear screen from loaders and show the application.
angular.module('mymodule')
.run([function() {
$rootScope.appLoaded = true;
}
]);
html
<body>
<div class="app-loader" ng-hide="appLoaded">loading...</div>
<div class="page-container" ng-if="appLoaded">
application loaded. <button>GİRİŞ</button>
</div>
</body>
We see "loading..." until the font files loaded, then application bootstraps successfully.
But the button text is rendered as "G R " for a couple of seconds, after a while 'İ' and 'Ş' characters are loaded into screen and we see GİRİŞ on button.
I am sure the font file is loaded before application bootstraps, because the font doesn't change after the application is loaded.
May be irrelevant but, I got some image files on the page and foreign characters are rendered with the image files. So there is some kind of a wierd screen render latency.
We only have this issue on iOS application, I have tested it on iPhone 6 and 6s, and on xcode simulators.
This works as intended on browsers (safari, chrome and firefox) and on android application we create with the same cordova project.
After trying various preload methods, just as I was considering to give it up, I came accross to a fact here
most browsers download fonts when they're used in a page rather than
when they're declared in CSS.
It seems like latin-ext subset of the font is delayed until it is used inside the page.
I have solved the issue by putting a dummy character (İ) that will make it download latin-ext subset on load screen
Normally Dart is connected to HTML by means of this code:
<script type="application/dart" src="script.dart"></script>
<script src="packages/browser/dart.js"></script>
By running Build, IntellijIdea transforms the first line into <script src="script.dart.js"> and eliminates the second line, OK. But there are some problems to me:
After Build file has been created, my indentation is broken.
Google PageSpeed Insight test says "Too much http requests", or something like that.
I solved the problem this way. No Build file anymore, I use Dart2js + Terminal to create script.dart.js. As to the HTML code, I've written this little thing below instead.
<script type="application/dart" src="script.dart" id="dart-script"></script>
<script>
(function() {
if (navigator.userAgent.indexOf('(Dart)') === -1) {
var dartScript = document.querySelector('#dart-script');
dartScript.type = 'application/javascript';
dartScript.src = 'script.dart.js';
}
})();
</script>
It works very well. What do you think of it?
I haven't heard of any such problems with the Dart script tags.
Using the transformer of https://pub.dartlang.org/packages/dart_to_js_script_rewriter
removes the Dart script tag which is only required by browsers that support Dart directly, which is only Dartium, which is not supposed to be used to access the web (only for development purposes), therefore for deployment this script tag is irrelevant.
Dart plugin is the same in IntelliJ IDEA, WebStorm and other JetBrains' IDEs. And it doesn't do anything with your source code on build, it only calls pub build as if you ran it from command line (assume you are talking about 'Pub: build' action in context of pubspec.yaml file).
I'll stop here my delirium with this new polyvalent code of my own.
<script>
(function() {
var elem = document.createElement('script');
document.querySelector('body').appendChild(elem);
if (navigator.userAgent.indexOf('(Dart)') === -1) {
elem.type = 'application/javascript';
elem.src = 'script.dart.js';
}
else {
elem.type = 'application/dart';
elem.src = 'script.dart';
}
})();
</script>
Thank you for applause, that's all folks!
I am making a rails app where I want a fullscreen video in the background. Should I use html5 or .js to do this? If I'm going to use .js, is bigvideo.js any good even though there is no gem for it yet?
Add the jquery plugin Bigvideo.js to your JS folder.
require the plugin in your application.js file
call the plugin at the bottom of your <body> tag. This should prepare the page for the js, and then fire the function upon loading the page.
<script type="text/javascript">
$( document ).ready(function() {
$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show('http://wherevideoislocated.mp4');
});
});
</script>
I am using Xcode 4 with PhoneGap (Cordova 1.6) and ChildBrowser. I've used SiteCrawler on OSX to successfully download a website and localize it, and it is fully browsable locally with images, PDFs, etc. I have moved all the localized site files into the PhoneGap www folder and the app test builds fine - the site is fully browse able.
I want the PDFs on the site to open in their own window, and ChildBrowser does this perfectly as far as my needs. Using http://blog.digitalbackcountry.com/2012/03/installing-the-childbrowser-plugin-for-ios-with-phonegapcordova-1-5/ I was able to get ChildBrowser installed and working - I have PDF files opening in the ChildBrowser.
My problem is that using the link above, I have to add ontouchstart="loadChildBrowser('/path/to/file.pdf'); return false;" to every PDF link on the site. Since we use a CMS, this isn't much of a problem - the bulk of PDFs are called from a template with data filled in from the CMS and they are fine. But there are some pages in the site where the client has added a link to an uploaded PDF into the content of the page. In this case, there is no easy way to add the above code to the inline link.
I figured that I can use jQuery to look at each a tag on the page when clicked and if clicked, run the ChildBroswer instance, and this would cover both types of PDF links, but I can't seem to get it to work. Here is what I have:
<script type="text/javascript" src="/a/js/cordova-1.6.0.js"></script>
<script type="text/javascript" src="/a/js/ChildBrowser.js"></script>
<script>
// install ChildBrowser
var cb = ChildBrowser.install();
//loading a web page in ChildBrowser
$('a[href$=pdf]').click(function() {
var href = $(this).attr('href');
cb.showWebPage(encodeURI(href));
return false;
});
</script>
Using the above with no inline link javascript, the PDF opens on its own, without child browser.
Using the below along with ontouchstart="loadChildBrowser('/path/to/file.pdf'); return false;", child browser will open, and for some links shows the PDF, and for others just says loading. I figure this is just tweaking for paths, but I think the above would be most universal if it can be made to work.
<script type="text/javascript" src="/a/js/cordova-1.6.0.js"></script>
<script type="text/javascript" src="/a/js/ChildBrowser.js"></script>
<script>
// install ChildBrowser
var cb = ChildBrowser.install();
//loading a web page in ChildBrowser
function loadChildBrowser(file) {
cb.showWebPage(encodeURI(file));
}
</script>
Through trial and error I was able to get this working for the most part. I'm still hitting a couple of unrelated bugs (well, related to Childbrowser but not the loading go local PDF files).
So, using ontouchstart="loadChildBrowser('/path/to/file.pdf'); return false;" on all links to PDFs on the site is still the way to go. What changed was the JS function I am using to determine the path to the PDFs and launch ChildBrowser. I had to do this:
<script type="text/javascript" src="/a/js/cordova-1.6.0.js"></script>
<script type="text/javascript" src="/a/js/ChildBrowser.js"></script>
<script>
// install ChildBrowser
var cb = ChildBrowser.install();
//loading a web page in ChildBrowser
function loadChildBrowser(file) {
var path = location.pathname+file;
var len = path.length;
var locleft = path.indexOf('/www/')+4;
var trim = len-locleft;
var left = path.slice(0,-trim);
var locright = path.indexOf('/assets/');
var trim = len-locright;
var right = path.slice(-trim);
var finalPath = left+right;
cb.showWebPage(encodeURI(finalPath));
}
</script>
in my included header file (so it lives in the head of every page on the site). The problem was that when ChildBrowser pulled up the path to the file, it was appending the part below the normal site's web root (/assets/documents/xxx.pdf) to the full path to the page being viewed in the app at the time, so I ended up with:
/var/users/name/blah/blah/www/page.html/assets/documents/xxx.pdf
when we wanted:
/var/users/name/blah/blah/www/assets/documents/xxx.pdf
The script above prepends location.pathname to the file var passed from the function (ontouch start) that calls ChildBrowser so that we end up with
/var/users/name/blah/blah/www/page.html/assets/documents/xxx.pdf (not correct)
It then splits it into a left section (everything before /www) and a right section (everything including and after /assets/) and then concatenates them (effectively removing all the site directory and html file information) and then calls ChildBrowser with that finalPath. Working for me.
I'm using "Jquery UI 1./Dan Wellman/Packt Publishing" to learn JQuery UI. I'm working on the 'Dialog widget' chapiter.
After I've completed a series of exercises in order to build a Dialog widget (using Google Chrome), I then tried my work with Internet Explorer and Firefox.
The result has been disappointing.
Chrome was perfet
With Internet Explorer, (1) the title of the Dialog widget did not appear, (2) The location of the dialog widget was not correct (given the position: ["center", "center"]). It was rather offset toward left.
With Firefox, the location was respected. However, only the outer container was visible. the content was missing, just a blank container.
Also using Option Show:true and Hide:true did only work with Chrome.
I wonder now if JQuery UI was meant to be used only with Google Chrome. I just think that I might be missing some directives to make it work with major browsers (as the author claimed in his book).
Here's the code. Since, I'm using ASP.NET MVC, certain codes, such as the element to the css, do not appear. But, for the rest, all the functioning code is bellow.
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<p>
The goal of this tutorial is to explain one method of creating
model classes for an ASP.NET MVC application. In this tutorial,
you learn how to build model classes and perform database access
by taking advantage of Microsoft LINQ to SQL. In this tutorial,
we build a basic Movie database application. We start by creating
the Movie database application in the fastest and easiest way possible.
We perform all of our data access directly from our controller actions.
</p>
<div style = "font-size:.7em" id = "myDialog" title = "This is the title">
In this tutorial -- in order to illustrate how you can build model classes
-- we build a simple Movie database application.
The first step is to create a new database. Right-click the
App_Data folder in the Solution Explorer window and select the menu option
Add, New Item. Select the SQL Server Database template, give it the name
MoviesDB.mdf, and click the Add button (see Figure 1).
</div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent"
runat="server">
<script src="../../Content/development-bundle/jquery-1.3.2.js"
type="text/javascript"></script>
<script src="../../Content/development-bundle/ui/ui.core.js"
type="text/javascript"></script>
<script src="../../Content/development-bundle/ui/ui.dialog.js"
type="text/javascript"></script>
<script src="../../Content/development-bundle/ui/ui.draggable.js"
type="text/javascript"></script>
<script src="../../Content/development-bundle/ui/ui.resizable.js"
type="text/javascript"></script>
<script
src="../../Content/development-bundle/external/bgiframe/jquery.bgiframe.js"
type="text/javascript"></script>
<script type = "text/javascript">
$(function() {
var execute = function() { }
var cancel = function() { }
var dialogOpts = {
position: ["center", "center"],
title: '<a href="/Home/About">A link title!<a>',
modal: true,
minWidth: 500,
minHeight: 500,
buttons: {
"OK": execute,
"Cancel": cancel
},
show:true,
hide: true,
bgiframe:true
};
$("#myDialog").dialog(dialogOpts);
});
</script>
Thank for helping.
EDIT
I've re-done the same exercise yesterday. From the beginning to the end, each time I've introduced a behavior, I've tested my work in all 3 browsers (IE, Firefox, Chrome).
Everything works until I add option Show and Hide. Then only Chrome works.
If I remove Show and Hide, everything works again.
If I keep only Show and Hide, everything works perfectly
Maybe Show and Hide options for dialog widget do not mix up well with other options.
Thanks for helping.
No, jQuery UI works in any of those browsers. It's probably either the steps you're following don't work so well with the version you're using or the version you're using is old. I've used jQuery UI without issue on both browsers. If you don't believe me, then open this URL in your browser:
http://jqueryui.com/demos/dialog/
In Firefox 3.6, it loads just fine for me.
I'm not an expert on jQuery UI, but providing the code here might help.
jQuery supports all the major browsers however there are know issues with;
Firefox 1.0.x
Internet Explorer 1.0-5.x
Safari 1.0-2.0.1
Opera 1.0-8.x
Konqueror
We have successfully implemented a Dialog widget without major issues. We did have some problems making sure the correct versions of the libraries were created. I would suggest you build a custom file using the jQuery UI download tool. This will put all the necessary files in a single minified file.
If the Dialog examples don't help then posting code will be necessary to obtain further help.
EDIT:
I have anchors created with the classes dialogOpen and dialogClose and use the following code to utilise the created UI Dialog;
$(document).ready(function(){
var dialogOpts = {
autoOpen: false,
modal: true,
width: 840,
height: 560
};
$(".dialogOpen").click(function(){
$("#myDialog").dialog("open");
return false;
});
$(".dialogClose").click(function(){
$("#myDialog").dialog("close");
return false;
});
$("#myDialog").css('display','block').dialog(dialogOpts);
$(".ui-dialog-titlebar").hide();
});
NB: The use of the css function when creating the dialog stops the content appearing on the page before the Dialog is created. We needed this because our dialog has flash.
You may be missing something. It surely works in all major browsers.
jQuery is ment to be cross browser. Any errors with this can have to reasons
- Programmer's error
- Explicit incompatibilty
There are some explicit incompatibility's with IE5.5 and IE6 in jQuery. They are in the comments of jQuery and a good js compatible IDE like netbeans will allow targeting and warn you about it.
I never had any problems with the dialog widget positioning or contents.
jQuery UI is most definitly not designed to work with Google Chrome only.
I've successfully created applications using jQuery UI working on all major browser platforms.
jQuery UI (and jQuery) contain code to work around certain browser issues.
Of course there can be issues in jQuery UI which show on IE, like this one, but those are certainly not by design.