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

@model PerformerProfile 
@{ ViewData["Title"] = "Edit your avatar"; } 
@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="~/avatars/@(User.Identity.Name).png">

<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>