Uploading a File to Server in Intel XDK when server requires authentication

Question

I am developing an app using Intel XDK New. The issue I am having involves the Intel XDK JavaScript Bridge API, in particular the uploadToServer method.

I have written a simple server backend using C# MVC4. I have working code for uploading a photo taken from a mobile device, but the code fails when I make the upload url on the server require authentication.

I am uncertain how MVC authentication works exactly, I think it uses a mix of cookies and some http headers? To clarify I am using MVC Forms Authentication. However, the server doesn't really use forms, or return views. I have modified the authentication required event to just return a 404 instead of a view.

The real question is, does anyone familiar with the Intel XDK know if it is possible for the uploadToServer method to also pass the authentication cookies/headers/however it works? So far all my requests to the server have used the intel appframework $.ajax method. (Not jQuery it just looks like it). This seems to pass the authentication stuff as I have methods on the server to return Json that require authentication and it all works fine.

My server code:

[HandleError]
[MyAuthorizeAttribute]
public class PhotosController : Controller
{
    public ActionResult UploadPhoto()
    {
        Log.Write("UploadPhoto");
        if (Request != null && Request.Files != null && Request.Files.Count > 0)
        {
            foreach (string fileName in Request.Files)
            {
                if (Request.Files[fileName] == null || Request.Files[fileName].ContentType != "image/jpeg") 
                    continue;

                Request.Files[fileName].SaveAs(Server.MapPath("~/Content/Images/photo.jpg"));
            }
            return Json("File(s) Uploaded", JsonRequestBehavior.AllowGet);
        }
        return Json("No File(s) to Upload", JsonRequestBehavior.AllowGet);
    }
}

My JavaScript

document.addEventListener("intel.xdk.file.upload.busy", function(evt) { $('#afui').popup("Sorry, a file is already being uploaded"); });
document.addEventListener("intel.xdk.file.upload",UploadComplete);
document.addEventListener("intel.xdk.file.upload.cancel", function(evt) { $('#afui').popup("File upload was cancelled "+evt.localURL); });

function MyUploadMethod() {    
    intel.xdk.file.uploadToServer(pictureURL,"http://mywebsite.co.uk/Photos/UploadPhoto", "", "image/jpeg", "UpdateUploadProgress");
}

function UpdateUploadProgress(bytesSent,totalBytes)
{
   if(totalBytes>0) {
        currentProgress=(bytesSent/totalBytes)*100;
        document.getElementById("progress").innerHTML=currentProgress+"%";
        console.log(currentProgress);
   }           
}

function UploadComplete(evt)
{
    if(evt.success===true)
    {
        $('#afui').popup("Success");
    }
    else {
        $('#afui').popup("Error uploading file "+evt.message);
    }
    document.getElementById("progress").innerHTML="";
}

Answer 1

well i think you should try, I had use it for my previous project which uses CORS technology.

Response.AppendHeader("Access-Control-Allow-Origin", "*");