How to upload image with other form control (Angular 8) and asp.net core api

Question

        I want fill form which have upload profile image and other controls like Name,address 
        I am using angular 8 for client side and asp.net core for backend..
        I want viewmodel which contains all properties.

I have used angular8 for uploading image in formdata.I have gone through https://www.techiediaries.com/angular-formdata/.My main question is how to receive uploaded file in ViewModel not in httpRequest.Form.Files["ImageFile"]

[HttpPost("Create")]
public IActionResult CreateApplication(ApplicationModel model)
 {
         //want to capture uploaded image 
            return Ok();
  }

main question is how to receive uploaded file in ViewModel You can refer to this SO thread: stackoverflow.com/questions/59349595/… — Fei Han
– Fei Han, Commented Apr 21, 2020 at 3:22

Mateech · Accepted Answer · 2020-04-20 11:55:43Z

1

See this tutorial, can be very helpful: Click

Here is way how i`d do it:

[HttpPost]       
    public async Task<IActionResult> AddBodyType([FromForm]ApplicationModel model)
    {
        try
        {
            if (!ModelState.IsValid)
            {
                return BadRequest();
            }
            else
            {
                var file = Request.Form.Files[0];
                var folderName = Path.Combine("Resources", "Images");
                var pathToSave = Path.Combine(Directory.GetCurrentDirectory(), folderName);
                if (file.Length > 0)
                {
                    var fileName = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
                    var fullPath = Path.Combine(pathToSave, fileName);
                    var dbPath = Path.Combine(folderName, fileName);

                    using (var stream = new FileStream(fullPath, FileMode.Create))
                    {
                        file.CopyTo(stream);
                        await stream.FlushAsync();
                    }

                    model.ImagePath = dbPath;
                    await _context.Add(model);

                    return Ok();
                }
                else
                {
                    return BadRequest();
                }
            }
        }
        catch (Exception ex)
        {
            return StatusCode(500, $"Internal server error: {ex}");
        }
    }

answered Apr 20, 2020 at 11:55

Mateech

1,0941 gold badge16 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ganesh Ayer Over a year ago

I have model which contains collection of model .For example public class public class ApplicationModel{ public ApplicationDetails applicationDetails{get;set;} public ApplicationDetails applicationDetails{get;set;} } How [FromFile] works

Yanayaya · Accepted Answer · 2020-04-24 13:28:17Z

0

Ok got it, the problem was that the directory names were not fixed, they were created by the newly created Id of the product, so the solution was to carry out a check for the directory and if it's not there, create it.

For example

if (!Directory.Exists(folderName))
{
    Directory.CreateDirectory(folderName);
}

Once it's created with the new Id it can be used/found.

answered Apr 24, 2020 at 13:28

Yanayaya

2,2246 gold badges42 silver badges86 bronze badges

Collectives™ on Stack Overflow

How to upload image with other form control (Angular 8) and asp.net core api

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related