Bounties /Pin to ProfileBookmark

GitHub API create file not creating when using input box

Why isn’t my file created when I use an input box for the file name?

Hi, I’m trying to create a webpage where I can enter a name into an input box, and when I click a button, it will take the value from the input box and use that as the file name. However, my code doesn’t seem to work once I put a variable into the “path” attribute.

I tested with some simple code to test whether it had something to do with the input box, but that seemed to work: 

But once I added the API code, it didn’t create a file in the repo:

Any help is appreciated, thanks!

to post a answer
January 21st, 2023Back-endFront-endHTMLJavaScript

1 Answer(s)

@jordan-thirkleJan 26, 2023 — Problem
It looks like the problem with your code is that you're trying to use the Octokit library for interacting with the GitHub API, but you're not actually importing it correctly.

Instead of using import { Octokit } from "";,
You should use a package manager such as NPM to install the library and import it into your code.

1. Install Octokit by running npm install @octokit/rest in your terminal.
2. Import Octokit in your javascript file like this:
const { Octokit } = require("@octokit/rest");
3. Use the Octokit instance to make API calls:
const octokit = new Octokit({
auth: 'iputmypersonaltokenhere'

const filename = document.getElementById("filename").value;

octokit.request('PUT /repos/{owner}/{repo}/contents/{path}', {
owner: 'Skoolgq',
repo: '',
path: name + ".html",
message: 'Test commits for GitHub API',
committer: {
name: 'Skool Developers',
email: '[email protected]'
content: 'bXkgbmV3IGZpbGUgY29udGVudHM='

Note:The above code is using the request method, which is asynchronous. It should be used with await keyword or within an async function.

Another Note: You should use the token of a GitHub account with the correct permissions to access the repository where you want to create a file.

Hope this helps solve your issue :).
@1Thanks a lot for your help!


Help @1 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with Github
about: ({
version: 0.1.7 BETA 2.4,
whats_new: article editor v2,
up_next: tip code demos,
coming_soon: embeddable tipping,
social: @webDeveloperHQ

legal: ({
terms: of use,
privacy: policy
changelog: (
version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh

version: 0.1.5,
notes: added pins + new badge

version: 0.1.4,
notes: home refresh + tools
recent_tips: (
tipper: @JohnDavis,
amount: 250 SATS,
source: article

tipper: @Megan0910,
amount: 1000 SATS,
source: article

tipper: @JohnDavis,
amount: 250 SATS,
source: article