For the past few days, I have been scouring the internet for solutions on how to prevent a page from automatically reloading after an upload. Despite finding various methods, I have been unsuccessful in resolving this issue.
Although I am following the standard setup outlined on the Dropzone home page, the automatic page reload persists after every upload.
function initDropzone() {
var dz = new Dropzone('#fupld', {
url: 'upload',
autoProcessQueue: true,
paramName: 'files',
autoDiscover:false,
init: function () {
this.on('queuecomplete', () => {
}),
this.on('success', function (file, response) {
});
this.on('error', (file, response) => {
console.log(response);
});
}
});
}
<form class="fupld" action="@Url.Action("upload")" id="fupld" method="post">
<div class="dz-message">Upload</div>
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</form>
Despite successful uploads and error handling functioning correctly, the unwanted page refresh post-upload remains the only hurdle.
It is crucial to note that my server-side always returns Json without any redirections.
Despite attempting to prevent the page refresh by intercepting the submit event and using preventDefault, along with calling disable() on dropzone post-upload, the issue persists.
Any guidance on how to overcome this challenge would be greatly appreciated.
It is worth mentioning that this setup is utilizing .NET for file uploads.