title: How to submit file uploads in Next.js with Netlify forms?
body: <p>I'm trying to create a JSX element that (I guess) uses AJAX to upload media content to Netlify's built-in Form feature. For whatever reason, when I test it on local + live production, the &quot;thank-you&quot; page that is supposed to return after a successful upload does not succeed.</p>
  <p>I'm not sure why Netlify's Form documentation is so limited.</p>
  <p><a href="https://docs.netlify.com/forms/setup/#file-uploads" rel="nofollow noreferrer">https://docs.netlify.com/forms/setup/#file-uploads</a></p>
  <p>Submit.js</p>
  <pre><code>/* eslint-disable */
  import styles from '../styles/Submit.module.css'
  import Credit from './credit'
  import Licensing from './licensing'
  import Footer from './footer'
  import React, { useState } from 'react';
  
  if ( typeof window !== 'undefined') {
    function encode(data) {
      return Object.keys(data)
        .map(
          (key) =&gt;
            encodeURIComponent(key) + &quot;=&quot; + encodeURIComponent(data[key])
        )
        .join(&quot;&amp;&quot;);
    }
    
    const handleSubmit = (event) =&gt; {
      event.preventDefault();
      fetch(&quot;/&quot;, {
        method: &quot;POST&quot;,
        headers: { &quot;Content-Type&quot;: &quot;multipart/form-data&quot; },
        body: encode({
          &quot;form-name&quot;: event.target.getAttribute(&quot;name&quot;),
          ...name,
        }),
      })
        .then(() =&gt; navigate(&quot;/thank-you/&quot;))
        .catch((error) =&gt; alert(error));
    };
  }
  
  export default function Submit() {
          return (
            &lt;&gt;
                &lt;form className={styles.container} name=&quot;Fan Submissions&quot; data-netlify data-netlify-recaptcha=&quot;true&quot; type=&quot;file&quot;&gt;
                &lt;input type=&quot;hidden&quot; name=&quot;Fan Submissions&quot; value=&quot;Fan Submissions&quot; /&gt;
                  {/* &lt;p class=&quot;hidden&quot;&gt;
                    &lt;label&gt;Don’t fill this out if you’re human: &lt;input name=&quot;bot-field&quot; /&gt;&lt;/label&gt;
                  &lt;/p&gt; */}
                  &lt;br /&gt;
                  &lt;h1&gt;SHARE YOUR CONTENT&lt;/h1&gt;
                  &lt;p&gt;Got sick highlights bro? Let us get your content out there.&lt;/p&gt;
                  &lt;br /&gt;
                  &lt;br /&gt;
                  &lt;p className={styles.p}&gt;PASTE THE URL TO YOUR CONTENT HERE&lt;/p&gt;
                  &lt;input className={styles.input} type=&quot;text&quot; id=&quot;url&quot;  name=&quot;url&quot; placeholder=&quot;https://&quot; /&gt;
                  &lt;br /&gt;
                  {/* &lt;br /&gt; */}
                  {/* &lt;input className={styles.inputSubmit} id=&quot;imageInput&quot; type=&quot;file&quot; accept=&quot;video/*&quot; /&gt; */}
                  {/* &lt;button type=&quot;submit&quot; className={styles.button}&gt;Submit
                  &lt;/button&gt; */}
                  &lt;p className={styles.p}&gt;OR UPLOAD VIDEO&lt;/p&gt;
                  &lt;div className={styles.inputSubmit}&gt;
                    {/* or upload video&lt;span id=&quot;spanUpload&quot; className={styles.none}&gt; from your phone&lt;/span&gt; */}
                    &lt;input type=&quot;file&quot; id=&quot;file&quot; name=&quot;file&quot; accept=&quot;video/mp4, video/webm, image&quot;&gt;&lt;/input&gt;
                    {/* &lt;input type=&quot;submit&quot; /&gt; */}
                  &lt;/div&gt;
                  {/* &lt;div id=&quot;file&quot; class=&quot;btn tertiary dark&quot; onclick=&quot;document.querySelector('input#file').click();&quot; style=&quot;cursor: pointer&quot;&gt;
                    or upload video&lt;span class=&quot;mobile-only&quot;&gt; from your phone&lt;/span&gt;
                  &lt;/div&gt; */}
                  
                  &lt;br /&gt;
                  &lt;br /&gt;
                  {/* &lt;button className={styles.submitButton} type=&quot;submit&quot;&gt;Submit&lt;/button&gt; */}
                  &lt;br /&gt;
                  {/* &lt;div className={styles.emojiDivCredit}&gt;
                    &lt;Link href=&quot;/credit&quot;&gt;
                        &lt;a&gt;&lt;/a&gt;
                      &lt;/Link&gt;
                    &lt;/div&gt; */}
                    {/* &lt;/form&gt; */}
              &lt;Credit /&gt;
              &lt;Licensing /&gt;
              &lt;div data-netlify-recaptcha=&quot;true&quot;&gt;reCAPTCHA&lt;/div&gt;
              &lt;button className={styles.submitButton} type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
              &lt;br /&gt;
              &lt;br /&gt;
              &lt;div className={styles.socialIcons}&gt;
                &lt;a rel=&quot;noreferrer&quot; target=&quot;_blank&quot; href=&quot;https://tiktok.com/@bjjhighlights&quot;&gt;
                  &lt;span className={styles.brandSocialIcon}&gt;
                    &lt;img src=&quot;/images/tiktok_logo.svg&quot; alt=&quot;TikTok logo&quot; width={24} height={24} /&gt;
                  &lt;/span&gt;
                &lt;/a&gt;
                &lt;a rel=&quot;noreferrer&quot; target=&quot;_blank&quot; href=&quot;https://www.instagram.com/bjjhighlights_/&quot;&gt;
                  &lt;span className={styles.brandSocialIcon}&gt;
                    &lt;img src=&quot;/images/IG_logo.svg&quot; alt=&quot;Instagram logo&quot; width={24} height={24} /&gt;
                  &lt;/span&gt;
                &lt;/a&gt;
                &lt;a rel=&quot;noreferrer&quot; target=&quot;_blank&quot; href=&quot;https://story.snapchat.com/@bjjhighlights&quot;&gt;
                  &lt;span className={styles.brandSocialIcon}&gt;
                    &lt;img src=&quot;/images/snap_logo.svg&quot; alt=&quot;Snapchat logo&quot; width={24} height={24} /&gt;
                  &lt;/span&gt;
                &lt;/a&gt;
                &lt;a rel=&quot;noreferrer&quot; target=&quot;_blank&quot; href=&quot;https://www.youtube.com/channel/UCzL9I_dlxqEN7r3IEtygLZA/featured&quot;&gt;
                  &lt;span className={styles.brandSocialIcon}&gt;
                    &lt;img src=&quot;/images/YT_logo.svg&quot; alt=&quot;YouTube logo&quot; width={36} height={36} /&gt;
                  &lt;/span&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;/form&gt;
              {/* &lt;hr /&gt;
              &lt;h3 className={styles.progress}&gt;Uploaded {progress} %&lt;/h3&gt; */}
              {/* &lt;Footer /&gt; */}
          &lt;/&gt;
          )
  }
  </code></pre>
  <p>Index.js</p>
  <pre><code>import Head from 'next/head'
  import styles from '../styles/Submit.module.css'
  import Submit from './submit'
  import Logo from '../components/Logo'
  
  
  
  
  export default function Home() {
    return (
      &lt;div&gt;
        &lt;Head&gt;
          &lt;title&gt;#bjjhighlights&lt;/title&gt;
          &lt;meta 
            name=&quot;description&quot; 
            content=&quot;Got sick highlights bro? Let us get your content out there.&quot; 
            key=&quot;description&quot;
          /&gt;
          &lt;meta property=&quot;og:title&quot; content=&quot;#bjjhighlights&quot; /&gt;
          &lt;meta
            property=&quot;og:description&quot;
            content=&quot;Got sick highlights bro? Let us get your content out there.&quot;
          /&gt;
          &lt;meta
            property=&quot;og:image&quot;
            content=&quot;/images/logo.jpeg&quot;
          /&gt;
          &lt;link rel=&quot;icon&quot; href=&quot;/Logo.jpg&quot; /&gt;
          &lt;link rel=&quot;shortcut icon&quot; href=&quot;/favicon.ico&quot; /&gt;
        &lt;/Head&gt;
        &lt;div className={styles.logo}&gt;
          &lt;Logo /&gt;
        &lt;/div&gt;
        &lt;Submit /&gt;
        {/* &lt;h1 className=&quot;title&quot;&gt;
  
        &lt;/h1&gt; */}
        
        {/* &lt;footer className={styles.footer}&gt;
          &lt;a
            href=&quot;https://vercel.com?utm_source=create-next-app&amp;utm_medium=default-template&amp;utm_campaign=create-next-app&quot;
            target=&quot;_blank&quot;
            rel=&quot;noopener noreferrer&quot;
          &gt;
            Powered by{' '}
            &lt;span className={styles.logo}&gt;
              &lt;Image src=&quot;/vercel.svg&quot; alt=&quot;Vercel Logo&quot; width={72} height={16} /&gt;
            &lt;/span&gt;
          &lt;/a&gt;
        &lt;/footer&gt; */}
      &lt;/div&gt;
    )
  }
  </code></pre>