Unable to send file value to controller in asp.net mvc with js

Question

I have a little problem here. I am unable to send the content of a file input to the controller via js, I'm using 'croppie' plugin to re-scale the picture size before submission. Before using this js plugin at all, I could submit the file and save it but not anymore but now, I get all values in my model submitted but not the file. I'm not good with js, please help me.

Here is the input and submit codes

 <div class="col-md-10">
      <input type="file" name="ImageUpload" id="ImageUpload" value="Select an image" />
      <div id="upload"></div>
      <input type="hidden" id="productImage" name="productImage">
 </div>

<div class="form-group">
      <div class="col-md-offset-2 col-md-10">
            <a href="#" class="upload-form btn btn-pry">Add Product</a>
      </div>
</div>

Here is the croppie plugin code

<script type="text/javascript">
    $(document).ready(function () {
        var $uploadCrop;

        function readFile(input) {
            $uploadCrop = $('#upload').croppie({
                viewport: {
                    width: 270,
                    height: 350,
                    type: 'square'
                },
                boundary: {
                    width: 310,
                    height: 400
                }
            });

            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $uploadCrop.croppie('bind', {
                        url: e.target.result
                    });
                    $('.upload').addClass('ready');
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

        $('#ImageUpload').on('change', function () { readFile(this); });
        $('.upload-form').on('click', function () {
            $uploadCrop.croppie('result', {
                type: 'canvas',
                size: 'original'
            }).then(function (resp) {
                $('#productImage').val(resp);
                $('.form').submit();
            });
        });

    });
</script>

I have this post action in my controller

 public ActionResult AddProduct(ProductVM model, HttpPostedFileBase file)
 {
     //.... some codes here
 }

Answer 1

if you using submit then you will need to put from body in your controller..

public ActionResult AddProduct([FromBody]ProductVM model, HttpPostedFileBase file)
 {
     //.... some codes here
 }