title: How to prevent page from refreshing after JavaScript fetch post request?
body: <p>I'm sending a file from the client to a Flask API.
  I've tried doing e.preventDefault(), e.stopPropagation(), and return false for &quot;onsubmit&quot; on the form, but it still refreshes the page
  I need the web to hold onto some information the API will send back but it disappears after the page refreshes. I've tried using local storage to store the data but it goes away when the page refreshes. Sorry if its a stupid question :pray:</p>
  <h1>Javascript</h1>
  <pre><code>const form = document.querySelector(&quot;#upload-form&quot;);
  const uploadBtn = document.querySelector(&quot;#upload-btn&quot;);
  const uploadInp = document.querySelector(&quot;#upload-input&quot;);
  
  const sendFile = async () =&gt; {
    let formData = new FormData();
    formData.append(&quot;file&quot;, uploadInp.files[0]);
    await fetch(apiPOST, {
      method: &quot;POST&quot;,
      body: formData,
    })
      .then((res) =&gt; res.json())
      .then((json) =&gt; {
        console.log(json);
      })
      .catch((err) =&gt; console.log(err));
  };
  
  uploadBtn.addEventListener(&quot;click&quot;, (e) =&gt; {
    e.preventDefault();
    sendFile();
  });
  </code></pre>
  <h1>HTML</h1>
  <pre><code>&lt;form id=&quot;upload-form&quot; enctype=&quot;multipart/form-data&quot; method=&quot;post&quot; onsubmit=&quot;return false&quot;&gt;
       &lt;label for=&quot;upload-input&quot; class=&quot;btn&quot;&gt;Upload File&lt;/label&gt;
       &lt;input type=&quot;file&quot; id=&quot;upload-input&quot; name=&quot;upload-input&quot; accept=&quot;.pptx&quot;/&gt;
       &lt;!-- &lt;button id=&quot;upload-btn&quot;&gt;Upload&lt;/button&gt; --&gt;
       &lt;input type=&quot;submit&quot; id=&quot;upload-btn&quot; value=&quot;Upload&quot; /&gt;
  &lt;/form&gt;
  </code></pre>