禁用Dropzone页面刷新

Question

I have been searching for a few days and have found multiple solutions how to reload page after upload and so on. My issue is that after an upload the page automatically reloads and I do not want this.

I am not sure what I am missing here but this is a pretty standard setup from dropzone home page.

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>

Everything is done as expected. Files are uploaded, errors are displayed etc.

The only thing that I am trying to work around is the fact that after the successful upload the page refreshes and I don't want this.

My server side always returns Json and there is no redirect anywhere.

I have tried to hook into submit event and call preventDefault along with calling the dropzone disable() after successful upload but the page still refreshes.

Any suggestions would be appreciated.

Note this is using .NET to upload.

Answer 1

Have you tried to stopPropagation on the event? together with the preventDefault https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation