Skip to content

Commit 4b7902d

Browse files
simonwsimonw
authored
Create github-api-write.html
https://gist.github.com/simonw/7d806c0dc63a1d8f0ae1b20608cab98f
1 parent 8ad34e5 commit 4b7902d

File tree

1 file changed

+184
-0
lines changed

1 file changed

+184
-0
lines changed

‎github-api-write.html

+184
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>GitHub API File/Image Writer</title>
7+
<style>
8+
body {
9+
font-family: Arial, sans-serif;
10+
line-height: 1.6;
11+
color: #333;
12+
max-width: 800px;
13+
margin: 0 auto;
14+
padding: 20px;
15+
background-color: #f4f4f4;
16+
}
17+
h1 {
18+
color: #2c3e50;
19+
text-align: center;
20+
}
21+
form {
22+
background-color: #fff;
23+
padding: 20px;
24+
border-radius: 8px;
25+
box-shadow: 0 0 10px rgba(0,0,0,0.1);
26+
}
27+
label {
28+
display: block;
29+
margin-bottom: 5px;
30+
font-weight: bold;
31+
}
32+
input[type="text"], input[type="password"], select, textarea {
33+
width: 100%;
34+
padding: 8px;
35+
margin-bottom: 10px;
36+
border: 1px solid #ddd;
37+
border-radius: 4px;
38+
box-sizing: border-box;
39+
}
40+
button {
41+
background-color: #3498db;
42+
color: #fff;
43+
padding: 10px 15px;
44+
border: none;
45+
border-radius: 4px;
46+
cursor: pointer;
47+
font-size: 16px;
48+
}
49+
button:hover {
50+
background-color: #2980b9;
51+
}
52+
#clearImage {
53+
background-color: #e74c3c;
54+
}
55+
#clearImage:hover {
56+
background-color: #c0392b;
57+
}
58+
#result {
59+
margin-top: 20px;
60+
padding: 10px;
61+
border-radius: 4px;
62+
}
63+
#result:not(:empty) {
64+
background-color: #d4edda;
65+
border: 1px solid #c3e6cb;
66+
color: #155724;
67+
}
68+
</style>
69+
</head>
70+
<body>
71+
<h1>GitHub API File/Image Writer</h1>
72+
<form id="fileForm">
73+
<label for="token">GitHub Token:</label>
74+
<input type="password" id="token" required>
75+
76+
<label for="owner">Repository Owner:</label>
77+
<input type="text" id="owner" required>
78+
79+
<label for="repo">Repository Name:</label>
80+
<input type="text" id="repo" required>
81+
82+
<label for="path">File Path:</label>
83+
<input type="text" id="path" required>
84+
85+
<label for="contentType">Content Type:</label>
86+
<select id="contentType">
87+
<option value="text">Text</option>
88+
<option value="image">Image</option>
89+
</select>
90+
91+
<div id="textContent">
92+
<label for="content">File Content:</label>
93+
<textarea id="content" rows="10"></textarea>
94+
</div>
95+
96+
<div id="imageContent" style="display:none;">
97+
<label for="image">Select Image:</label>
98+
<input type="file" id="image" accept="image/*">
99+
<button type="button" id="clearImage">Clear Image</button>
100+
</div>
101+
102+
<button type="submit">Create File/Upload Image</button>
103+
</form>
104+
105+
<div id="result"></div>
106+
107+
<script>
108+
const contentTypeSelect = document.getElementById('contentType');
109+
const textContent = document.getElementById('textContent');
110+
const imageContent = document.getElementById('imageContent');
111+
const clearImageBtn = document.getElementById('clearImage');
112+
const imageInput = document.getElementById('image');
113+
114+
contentTypeSelect.addEventListener('change', function() {
115+
if (this.value === 'text') {
116+
textContent.style.display = 'block';
117+
imageContent.style.display = 'none';
118+
} else {
119+
textContent.style.display = 'none';
120+
imageContent.style.display = 'block';
121+
}
122+
});
123+
124+
clearImageBtn.addEventListener('click', function() {
125+
imageInput.value = '';
126+
});
127+
128+
document.getElementById('fileForm').addEventListener('submit', function(e) {
129+
e.preventDefault();
130+
131+
const token = document.getElementById('token').value;
132+
const owner = document.getElementById('owner').value;
133+
const repo = document.getElementById('repo').value;
134+
const path = document.getElementById('path').value;
135+
const contentType = document.getElementById('contentType').value;
136+
137+
const url = `https://api.github.com/repos/${owner}/${repo}/contents/${path}`;
138+
139+
let content;
140+
if (contentType === 'text') {
141+
content = document.getElementById('content').value;
142+
uploadToGitHub(url, token, btoa(content));
143+
} else {
144+
const file = document.getElementById('image').files[0];
145+
if (file) {
146+
const reader = new FileReader();
147+
reader.onload = function(e) {
148+
content = e.target.result.split(',')[1]; // Get base64 data
149+
uploadToGitHub(url, token, content);
150+
};
151+
reader.readAsDataURL(file);
152+
} else {
153+
document.getElementById('result').innerHTML = 'Please select an image file.';
154+
}
155+
}
156+
});
157+
158+
function uploadToGitHub(url, token, content) {
159+
fetch(url, {
160+
method: 'PUT',
161+
headers: {
162+
'Authorization': `token ${token}`,
163+
'Content-Type': 'application/json',
164+
},
165+
body: JSON.stringify({
166+
message: 'Create file/image via API',
167+
content: content
168+
})
169+
})
170+
.then(response => response.json())
171+
.then(data => {
172+
if (data.content) {
173+
document.getElementById('result').innerHTML = `File/Image created successfully. <a href="${data.content.html_url}" target="_blank">View file</a>`;
174+
} else {
175+
document.getElementById('result').innerHTML = `Error: ${JSON.stringify(data)}`;
176+
}
177+
})
178+
.catch(error => {
179+
document.getElementById('result').innerHTML = `Error: ${error.message}`;
180+
});
181+
}
182+
</script>
183+
</body>
184+
</html>

0 commit comments

Comments
 (0)