yavsc/src/Yavsc.Org/Views/Manage/SetAvatar.cshtml

@model PerformerProfile
@{ ViewBag.Title = "Edit your avatar"; }
@{
    var previewAvatarSrc = string.IsNullOrWhiteSpace(User?.Identity?.Name)
        ? Yavsc.Constants.DefaultAvatar
        : $"{Yavsc.Constants.AvatarsPath}/{User.Identity.Name}.png";
}
@section header{
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
}
@section scripts{
<script>
$(document).ready(function() {
    Dropzone.options.postavatar = {
        maxFilesize: 2, // MB (an avatar)
        autoProcessQueue: true,
        accept: function(file, done) {
            if (file.name == "justinbieber.jpg") {
                done("Naha, you don't.");
            }
            else { done(); }
        },
        url: "/api/setavatar"
        };
  });
</script>
}
<img src="@previewAvatarSrc">

<form id="postavatar" action="/api/setavatar" class="dropzone" method="post" enctype="multipart/form-data">
    <div class="fallback">
        <input name="Avatar" type="file" id="Avatar" />
    </div>
    @Html.AntiForgeryToken()

</form>