Filepond null name .Net

Viewed 27

I am using the filepond plugin. Front Side is Okay but after choose Image When i clicked the Upload Button the fileName not Added to database. When running with Debug i see the file send null from input to Controller. i think the name is wrong but after checking i am sure Everything is Okay.

Controller:

 public ActionResult ProfilePhoto(HttpPostedFileBase file)
        {

            var userId = User.Identity.GetUserId();
            User user = _context.Users.Where(u => u.id == userId).First();
            if (file != null)
                {
                    if (file.ContentType == "image/jpeg" || file.ContentType == "image/png")
                    {
                        
                        user.IMAGEPATH = $"~/Components/ProfilePhotos/{Guid.NewGuid()}{file.FileName}";
                        file.SaveAs(HttpContext.Server.MapPath(user.IMAGEPATH));
                        _context.SaveChanges();
                        return RedirectToAction("Profile", "Account");
                    }
                    else
                    {
                        ModelState.AddModelError("", "File Format is wrong");
                        return View(user);
                    }

                }
                else
                {
                    ModelState.AddModelError("", "Please Choose Image");
                    return View(user);
                }
        }

Form:

<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css" rel="stylesheet" />
<link href="https://unpkg.com/filepond/dist/filepond.min.css" rel="stylesheet" />

 @using (Html.BeginForm("ProfilePhoto", "Account", FormMethod.Post,
                new
                {
                    enctype = "multipart/form-data"
                }))
            {
              
                <input type="file" name="file" class="d-block mb-3 filepond" />
                <input id="upload" type="submit" value="Upload" class="btn btn-primary" />
            }

<script src="https://unpkg.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
<script>
    FilePond.registerPlugin(FilePondPluginFileEncode, FilePondPluginFileValidateSize, FilePondPluginImageExifOrientation, FilePondPluginImagePreview);
    // Select the file input and use create() to turn it into a pond
    FilePond.create(document.querySelector('.filepond'));
</script>
<script>
FilePond.setOptions({
server: '@Url.Action("Index", "Home")'
});
</script>
0 Answers
Related