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>