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
    Ulf Möllerström
    0

    Ajax file upload to UmbracoApiController

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

  • Michaël Vanbrabandt 863 posts 3348 karma points c-trib
    Apr 05, 2018 @ 13:25
    Michaël Vanbrabandt
    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

  • Ulf Möllerström 70 posts 247 karma points
    Apr 05, 2018 @ 14:57
    Ulf Möllerström
    101

    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>
    
  • Michaël Vanbrabandt 863 posts 3348 karma points c-trib
    Apr 05, 2018 @ 15:04
    Michaël Vanbrabandt
    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

  • Michaël Vanbrabandt 863 posts 3348 karma points c-trib
    Apr 06, 2018 @ 09:35
    Michaël Vanbrabandt
    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

Please Sign in or register to post replies

Write your reply to:

Draft