Upload image using file-transfer cordova plugin for iOS and android

From previous tutorial, we talk about camera cordova plugin for iOS and android. Users can capture photo or select images from gallery in their phone. Today, I want to share with you how to upload image into server (PHP) using file-transfer cordova plugin for iOS and android.

Create project com.revivalx.cordova.file-transfer and install camera and file-transfer cordova plugin into your cordova project.

cordova create com.revivalx.cordova.file-transfer
cd com.revivalx.cordova.file-transfer
cordova plugin add https://github.com/apache/cordova-plugin-camera
cordova plugin add https://github.com/apache/cordova-plugin-file-transfer
create project

create project

First you need to complete this tutorial first before we go any further. http://blog.revivalx.com/2014/05/03/tutorial-camera-cordova-plugin-for-ios-and-android/ . It is because we want to get an image before upload it into server.

Open up index.html file in www folder. Replace with this code.

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<meta content="telephone=no" name="format-detection">
<!– WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 –>
<meta content=
"user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"
name="viewport">
<script src="cordova.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
<title>Camera Cordova Plugin</title>
</head>

<body>
<button onclick="capturePhoto();">Capture Photo</button><br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo
Library</button><br>
<img id="image" src="" style="display:none;width:100%;">
<button onclick="upload();">Upload</button>
</body>
</html>

Then open up index.js file in js folder add this code after onFail function.

function upload() {
    var img = document.getElementById('image');
    var imageURI = img.src;
    var options = new FileUploadOptions();
    options.fileKey = "file";
    options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
    options.mimeType = "image/jpeg";
    var params = new Object();
    options.params = params;
    options.chunkedMode = false;
    var ft = new FileTransfer();
    ft.upload(imageURI, "https://www.example.com/upload.php", win, fail,
        options);
}

function win(r) {
    console.log("Code = " + r.responseCode);
    console.log("Response = " + r.response);
    console.log("Sent = " + r.bytesSent);
}

function fail(error) {
    alert("An error has occurred: Code = " + error.code);
    console.log("upload error source " + error.source);
    console.log("upload error target " + error.target);
}

Simple upload php code.

<?php
move_uploaded_file($_FILES["file"]["tmp_name"], '/path/to/file');

Build and run the app. I hope you enjoy this article. You may download the source code here, https://github.com/datomnurdin/com.revivalx.cordova.file-transfer .

Android – Adding native functionality to hybrid application with Apache Cordova plugin

Today I would like to share with you about how to adding native functionality to hybrid application with Apache Cordova Plugin in simple way. Someone ask me how to do it. Is it impossible? Nope, it’s possible. You can add native functionality to hybrid app can be done using correct method.

There are two types of platform that I want to teach you today, iOS and android. You need to use cordova.exec API to communicate between native functionality and hybrid application.

phonegap (cordova) + android

phonegap (cordova) + android

Android

Firstly you need to declare your custom plugin in config.xml. You can found this file in res > xml folder.

<feature name="CustomPlugin">
      <param name="android-package" value="com.Phonegap.CustomPlugin" />
</feature>

Then you need to implement plugin by using Java- code

public class CustomPlugin extends CordovaPlugin {

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext)
            throws JSONException {

        if (action.equals("sayHello")){
            try {
                String responseText = "Hello world, " + args.getString(0);
                callbackContext.success(responseText);
            } catch (JSONException e){
                callbackContext.error("Failed to parse parameters");
            }
            return true;
        }

        return false;
    }
}

Finally we calling a plugin from javascript

function initial(){
    var name = $("#NameInput").val();
    cordova.exec(sayHelloSuccess, sayHelloFailure, "CustomPlugin", "sayHello", [name]);
}

function sayHelloSuccess(data){
    alert("OK: " + data);
}

function sayHelloFailure(data){
    alert("FAIL: " + data);
}

If you want to know more details about this tutorial, you can download the pdf file here.

http://public.dhe.ibm.com/software/mobile-solutions/worklight/docs/v610/06_05_Android_-_Adding_native_functionality_to_hybrid_application_with_Apache_Cordova_plugin.pdf

Next tutorial will be IOS part. I hope you don’t hesitate to contact me if you got any issue regarding to this tutorial. Enjoy !

Service Finder Mobile

Service Finder Mobile is an open source mobile application built using PhoneGap (Apache Cordova) that helps users provide and find services in Malaysia.

The Service Finder Mobile uses the following technologies:

The entire user interface of the application is created dynamically at runtime based on jquery mobile.  You can download the full application source code at https://github.com/datomnurdin/service-finder-mobile.  Feel free to fork it, or use it as a learning tool to build UI experiences for PhoneGap applications.

Enjoy !

IBM Worklight training – Day 3

Hi, welcome back. I just finished my worklight training today perfectly . There are a lot of things I want to share with you about worklight. Subjects for today that I learned are Apache Cordova, authentication, push notification service and mobile test workbench. Maybe a several of you already heard these kind of terms, but maybe not. But anyway, I will share with you what I gain from my class today.

Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript. Do not confuse between Apache Cordova and Phonegap. PhoneGap is a distribution of Apache Cordova. You can think of Apache Cordova as the engine that powers PhoneGap, similar to how WebKit is the engine that powers Chrome or Safari. Mostly developers think that mobile app that build from Apache Cordova only using Html5, Javascript and css.

apache cordova

apache cordova

History about Apache Cordova is starting from Nitobi. Nitobi is a creator for phonegap. The other codename for phonegap is Apache Cordova. Later Adobe purchase phonegap from Nitobi. After that, phonegap build was created. Then Adobe had an agreement with IBM for worklight. Until now, IBM had a contract with Adobe for phonegap support. They will fix it if any problems or technical issues regarding to phonegap.

If you want the device functionality works with your app, you need to use cordova plugin. If you want to use the cordova plugin, you must had knowledge in pure language device such as Objective-C for iOS, Java for Android and C# for windows phone.  Sadly, phonegap plugin already deprecated. But don’t worry, there are a lots of developers out there work out for cordova plugin. Mostly it’s open source. Maybe you just paid to the developers for support.

Last post I already post about worklight application console. There you can control your app either you want to lock the app, want to notify users through console or set a push notification service. You can read my post about the push notification service here. Besides that, you can set authentication to allow only authenticated users can enter this console. You can read more details about worklight authentication here.

Lastly about mobile test workbench. Mobile test workbench is a tool that can test the hybrid app on your devices. You can download mobile test workbench from eclipse marketplace. Either iOS, android and windows phone. I’m not sure about blackberry because I don’t what is blackberry, haha. Just kidding. This tool only can test your app and generate a report for you, not for analytical. Don’t misunderstanding about it. Testing/reporting tool and analytical tool are slightly differents. Tealeaf is a one of IBM product that can analyze you user’s behaviour, what kind of pages they visit and many more. you can go to IBM information centre if want to know more details about it. The license is different with worklight. But if you already purchased tealeaf so you don’t have to worry about the library, worklight already included for you.

mobile test workbench

mobile test workbench

You can learn about the worklight here. Don’t hesitate to ask me. Enjoy !!