ajax file upload to umbracoapicontroller

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Ulf Möllerström 70 posts 247 karma points

Apr 05, 2018 @ 13:02

0

Ajax file upload to UmbracoApiController

Anyone with a working example of how to upload a file with (jQuery) AJAX to an UmbracoApiController?

Copy Link
Michaël Vanbrabandt 863 posts 3348 karma points c-trib

Apr 05, 2018 @ 13:25
1
Hi Ulf,

Can you show us some extra details about your situation? Normally you create a model which represents the form something like:
```
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

namespace YourProject.Models
{
    public class YourFormViewModel
    {
        [Required]
        [Display(Name = "Full name")]
        public string Name { get; set; }
        [Display(Name = "Images")]
        public List<HttpPostedFileBase> Images { get; set; }
    }
}
```
Where Images is your upload form element.

Because we are working with an ApiController it could be better to get the upload using:
```
 HttpContext.Current.Request
```
Then you create your controller something like this:
```
public class YourController : UmbracoApiController
{       
    public void DoUpload(YourFormViewModel model)
    {
        // do something
    }
}
```
Where you have a method which takes the viewmodel.

Then using jQuery you can take the form data and send it with ajax to your controller.

For info about Web Api in Umbraco can be found here:

https://our.umbraco.org/documentation/reference/routing/webapi/

In this Blog post you can also find some more details about Ajax and Umbraco requests:

https://www.wiliam.com.au/wiliam-blog/handling-ajax-postbacks-using-the-umbracoapicontroller

Hope this helps!

/Michaël
Copy Link

Ulf Möllerström 70 posts 247 karma points

Apr 05, 2018 @ 14:57

Thanks Michaël!

I tried getting data over to the controller, even put the model to dynamic to just too get some result to debug - but kept getting

"The request entity's media type 'multipart/form-data' is not supported for this resource."

So I referenced the request object directly in the controller (it works, but maybe not "pretty" or best practice)

using System.Web;
using System.Web.Http.Results;
using System.Web.Http;
using Umbraco.Web.WebApi;

namespace SwaggerDemo.Controllers
{
    public class FileApiController : UmbracoApiController
    {
        [HttpPost]
        public JsonResult<string> UploadFiles()
        {
            var files = HttpContext.Current.Request.Files;
            var person = HttpContext.Current.Request.Form["person"];
            var job = HttpContext.Current.Request.Form["job"];

            return Json($"files: {files.Count}");
        }
    }
}

Page

<script src="~/Scripts/jquery-2.2.4.js"></script>




<script>
    $(document).ready(function () {
        $("#fileButton").click(function () {
            var files = $("#fileInput").get(0).files;
            var fileData = new FormData();

            fileData.append("person", @person);
            fileData.append("job", @job);

            for (var i = 0; i < files.length; i++) {
                fileData.append("fileInput", files[i]);
            }

            $.ajax({
                type: "POST",
                url: "/umbraco/api/fileapi/uploadfiles",
                dataType: "json",
                contentType: false, 
                processData: false, 
                data: fileData,
                success: function (result, status, xhr) {
                    alert(result);
                },
                error: function (xhr, status, error) {
                    alert(status);
                }
            });
        });
    });

    $(document).ajaxStart(function () {
        $("#loadingImg").show();
        $("#fileButton").prop("disabled", true);
    });

    $(document).ajaxStop(function () {
        $("#loadingImg").hide();
        $("#fileButton").prop("disabled", false);
        $("#fileInput").val("");
    });
</script>

Copy Link

Michaël Vanbrabandt 863 posts 3348 karma points c-trib

Apr 05, 2018 @ 15:04

1

Hi Ulf,

You are correct the HttpPostedFileBase is better for MVC Controllers, when dealing with ApiControllers you can use your solution.

Thanks!

/Michaël

Copy Link
Michaël Vanbrabandt 863 posts 3348 karma points c-trib

Apr 06, 2018 @ 09:35

1

Hi Ulf,

don't forget to mark the answer so others with the same question can find the solution.

Have a nice day!

/Michaël

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?