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
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
Member
1 Points
3 Posts
Uploading image from react to web api
Apr 02, 2020 04:04 PM|Giga Meta|LINK
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?
Contributor
3730 Points
1424 Posts
Re: Uploading image from react to web api
Apr 03, 2020 07:59 AM|yij sun|LINK
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
Member
1 Points
3 Posts
Re: Uploading image from react to web api
Apr 03, 2020 01:31 PM|Giga Meta|LINK
Im using .NET, not .NET Core, so I can't use FromForm?