Skip to content

Instantly share code, notes, and snippets.

@sitefinitysteve
Created September 9, 2021 12:23
Show Gist options
  • Save sitefinitysteve/a77df1e6d9c62de40c0ed36fb70be83c to your computer and use it in GitHub Desktop.
Save sitefinitysteve/a77df1e6d9c62de40c0ed36fb70be83c to your computer and use it in GitHub Desktop.
VueJs Form Postback
<div id="upload-test">
@if (TempData["UploadError"] != null)
{
<div class="error">
@Html.Raw(TempData["UploadError"])
</div>
}
<form action="/UploadFile/" enctype="multipart/form-data" method="post">
<input type="file" id="myFile" name="file" required="required" @@change="onSelectFile()" ref="fileInput" />
<input type="hidden" name="returnUrl" value="@HttpContext.Current.Request.Url.PathAndQuery" />
<button type="submit" class="btn btn-primary" :disabled="hasInvalidFile">Upload</button>
</form>
</div>
[HttpPost]
public ActionResult UploadFile(HttpPostedFileBase file, string returnUrl)
{
if (file == null)
{
TempData["UploadError"] = "File Error";
return RedirectPermanent(returnUrl);
}
try
{
var path = Util.MapPath(filePath);
file.SaveAs(path);
}catch(Exception ex)
{
TempData["UploadError"] = ex.Message;
}
return RedirectPermanent(returnUrl);
}
var $myWidget = new Vue({
el: '#upload-test',
name: "UploadTest",
data: {
file: null
},
created: function () {
},
mounted: function () {
var $that = this;
},
methods: {
onSelectFile: function (e) {
console.log(this.$refs.fileInput, e);
this.file = this.$refs.fileInput.files[0].name;
}
},
computed: {
hasInvalidFile: function () {
return (this.file == null) ? true : false;
},
extension: function () {
if (this.file != null) {
return '.' + this.file.split('.').pop();
} else {
return "";
}
}
},
watch: {
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment