Setting up uploadify plugin with WebAPI, getting only "Select Files" text

StackOverflow https://stackoverflow.com/questions/22354657

Question

I am trying to setup uploadify plugin with WebAPI for multiple file uploads (based on "http://donnyvblog.blogspot.in/2009/05/using-jquery-plugin-uploadify-with.html" article).

Here is my HTML code:

 <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <script type="text/javascript" src="/scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/uploadify/jquery.uploadify.min.js"></script>  
    <script type="text/javascript" src="/client/api scripts/products.js"></script>
    <link href="../Uploadify/uploadify.css" type="text/css" />
    <script type="text/javascript">
    $(document).ready(function () {
        // alert("Here");
        $("#fileInput").uploadify({
            uploader: "/uploadify/uploadify.swf",
            script: "/api/files/Upload",
            cancelImg: "/uploadify/cancel.png",
            auto: true,
            folder: "/uploads",
            onError: function (a, b, c, d) {
                if (d.status == 404)
                    alert("Could not find upload script. Use a path relative to: " + "<?= getcwd() ?>");
                else if (d.type === "HTTP")
                    alert("error " + d.type + ": " + d.status);
                else if (d.type === "File Size")
                    alert(c.name + " " + d.type + " Limit: " + Math.round(d.sizeLimit / 1024) + "KB");
                else
                    alert("error " + d.type + ": " + d.text);
            }
        });
    });
</script>
</head>
<body>
        <input type="file" name="fileInput" id="fileInput" />        
</body>
</html>

Here is my controller:

public class FilesController : ApiController
{

    [HttpPost]
    public string Upload(HttpPostedFileBase FileData)
    {
        /*
        *
        * Do something with the FileData
        *
        */
        return "Upload OK!";
    }
}

I have set up my route as:

            config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{action}/{id}",
            defaults: new { id = RouteParameter.Optional }

But all I am getting is "Select Files" text - no button nothing. Neither my controller is being called nor the button being displayed. What am I doing wring here?

Was it helpful?

Solution

Do not use HttpPostedFileBase as its used in MVC. For Web API, you could do something like following:

public class UploadController : ApiController
{
    public async Task<HttpResponseMessage> PostFormData()
    {
        // Check if the request contains multipart/form-data.
        if (!Request.Content.IsMimeMultipartContent())
        {
            throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
        }

        string root = HttpContext.Current.Server.MapPath("~/App_Data");
        var provider = new MultipartFormDataStreamProvider(root);

        try
        {
            // Read the form data.
            await Request.Content.ReadAsMultipartAsync(provider);

            // This illustrates how to get the file names.
            foreach (MultipartFileData file in provider.FileData)
            {
                Trace.WriteLine(file.Headers.ContentDisposition.FileName);
                Trace.WriteLine("Server file path: " + file.LocalFileName);
            }
            return Request.CreateResponse(HttpStatusCode.OK);
        }
        catch (System.Exception e)
        {
            return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, e);
        }
    }

}

Check the following article for more details:
http://www.asp.net/web-api/overview/working-with-http/sending-html-form-data,-part-2

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top