Uploading Image with API and javascript

osyris zosar

5y872Learn iOS Programming

I understand how to upload images using mvc with razor pages

Now i would like to upload a image using Javascript .

Javascript code:

function CreateProduct() {
event.preventDefault();
const Titleform = document.getElementById("TitleFelt");
const Priceform = document.getElementById("priceFelt");
const quantityform = document.getElementById("Quantityfelt");
const file = document.getElementById("fileupload"); //the File Upload input
const formdata = new FormData();
formdata.append("userpic", file.files[0],'Test1.jpg');
};
fetch(url, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: formdata
})
.then(response => response.json())
.then(result => {
console.log('succes', result);
})
.then(() => {
GetProducts();
})
.catch(error => console.log('unable to do something', error));
}

and my asp net core action:

[HttpPost]
public async Task PostProduct(IFormFile formFile)
{
Product pr = new Product()
{
Title = "test",
Price = 2,
FilePath = formFile.FileName
};
_context.products.Add(pr);
await _context.SaveChangesAsync();
return Ok();
}

I am getting a 415 error in the browser console log

while it was a JPG image that i tried to upload

So i dont really understand it

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
there are multiple ways,
https://www.sharpencode.com/HowToTopic/upload-multiple-files-and-display-progress-bar-with-ajax-correctly-in-asp-net-mvc
0
Arnab Mukherjee5y ago
Hi,
You can use jQuery also to upload the image. I have used FormData() here.
$("#btnSave").click(function () {

        var formData = new FormData();
        var files = $("#FileUpload1").get(0).files;

        formData.append("file", files[0]);
        formData.append("CustName", $("#txtname1").val());
        formData.append("Address", $("#txtaddress1").val());
        formData.append("Phone", $("#txtphn1").val());
        formData.append("Email", $("#txtemail1").val());

        if ($("#txtname1").val() == "") {
            $('#txtname1').focus();
            alert('Please Enter Name!');
            return false;
        }
        else if (files.length > 0) {
             for (var i = 0; i < files.length; i++) {
                var allowed_extensions = new Array("jpg", "png", "gif","pdf");
                var file_extension = files[i].name.split('.').pop().toLowerCase();

                if ($.inArray(file_extension, allowed_extensions) == -1) {
                    alert("Invalid file type");
                    return false;
                }
            }
        }
        $.ajax({
              type: 'POST',
              url:"@Url.Action("AddCustomer", "API")",
              data: formData,
              cache: false,
              contentType: false,
              processData: false,
              success: function (result) {
               if (result.status) {
                   alert('Customer Added successfully !');
               }
           },
           error: function (result) {
               alert(result);
           }
        })
    });
API
[HttpPost]
        public async Task AddCustomer(CustomerDetails aodj)
        {
            CustomObject lobjresult = new CustomObject();
            if (ModelState.IsValid)
            {
                if (System.Web.HttpContext.Current.Request.Files.AllKeys.Any())
                {
                    #region Saving Images
                    var img = System.Web.HttpContext.Current.Request.Files["file"];
                    if (img.ContentLength > 0)
                    {
                        var profileName = Path.GetFileName(img.FileName);
                        var ext = Path.GetExtension(img.FileName);

                        string ImageName = profileName;
                        var comPath = Path.Combine(Server.MapPath("~/images/Documents"), ImageName);
                        img.SaveAs(comPath);
                        aodj.ImgUrl = comPath;
                    }
                    #endregion
                }
                try
                {
                    lobjresult = await Services.SaveCustomer(aodj); //Saving record in DB
                    return Json(lobjresult, JsonRequestBehavior.AllowGet);
                }
                catch (Exception ex)
                {
                    lobjresult.status = false;
                    lobjresult.returnVal = 0;
                    lobjresult.message = ex.Message;
                    return Json(lobjresult, JsonRequestBehavior.AllowGet);
                }
                finally { }
            }
            else
            {
                lobjresult.returnVal = 0;
                lobjresult.message = "Bad request";
                return Json(lobjresult, JsonRequestBehavior.AllowGet);
            }
        }
0
Pranam Bhat5y ago
Here's the simple way: Use URL.createObjectURL, which creates a DOMString containing a URL representing the object given in the parameter Then, you can simply set the src of the image to that url: window.addEventListener('load', function() { document.querySelector('input[type="file"]').addEventListener('change', function() { if (this.files && this.files[0]) { var img = document.querySelector('img'); img.onload = () => { URL.revokeObjectURL(img.src); // no longer needed, free memory } img.src = URL.createObjectURL(this.files[0]); // set src to blob url } }); });
0