In my interface project, I want to take a screenshot of the current screen and create an issue in the related repository of the project on GitHub with a filled-in title and description. I tried to write a service that does this. As a result of my research, I found that I need to use ‘/gists’ to add an image to the issue.
I create a URL using Gist. However, in the issue, this URL appears broken. When I visit the URL, I encounter base64. Base64 gives me the image itself. How can I display an image created with /gist in an issue without it appearing broken?
Here is my code.
app.post('/create-issue',upload.single('file'), async (req, res) => {
const file = req.file;
const {title,issue} = req.body;
if (!file) return res.status(400).send('No file uploaded.');
try {
const filePath = path.join(__dirname, 'uploads', file.filename);
const fileContent = fs.readFileSync(filePath);
const response = await githubApi.post('/gists', {
description: 'Issue image upload',
public: true,
files: {
[file.originalname]: {
content: 'data:image/png;base64,'+fileContent.toString('base64'),
},
},
});
// const gistUrl = response.data.html_url;
const imageFile = response.data.files[file.originalname];
const imageUrl = imageFile.raw_url;
fs.unlinkSync(filePath);
const issueBody = `${issue}nn`;
try {
const _resp = await githubApi.post(`/repos/${GITHUB_ORG}/${GITHUB_REPO}/issues`, {
title: title,
body: issueBody,
});
res.json(_resp.data);
} catch (error) {
console.error('Error creating issue:', error.response.data);
res.status(500).send('Failed to create issue.');
}
} catch (error) {
console.error('Error uploading image:', error.response.data);
res.status(500).send('Failed to upload image.');
}
});
Currently, when I try to create an issue, it looks like this
I thought about creating a new repository and uploading the images there, but I don’t want a repository that only contains images. When I tried this, I encountered the following error:
Error uploading image: {
message: 'Could not create file: Changes must be made through a pull request.',
documentation_url: 'https://docs.github.com/articles/about-protected-branches',
status: '409'
}
I want the link created with Gist to be displayed as an image in the issue.
I couldn’t solve my problem using the /gist service. Therefore, since I didn’t want to use third-party services like Imgur, I preferred to create a new repository and push the images to this repository. However, when I tried to push to the main or master branches, I encountered an error because those branches were protected. So, I created a new branch and pushed to that branch. With the download_url information returned in the response, I was able to add the image to the issue without any issues.
app.post('/create-issue',upload.single('file'), async (req, res) => {
try{
const file = req.file;
const {title,issue} = req.body;
const unique = Date.now()
if (!file) return res.status(400).send('File not uploaded');
else if (!title) return res.status(400).send('Title is required');
else if (!title) return res.status(400).send('Comment is required');
const filePath = path.join(__dirname, 'uploads', file.filename);
const fileContent = fs.readFileSync(filePath);
try {
const fileNameWithUnique = `${path.basename(file.originalname, path.extname(file.originalname))}-${title}${path.extname(file.originalname)}.png`;
const data = {
message: `${unique}-${title}.png added`,
content: fileContent.toString('base64'),
branch:'image'
};
const response = await githubApi.put(`/repos/${process.env.GITHUB_ORG}/${process.env.GITHUB_IMAGE_REPO}/contents/${fileNameWithUnique}`, data);
const imageUrl = response?.data?.content?.download_url || '';
if(!imageUrl) res.status(500).send('Image source not found');
const issueBody = `nnnn${issue}`;
try {
const _resp = await githubApi.post(`/repos/${process.env.GITHUB_ORG}/${process.env.GITHUB_REPO}/issues`, {
title: title,
body: issueBody,
});
fs.unlinkSync(filePath);
res.json(_resp.data);
} catch (error) {
fs.unlinkSync(filePath);
console.error('Error creating issue:', error.response.data);
res.status(500).send('Failed to create issue.');
}
} catch (error) {
fs.unlinkSync(filePath);
console.error('Error uploading image:', error);
res.status(500).send('Failed to upload image.');
}
}catch(err){
res.status(500).send('Something went wrong');
}
});
You have to use two steps to publish an image to a gist so that this image could be used in html <image /> tag.
- Create a regular gist
- Checkout your gist as a git repo: https://gist.github.com/:user/:hash.git
then add and commit an image file as you normally would with a regular git repo.
Now you need to retrieve raw image url. This url returns correct content type and can be used when creating an issue.
To find raw image url, you can call this API:
/gists/:gist-id
where gist-id is the id returned when you created gist.
The response of the above API call will contain raw_url for your file:
"files": {
"image.pgn": {
"raw_url": "https://gist.githubusercontent.com/.../image.png"
}
You will notice in the response JSON for the gist that the content of the file in not base64 encoded. It is raw image bytes.
2