Click here to Skip to main content
14,545,215 members
Rate this:
Please Sign up or sign in to vote.
See more:
Guys I can't upload file. I can send value for example "content" but when I try send image it doesn't work.

<form asp-action="Add" asp-controller="Tweet" method="post" enctype="multipart/form-data">
<span><textarea style="background-color:black" placeholder="Neler oluyor?" id="content" asp-for="Content" class="form-control p-0 my-0"></textarea>
<input type="file" id="myFile" name="myFile" /></span>


     document.querySelector("#ekle").addEventListener('click', ekle);
function ekle() {
             var content = $("#content").val();
             var file = document.querySelector("#myFile").files[0];
             let formData = new FormData();
             formData.append("image", file);
             var username = '@User.Identity.Name';
             $.ajax({
                    dataType:'json',
                 url:'/Member/Tweet/Add',
                 data: { "content": content, "image": formData },
                   type: 'POST'


public void Add(TweetDTO model, string userName, string content, IFormFile image)
        {
            var user = _uow.User.Find(x => x.UserName == userName);
            model.Content = content;
            model.UserId = user.Id;
            string uploadDir = Path.Combine(_environment.WebRootPath, "media/tweet");
            if (!Directory.Exists(uploadDir))
            {
                Directory.CreateDirectory(uploadDir);
            }
            string fileName = Path.GetFileName(image.FileName);
            using (FileStream stream = new FileStream(Path.Combine(uploadDir, fileName), FileMode.Create))
            {

                image.CopyTo(stream);
                model.ImagePath = fileName;

            }
            Tweet tweet = _mapper.Map<Tweet>(model);
            _uow.Tweet.Add(tweet);
            _uow.SaveChange();
        }


What I have tried:

Like I said I can send "content" value but I can't send image. I searched on web and I tried many way but they were same all.
Posted
Updated 21-May-20 6:50am
v2
Rate this:
Please Sign up or sign in to vote.

Solution 2

The FormData object needs to contain the entire data to submit.

You'll also need to set the processData and contentType options to false, and remove the dataType: 'json' option.

And you should properly encode your user's name before emitting it into a Javascript variable. Since this appears to be ASP.NET Core, you should be able to use the JsonHelper extensions[^]:
let formData = new FormData();
formData.append("username", @Json.Serialize(User.Identity.Name));

var content = $("#content").val();
formData.append("content", content);

var file = document.querySelector("#myFile").files[0];
formData.append("image", file);

$.ajax({
    url:'/Member/Tweet/Add',
    data: formData
    type: 'POST',
    processData: false,
    contentType: false,
Using FormData Objects - Web APIs | MDN[^]
Sending FormData with jQuery.ajax() | Matt Lunn[^]
   
Comments
Member 14769019 21-May-20 13:02pm
   
Thank u very much! It's working. you explained very clearly thank you.
Rate this:
Please Sign up or sign in to vote.

Solution 1

   
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100