Upload video from Phonegap to ASP.NET
If you’re uploading an image from Phonegap to a server, then it’s perhaps ok to just Base64 encode the image data and post it to the server, but when you you are dealing with Video, then you need something a little more efficient, which is where I started to take a look at the FileTransfer feature of Phonegap.
The best lesson I learned from this process, is to start with uploading an image from the photo gallery first, rather than diving headlong into the Video upload process. This is because you can run through the process in the simulator, giving you access to the debug console, so you can see any error details coming back from the server, otherwise, you can’t really see what’s going on.
So, let’s start with the server side, here’s my ASMX webservice:
<%@ WebService Language=”C#” Class=”WebService” %>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.IO;
[WebService(Namespace = “http://tempuri.org/”)]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class WebService : System.Web.Services.WebService {
public WebService () {}
[WebMethod]
public string UploadFile() {
string lreturn = “success”;
try
{
HttpPostedFile file = HttpContext.Current.Request.Files[“file”];
string saveFile = file.FileName;
string realPhysicalPath = Path.Combine(Server.MapPath(“videoUpload”), saveFile);
file.SaveAs(realPhysicalPath);
}
catch (Exception ex)
{
lreturn = “fail. ” + ex.Message;
}
return lreturn ;
}
}
The web.config configuration for this service is quite important, as follows:
<system.web>
<compilation debug=”true”/>
<customErrors mode=”Off”/>
<webServices>
<protocols>
<add name=”HttpGet”/>
<add name=”HttpPost”/>
</protocols>
</webServices>
</system.web>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name=”Access-Control-Allow-Origin” value=”*” />
</customHeaders>
</httpProtocol>
</system.webServer>
This allows the webservice to be called with GET and POST, and the CORS support helps cross-domain access.
Then, the fun part of writing the app to upload video as follows (Slightly adapted from official docs)
<!DOCTYPE html>
<html>
<head>
<title>Capture Video</title><script type=”text/javascript” charset=”utf-8″ src=”cordova.js”></script>
<!–<script type=”text/javascript” charset=”utf-8″ src=”json2.js”></script>–>
<script type=”text/javascript” charset=”utf-8″>// Called when capture operation is finished
//
function captureSuccess(mediaFiles) {
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
uploadFile(mediaFiles[i]);
}
}// Called if something bad happens.
//
function captureError(error) {
var msg = ‘An error occurred during capture: ‘ + error.code;
alert(msg, null, ‘Uh oh!’);
}// A button will call this function
//
function captureVideo() {
// Launch device video recording application,
// allowing user to capture up to 2 video clips
navigator.device.capture.captureVideo(captureSuccess, captureError, {limit: 2});
}// Upload files to server
function uploadFile(mediaFile) {var ft = new FileTransfer(),
path = mediaFile.fullPath,
name = mediaFile.name;
alert(“Attempting to upload:” + path);var op;
op = new FileUploadOptions();
op.fileName = name;
op.fileKey = “file”;ft.upload(path,
“http://yourserver.com/videoUpload.asmx/UploadFile”,
function(result) {
alert(‘Upload success: ‘ + result.responseCode);
alert(result.bytesSent + ‘ bytes sent’);},
function(error) {
alert(‘Error uploading file ‘ + path + ‘: ‘ + error.code);
},
op);
}</script>
</head>
<body>
<button onclick=”captureVideo();”>Capture Video</button> <br></body>
</html>
Now, the fun part, is that I just see that iOS uploads in Quicktime (MOV) format, which is not supported in-browser by Android.
Network Programming in .NET 