L'API GitHub renvoie 422 entité non traitable lors de la transmission de données

Question

J'ai essayé d'envoyer un fichier à mon référentiel github via le processus HTML mais cela a échoué avec l'erreur 422. J'ai l'impression que mes chiffres sont bons, mais... non. Je suis débutant dans cette partie et je ne trouve pas de solution à mon problème.

Dans cet article : https://levelup.gitconnected.com/how-to-upload-images-to-github-via-javascript-59163b8fff27

Quelqu'un a écrit sur le fractionnement des données en utilisant base64 qui pourrait être une piste mais je ne sais pas comment l'encoder dans mon cas. Voici mes tentatives et mes échecs ! ! !

// REACT
import React from "react"

export default function ApiGithubToken() {
  const load = e => {
    if(e.target !== null) {
      let files = e.target.files;
      if(files.length > 0) {
        if(files[0] !== null) {
          const git= {
            owner : 'knupel',
            repo: 'gatsby_react_lab',
            path: `media/test/`,
            token: process.env.GATSBY_TOKEN_GITHUB,
          }
          upload_file(git, files[0]);
        }
      }
    }
  }
  return (
    <div>
      <p>Sélectionner le fichier à déposer sur Github / Select your file to upload in Github</p>
      <input type="file" name="input" onChange={load}/>
      <br/>
      <br/>
      <button type="submit">CHARGEZ</button>
    </div>
  )
}

const upload_file = async (git: { owner: string; repo: string; path: string; token: string | undefined; }, data: any) => {
  const res = await fetch(`https://api.github.com/repos/${git.owner}/${git.repo}/contents/${git.path}`,
    {
      method: "PUT",
      headers: {
        Accept: "application/vnd.github+json",
        Authorization: `Bearer ${git.token}`
      },
      body: JSON.stringify({
        message: "Téléversement de votre fichier",
        content: data
        // content: data.split('base64,')[1]
        // content: data.content
      })
    }
  );
  return await res.json();
}

et message d'erreur

Answer 1

J'ai mis à jour le code comme vous l'avez suggéré @AKX mais l'erreur renvoyée est la même erreur 422

// REACT
import React from "react"
// APP
import Layout from "../../components/struct/layout"


export default function ApiGithubToken() {
  return (
    

      
      
      
Sélectionner le fichier à déposer sur Github / Select your file to upload in Github
       load(event)}/>
      

      

      CHARGEZ
    
  )
}

function load(event:any) {
  if(event !== undefined && event.target.type === "file") {
    const file =  event.target.files[0];
    console.log("file",file);
    const reader = new FileReader();

    if (file) {
      reader.readAsDataURL(file);
    }

    reader.addEventListener("load", () => {
      const git= {
        owner : 'knupel',
        repo: 'gatsby_react_lab',
        path: `media/test/`,
        token: process.env.GATSBY_TOKEN_GITHUB,
      }
      upload_file(git , reader.result);
    }, false);
  }
}

const upload_file = async (git: { owner: string; repo: string; path: string; token: string | undefined; }, data: any) => {
  let final_path = `https://api.github.com/repos/${git.owner}/${git.repo}/contents/${git.path}`;
  console.log("data", data);
  const res = await fetch(final_path,
    {
      method: "PUT",
      headers: {
        Accept: "application/vnd.github+json",
        Authorization: `Bearer ${git.token}`
      },
      body: JSON.stringify({
        message: "Téléversement de votre fichier",
        content: data,
        // content: data.split('base64,')[1]
        // content: data.content
      })
    }
  );
  return await res.json();
}


export const Head = () => {
    <>
        
        
        
    
}

C'est une bonne chose, maintenant les documents sont approuvés, je crois que ça fait du bien