MVC Api upload one image as json

Question

mvc How i can upload one image as json in api when im

i need to upload file to server folder and save file path in object of class after upload image

var data = $('#myForm').serialize();
$.ajax({

    url: "/api/CompaniesApi/"+id,
    type: "PUT",
    dataType:'json',
    data:data,
    contentType:'application/json',
    success: function () {
        debugger;
    },
    error: function () {
        debugger;
    }

});

<div class="form-group">
            @Html.LabelFor(model => model.Image, PublicResource.Image, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <input class="fileinput form-control" type="file" name="ImageUpload" id="ImageUpload" accept="image/*" />
            </div>
        </div>

*****this is class :*****

public class Company
{
    public int ID { get; set; }
    public int CompanyID { get; set; }

    public string Image { get; set; }

    public string NameAr { get; set; }
    public string NameEn { get; set; }
    public string DescAr { get; set; }
    public string DescEn { get; set; }
    public string Email1 { get; set; }
    public string Phone { get; set; }
    public DateTime CreatedDate { get; set; }
    public DateTime UpdatedDate { get; set; }
    public int CreatedBy { get; set; }
    public int UpdatedBy { get; set; }
}

Use [FormData](https://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) — , Dec 29 '17 at 22:39

Udara Kasun · Accepted Answer · 2018-02-24T08:38:31.627

You Can Try this

Html & Scrips Code like this

<html>
    <body>
        <input type="file" class="form-control" id="upload-image"  accept="image/*">

        <script>
        $('#upload-image').on('change', function () {
            var myformdata = new FormData();
            var file = this.files[0];
            var reader = new FileReader();
            var Para1="My up Image";
            reader.onloadend = function () {       
                myformdata.append("My up Image",file);

                 $.ajax({
                    type: "POST",
                    url: "http://your.url.com/api/uploadfile?Para1=" + Para1 , 
                    contentType: false,
                    processData: false,
                    data: myformdata,
                    success: function (response) {
                        alert(response);            
                    }
                });
            }
        });
        </script>
    </body>
</html>

asp.net web Api code Like This

[HttpPost]
public String UploadFile(String Para1) {
    try{
         if (HttpContext.Current.Request.Files.AllKeys.Any()) {
                        var files = HttpContext.Current.Request.Files;
                        var fileSavePath=Path.Combine(HttpContext.Current.Server.MapPath("~/Folder1/Folder2/"), "My up Image.jpg");
                        files[Para1].SaveAs(fileSavePath); 
                        return "Image Uploaded";
        }else{
            return "Image Not Found";
        }
    }catch(Exception ex){
        return "Error"; 
    }
}

MVC Api upload one image as json

1 Answers1