Uploading image from react to web api

Question

User1619930584 posted

I want to upload a image with some additional description, but I don't know how to process it further

```

handleChange = (e) => {

var files = e.target.files[0]

this.setState({imagesToDB: [...this.state.imagesToDB, files])

}

```

My react component

```

submitProperty = (e) => {

const { title, location, address, rooms, beds, baths, typeProperty, price, description, imagesToDB } = this.state

var form = new FormData();

form.append("title", title)

form.append("location", location)

form.append("address", address)

form.append("rooms", rooms)

form.append("beds", beds)

form.append("baths", baths)

form.append("typeProperty", typeProperty)

form.append("price", price)

form.append("description", description)

form.append("Files", imagesToDB)

e.preventDefault()

fetch("api/advertentie/test", {

method: "POST",

enctype: "multipart/form-data",

body: form

})

```

Web api controller

```

public IHttpActionResult Post()

}

var file = HttpContext.Current.Request.Files;

// file says that it is empty. I see tutorials that I need to for loop

// over the files but it is empty..

var form = HttpContext.Current.Request.Form;

// I receive the form with 10 parameters

var request = HttpContext.Current.Request.Params["Files"];

// the result of requests is "[object File]"

}

```

My question is: how can I save the ```"[object file ]"``` in my database?

Answer 1

User1535942433 posted

Hi Giga Meta,

Accroding to your description and codes,As far as I think,you could use fetch api to send the image to the server.You could get and save  images' path using httpContext.Request.

More details,you could refer to below codes:

[HttpPost]  
        public HttpResponseMessage Post()  
        {  
            var httpContext = HttpContext.Current;  
  
            // Check for any uploaded file  
            if (httpContext.Request.Files.Count > 0)  
            {  
                //Loop through uploaded files  
                for (int i = 0; i < httpContext.Request.Files.Count; i++)  
                {  
                    HttpPostedFile httpPostedFile = httpContext.Request.Files[i];  
                    if (httpPostedFile != null)  
                    {  
                        // Construct file save path  
                        var fileSavePath = Path.Combine(HostingEnvironment.MapPath(ConfigurationManager.AppSettings["fileUploadFolder"]), httpPostedFile.FileName);  
  
                        // Save the uploaded file  
                        httpPostedFile.SaveAs(fileSavePath);  
                    }  
                }  
            }  
  
            // Return status code  
            return Request.CreateResponse(HttpStatusCode.Created);  
        } 

Best regards,

Yijing Sun

Answer 2

User1619930584 posted

Im using .NET, not .NET Core, so I can't use FromForm?