Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Systematic refresh after submting a formdata with files in js #3004

Open
dpierru opened this issue Sep 14, 2024 · 1 comment
Open

Systematic refresh after submting a formdata with files in js #3004

dpierru opened this issue Sep 14, 2024 · 1 comment

Comments

@dpierru
Copy link

dpierru commented Sep 14, 2024

I'm submitting a bug repport

[x] Bug report  <!-- Please search GitHub for a similar issue or PR before submitting -->
[ ] Feature request
[ ] Documentation issue or request
[ ] Other: <!-- Please describe: -->

Current behavior

When I submit a form containing a file in js, event with "preventDefault", the page is automatically reloaded.
Same with axios and fetch and when the server response is ok or not.
If more than one file are openned with liveServer, even on differents navigator, ALL are reloading in the same time when the server response comes.

Here is a simple html file to reprocude the problem.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- cdn axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    
    <form>
        <textarea name="content" id="content"></textarea>
        <input type="file" name="icon" id="icon">
        <button>Submit !</button>
    </form>


    <script>
        const form = document.querySelector('form');
        form.addEventListener('submit', (e) => {
            e.preventDefault();
            const formData = new FormData(form);
            // send with axios, same behavior with fetch. 
            axios.post('https://127.0.0.1:8000/api/generation/create', formData)
            .then(response => console.log(response))
            .catch(error => console.error(error));
        });
    </script>

</body>
</html>

Expected behavior

No reload if e.preventdefault is present while I submit the form with my js.

Environment

Backend created in php 8.2.1, using Symfony 7.1

Browser:

- [x] Chrome (desktop) Version 128.0.6613.138 (Build officiel) (64 bits)
- [x] Firefox version 130.0 (64 bits)
- [ ] Safari (desktop) version XX
- [ ] IE version XX
- [ ] Edge version XX

For Tooling issues:

- Live Server: v5.7.9
- Platform: Windows
- Visual Studio Code: 1.93.0 4849ca9bdf9666755eb463db297b69e5385090e3 x64
@blackest
Copy link

If I was to hazard a guess you are saving files to the project folder. You can have a folder in that folder which you can configure live server to ignore, but if you just add a file to the project folder even if its not used in your application it will trigger the reload event. Did that yesterday and found the answer. It was really weird because things worked as expected on other browsers but i wasn't saving to the project folder either.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@blackest @dpierru