422 Unprocessable Entity when I PUT data on repository

[knupel]

Select Topic Area

Question

Body

I try to send file to my Github repo via a html process, but I fail with the error 422. I have the feeling that my data is good but... nooooo. I'm beginner in this part and I don't find a way to solve my problem.
Always is good but... that's fail on the error 422.
For information, I work on local.
Before post here I post too on stackoverflow : https://stackoverflow.com/questions/76231427/api-github-return-422-unprocessable-enty-when-the-data-is-passed

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


export default function ApiGithubToken() {
  return (
    <div>
      <Layout
        title="API Github token"
        link="true"
      >
      </Layout>
      <p>Sélectionner le fichier à déposer sur Github / Select your file to upload in Github</p>
      <input type="file" name="input" onChange={(event) => load(event)}/>
      <br/>
      <br/>
      <button type="submit">CHARGEZ</button>
    </div>
  )
}

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 = () => {
    <>
        <title>API Github Token</title>
        <meta name="author" content="Knupel" />
        <meta name="description" content="Mon petit laboratoire pour tester mes fonctions react, gatsby, javascript, typescript" />
    </>
}

I add a scree shot of my console error :

[airtower-luna]

I see two problems there:

• The PATH part (which says which file to create/update) of the URL you're building is a directory, not a file.
• If the file already exists, you need to provide an sha parameter in the payload (see the Create or update file contents docs).

[knupel]

hmmm, what you mean by redact the token ?

the XHR line

HTTP/2 422 Unprocessable Entity
server: GitHub.com
date: Sat, 13 May 2023 07:51:01 GMT
content-type: application/json; charset=utf-8
content-length: 149
x-oauth-scopes: public_repo
x-accepted-oauth-scopes: 
github-authentication-token-expiration: 2023-05-18 11:24:11 UTC
x-github-media-type: github.v3; format=json
x-github-api-version-selected: 2022-11-28
x-ratelimit-limit: 5000
x-ratelimit-remaining: 4995
x-ratelimit-reset: 1683966828
x-ratelimit-used: 5
x-ratelimit-resource: core
access-control-expose-headers: ETag, Link, Location, Retry-After, X-GitHub-OTP, X-RateLimit-Limit, X-RateLimit-Remaining, X-RateLimit-Used, X-RateLimit-Resource, X-RateLimit-Reset, X-OAuth-Scopes, X-Accepted-OAuth-Scopes, X-Poll-Interval, X-GitHub-Media-Type, X-GitHub-SSO, X-GitHub-Request-Id, Deprecation, Sunset
access-control-allow-origin: *
strict-transport-security: max-age=31536000; includeSubdomains; preload
x-frame-options: deny
x-content-type-options: nosniff
x-xss-protection: 0
referrer-policy: origin-when-cross-origin, strict-origin-when-cross-origin
content-security-policy: default-src 'none'
vary: Accept-Encoding, Accept, X-Requested-With
x-github-request-id: C1D1:2FE3:11ECE826:1214D82A:645F413C
X-Firefox-Spdy: h2

the second part of XHR

PUT /repos/knupel/gatsby_react_lab/contents/media/test/famille_23_2.jpg HTTP/2
Host: api.github.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/113.0
Accept: application/vnd.github+json
Accept-Language: fr,fr-FR;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate, br
Referer: http://localhost:8000/
Authorization: Bearer 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
Content-Type: text/plain;charset=UTF-8
Content-Length: 449854
Origin: http://localhost:8000
DNT: 1
Connection: keep-alive
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
TE: trailers

[knupel]

plus in the answer XHR
it's write

{
  "message": "content is not valid Base64",
  "documentation_url": "https://docs.github.com/rest/reference/repos#create-or-update-file-contents"
}

why is bad ?

[airtower-luna]

hmmm, what you mean by redact the token ?

I meant that you should replace it with *** or something similar. Unfortunately you didn't, so your token is now public (it's in the Authorization header of the request). You need to revoke it and create a new one. ⚠️

What's still missing is that body of the PUT request.

[knupel]

If my token became public, it can still to work, or I must imperatively create a new one ?

What you mean by something missing in the body of my PUT ?

[airtower-luna]

If my token became public, it can still to work, or I must imperatively create a new one ?

You MUST revoke the token immediately, otherwise anyone who reads this can write to your repositories and possibly do other nasty things (depending on the scopes). ⚠️

Then create a new one (and keep it secret) to do the things you want to do.

What you mean by something missing in the body of my PUT ?

The "body" of the request is the data you're uploading, in this case the JSON with the commit message and data. That's the thing the response says is invalid, so it's what we'd need to take a closer look at. What you posted are only the request and response headers.

[knupel]

I thounght keep my token secret. I put it in the .env and call it by process.env.GATSBY_TOKEN_GITHUB but may be it's bad method ?

headers: {
        Accept: "application/vnd.github+json",
        Authorization: `Bearer ${git.token}`
      },

So I go to change my token, now, like you suggest :) to avoid the bad thing !

And go to try to understand what you mean about my bad request for the body... but it's really not obvious to me. I'm a beginner in this part of code with API dealing.

[airtower-luna]

The problem isn't .env, the problem is that you posted the Authorization header (which includes the token) above, where anyone can read & copy it, without redacting it. 😉

And go to try to understand what you mean about my bad request for the body... but it's really not obvious to me. I'm a beginner in this part of code with API dealing.

This is not specific to APIs, it's general HTTP request and response structure. MDN has a good description here, I strongly recommend you read it: HTTP Messages.

In your case the body is the JSON data (with message and content) that you're trying to upload. And the 422 answer says something is wrong with it.

[knupel]

In your case the body is the JSON data (with message and content) that you're trying to upload. And the 422 answer says something is wrong with it.

But how know what is wrong ?

I change my token :)

[airtower-luna]

But how know what is wrong ?

The first step is to look at what's actually sent, that's why I keep asking about it. You should be able to get it from the network log. Saying what's wrong without seeing what is there is impossible. 😉

[knupel]

I've finally found the solution, why my file is wrong, I had to retier a first part data:.*base64,of the string by splitting or replace with regex detection. After that my file is uploaded like is wish.
Thx for your lights.

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}`;
  const regex = /data:.*base64,/;
  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.split('base64,')[1],
        content: data.replace(regex,""),
      })
    }
  );
  return await res.json();
}

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬