Archive for category Mobile

App mediator for mobile photo upload with ASP.Net MVC 4

The emergence of social networking sites and mobile phone usage explosion has created a need for providing photo , video uploads via mobile devices . Up until now this was very difficult , because Safari did not allow uploading of photos from a mobile device into a website . However things are opening up with Safari allowing photo uploads to a website and HTML5 media capture facilities maturing in a manner where it’s possible to pick photo and video from a native directory and upload to the website. Then there is Phone Gap which allows tapping the native api via Javascript , another option that can be used to upload photos to a website.

However , with the both of these options yet , there is a learning curve as well as writing code to crop images , arrange them on the canvas or the UI before and after upload. If you have an immediate need to put something together with least amount of code without having to worry about cropping the images with code or a layout for tiling the images , an in between approach is available. A best user experience is always recommended , however it is subjective based on the context of usage.

Here the user installs an app only the first time there is a need to upload and following times just one click takes care of uploads to the websites for a seamless experience. There are pros and cons to this approach however . I will discuss both.

First let me demonstrate how the code looks like when we use ASP.Net MVC 4 for the web.

As a first step you will need to go to the AurigmaUp website and get a Free License Key for a domain you have registered .

Then in your html, here is how a link to AurigmaUp looks like  ( Razor and JQuery Mobile Syntax ).

@if(!String.IsNullOrEmpty( Model.AuthCookie) )
{            
    <a data-role="button" data-theme="a" data-iconpos="right" id="aurLink" href="aurup:?uploadUrl=http://yourdomain/upload/photo&redirectUrl=http://yourdomain/upload/gallery&redirectDelay=60&returnUrl=http://yourdomain/upload/gallery&uploadTimeOut=10000&licenseKey=licensekey&minimumVersion=1.4&multiSelection=true&imageMode=mode=thumbnail,autorotate=true,size=600,resizeQuality=high,jpegQuality=100;mode=thumbnail,size=50,resizeQuality=high,jpegQuality=100;mode=thumbnail,size=150,resizeQuality=high,jpegQuality=100&debugMode=true&minimumVersion=1.4&cookies=AuthCookie=@Model.AuthCookie"> Upload Photos</a>     
}
else
{
    <div>Authentication error: cannot upload photos , please contact administrator</div>
}

As you see above the code is simple enough to declare just a hyperlink , which sends a request to an AurigmaUp App .Everything is configured through this link ,the Upload URL , the image sizes , the URL to redirect to after upload , the license and authentication . AurigmaUp uses cookies to authenticate the request : so in this case , I am passing back my Forms authentication cookie via my Model . This works fine , error free. A Javascript code provides a mechanism to download the IPhone / Android app –

<script type="text/javascript">

(function() {
    var ua = navigator.userAgent;
    var link = document.getElementById("downloadAppLink");
    if (ua.indexOf("Android") > -1) {
        link.setAttribute("href", "https://play.google.com/store/apps/details?id=com.aurigma.aurigmauploader");
        link.style.display = "";
    } else if (ua.indexOf("iPhone") > -1 || ua.indexOf("iPad") > -1) {
        link.setAttribute("href", "http://itunes.apple.com/us/app/aurigma-up/id432611633");
        link.style.display = "";
    }
})();

</script>

Here is the server side controller code that demonstrates how cookie is passed via the Model:

 public ActionResult Photo()
 {
            _logMessages.Write("Into Get Aurigma Upload");

            UploadAlbum ua = new UploadAlbum();
            ua = SetUpAuthCookieForAurigma(ua);
            return View(ua);            
 }
private UploadAlbum SetUpAuthCookieForAurigma(UploadAlbum ua)
{
            HttpCookie authCookie = HttpContext.Request.Cookies.Get(FormsAuthentication.FormsCookieName);

            if (authCookie != null)
            {
                _logMessages.Write(authCookie.Value);
                ua.AuthCookie = authCookie.Value;
            }
            else
            {
                _logMessages.Write("cookie in post does not exist");
                //Redirect to error page
            }

            return ua;
}

The Uploads work error free , without any issues no matter how many photos you upload and they are reasonably fast.

For those of you ,  who are 100% bent on providing an integrated non clunky user experience ,  this is not the best solution . Although, this is very simple to configure with HTML code , the server side code will have some debugging challenges , because once the request is submitted to the AurigmaUp App, you lose control because there is no way to debug the App in development mode. You are going to have to survive by logging to persistence mediums.  However once you have a good logging mechanism in place , it works pretty smoothly.

In the end I would have to conclude with mixed feelings . If you have a site where the user activity is predominantly media uploads , then for the ultimate integrated experience  is better to go with HTML5 or PhoneGap type of API . However if you want to quickly provide the user also the capability to upload photos via mobile devices as an enhancement to the user experience , this is certainly worth considering because it is extremely easy to code and functions correctly , quickly for uploads.

I have not provided full source code – if any question feel free to contact directly or through comments.

, , ,

Leave a comment