Kendo file uploader - when pass parameter to api controller action not fired ?

Question

User-1846805900 posted

Hi

i try here to upload file and it works fine when i don't use any parameters :

    public class UploaderController : ApiController
    {
        public IHttpActionResult UploadFile()
        {
            HttpRequest request = HttpContext.Current.Request;

            string fileName = string.Empty;

            for (var i = 0; i < request.Files.Count; i++)
            {
                HttpPostedFile postedFile = request.Files[i];

                fileName = Path.GetFileName(postedFile.FileName);

                //Save the uploaded file to the server's disk, 
                //then keep the file name in a global variable or database so that PostProduct action can access it
                postedFile.SaveAs(HttpContext.Current.Server.MapPath("/TempUpload/" + fileName));
            }

            return Ok(new { fName = fileName });
        }
    }

but i need to pass the CustomerID to the UploadFile action to use it in my code - i try :

    public class UploaderController : ApiController
    {
        public IHttpActionResult UploadFile(int CustomerID)
        {
            HttpRequest request = HttpContext.Current.Request;

            string fileName = string.Empty;

            for (var i = 0; i < request.Files.Count; i++)
            {
                HttpPostedFile postedFile = request.Files[i];

                fileName = Path.GetFileName(postedFile.FileName);

                //Save the uploaded file to the server's disk, 
                //then keep the file name in a global variable or database so that PostProduct action can access it
                postedFile.SaveAs(HttpContext.Current.Server.MapPath("/TempUpload/" + fileName));
            }

            return Ok(new { fName = fileName });
        }
    }

but when i try to upload file the action not fired - it works only when i remove the parameter ?

View Code:

            @(Html.Kendo()
                  .Upload()
                  .HtmlAttributes(new { style = "width: 100%;" })
                  .Name(componentName: "myFile")
                  .Async(a => a.AutoUpload(value: true)
                               .SaveUrl(url: "/api/Uploader/UploadFile")))

so please how can i make it works ?

Answer 1

User-37275327 posted

Did you try like below?, Best way post this on the Telerik forum,

 @(Html.Kendo()
 .Upload()
.HtmlAttributes(new { style = "width: 100%;" })
.Async(a => a.AutoUpload(value: true)
.SaveUrl(url: "/api/Uploader/UploadFile?CustomerID=1")))

Answer 2

User1644755831 posted

Hello a.amin,

Please see this:

http://www.telerik.com/forums/passing-additional-data-with-the-async-upload & http://www.telerik.com/forums/async-kendoupload-pass-custom-arguments-or-additional-data-to-mvc-controller

Please try this.

 @(Html.Kendo()
                  .Upload()
                  .HtmlAttributes(new { style = "width: 100%;" })
                  .Name(componentName: "myFile")
                  .Async(a => a.AutoUpload(value: true)
                               .SaveUrl(url: "/api/Uploader/UploadFile").Events(events => events.Upload("onImageUpload"))))

Now in script

function onImageUpload(e){
     e.data = { CustomerID: $("#customerid").val() }; //set your customer id.
   }

Please see this: http://demos.telerik.com/aspnet-mvc/upload/events &  http://docs.telerik.com/KENDO-UI/api/javascript/ui/upload#events-upload

you can send Optional object in e.data  that will be sent to the save handler in the form of key/value pairs.

Hope this helps.

With Regards,

Krunal Parekh

Answer 3

User-1846805900 posted

Thanks a lot Krunal

i try it with MVC and it works, but i can't make it to work with api controller - each time i add param in the IHttpActionResult as:

        public IHttpActionResult PostFile(int? CustomerID)
        {
            ..........
        }

i got error message in inspect element and code not fired:

Message: "No HTTP resource was found that matches the request URI 'http://localhost:59184/api/UploadServices/PostFile'."
MessageDetail: "No action was found on the controller 'UploadServices' that matches the request."

but if i remove the param from my code action is fired - so please how can i make it works with api controller and make it accept param ?

Thanks a lot ....

Answer 4

User1644755831 posted

Hello a.amin,

Please check if you have proper route defined for this.

Please see: http://www.asp.net/web-api/overview/web-api-routing-and-actions/routing-and-action-selection

I suppose you should have something similar to this.

routes.MapHttpRoute(
    name: "uploadpostfile",
    routeTemplate: "api/UploadServices/PostFile/{id}",
    defaults: new { id = RouteParameter.Optional  }
);

I have just hardcoded the path but you could have special place holders like {controllers} etc.

With Regards,

Krunal Parekh

Answer 5

User-1846805900 posted

Hello a.amin,

Please check if you have proper route defined for this.

Please see: http://www.asp.net/web-api/overview/web-api-routing-and-actions/routing-and-action-selection

I suppose you should have something similar to this.

routes.MapHttpRoute(
    name: "uploadpostfile",
    routeTemplate: "api/UploadServices/PostFile/{id}",
    defaults: new { id = RouteParameter.Optional  }
);

I have just hardcoded the path but you could have special place holders like {controllers} etc.

With Regards,

Krunal Parekh

Hi Krunal

i was set my Route in the WebApiConfig.cs as:

        public static void Register(HttpConfiguration config)
        {
            config.Routes.MapHttpRoute(
                name: "ApiWithAction",
                routeTemplate: "api/{controller}/{action}/{id}",
                defaults: new { id = RouteParameter.Optional });

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

            Telerik.Reporting.Services.WebApi.ReportsControllerConfiguration.RegisterRoutes(config);
        }

to let work with action name - and the problem still happened, i try your code as:

        public static void Register(HttpConfiguration config)
        {
            // Your Code .... !!
            config.Routes.MapHttpRoute(
                name: "uploadpostfile",
                routeTemplate: "api/UploadServices/PostFile/{id}",
                defaults: new { id = RouteParameter.Optional });

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

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

            Telerik.Reporting.Services.WebApi.ReportsControllerConfiguration.RegisterRoutes(config);
        }

it works only on MVC as u told you (that mean code is working), so please any way to let it work on API ?

Answer 6

User1644755831 posted

Hello a.amin,

Please see: http://www.telerik.com/forums/trying-to-upload-using-kendo-upload-ui-with-web-api

As per described Web API will not automatically decode multi-part (upload) requests. It's up to the developer to do that.

Try using method described as here. http://www.asp.net/web-api/overview/advanced/sending-html-form-data,-part-2

With Regards,

Krunal Parekh

Answer 7

User-1846805900 posted

Hello a.amin,

Please see: http://www.telerik.com/forums/trying-to-upload-using-kendo-upload-ui-with-web-api

As per described Web API will not automatically decode multi-part (upload) requests. It's up to the developer to do that.

Try using method described as here. http://www.asp.net/web-api/overview/advanced/sending-html-form-data,-part-2

With Regards,

Krunal Parekh

Thanks a lot, i finally got the id i need throw using:

HttpContext.Current.Request

i use this code and i got value i need:

string x = request.Form.Get("CustomerID");