javascript - Disable dropzone page refresh - Stack Overflow

admin管理员组

文章数量:1415696

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('queueplete', () => {
            }),
                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.

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('queueplete', () => {
            }),
                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.

• javascript
• ajax
• dropzone.js

Share Improve this question Follow edited Jun 26, 2018 at 10:32 AliK asked Jun 26, 2018 at 7:39 AliKAliK 1,08722 gold badges1414 silver badges3636 bronze badges 2

• Could you show your hmtl code ? – ToujouAya Commented Jun 26, 2018 at 8:30
• @ToujouAya Done – AliK Commented Jun 26, 2018 at 8:34

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

I'm super late to this party... but for me, i was facing the same issue. after post my page was refreshing... the issue turned out to be that the button i was using to start the upload didn't have type="button" so ultimately the dropzone post was running, as well as the button doing a normal submit on the form!

this only occurs if you are using your own form as the dropzone (so that you can post other inputs too).

I hope this helps someone who might be facing the same issue.

After constant changes to javascript adding/removing modifying event handlers and other functions turns out the problem was the fact that BrowserLink was turned on in Visual Studio. Once I turned off BrowserLink all seems to be ok, so it seems that browserlink reloads the page after a 200 response.

In addition to BrowserLink, CSS Hot reload and/or Auto build and refresh can also cause this issue, even if BrowserLink is disabled. If you're running into this while debugging from Visual Studio even while BrowserLink is disabled, try disabling CSS Hot Reload and Auto build and refresh (Tools -> Options -> ASP.NET Core).

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

Do this:

const {getRootProps} = useDropzone({noDragEventsBubbling: true});

More info here

本文标签： javascriptDisable dropzone page refreshStack Overflow