What is the correct format for uploading images via /api/recipes/{slug}/image Update Recipe Image API call #4788
Answered
by
Christian-Me
Christian-Me
asked this question in
Q&A
-
|
Hi, I'm writing a script to reformat and add recipes from my old app (Menu Planner) to Mealie. All works now except uploading the cover image. The image is in Base64 JPG form the JSON Menu Planner can export. I tried as JPG and converted to WEBP, with and without prefix
Uploading by the API Hope someone can help. and BTW: Great app. Thank you for your work! and here the code piece (sorry that's JavaScript 🫢) const AXIOS_PUT_DATA_OPTION = {
baseURL: BASE_URL,
headers: {
'accept' : 'application/json',
'Content-Type' : 'multipart/form-data',
'Authorization': `Bearer ${token}`
}};
async function makePutRequest(path, data) {
return http.put(path,data,AXIOS_PUT_DATA_OPTION)
.then((response) => {
return response;
})
.catch((error) => {
console.log(error);
return error.response;
});
}
async function updateImage(slug, data) {
return await makePutRequest('/api/recipes/'+slug+'/image',data)
}
mealieData = {
image : mpRecipe.Image, // + ";type=image/jpeg",
extension : "jpg"
};
response = await updateImage(currentSlug, mealieData); |
Beta Was this translation helpful? Give feedback.
Answered by
Christian-Me
Dec 30, 2024
Replies: 2 comments 1 reply
-
|
The API accepts the image as bytes, not as a base64 string. If your export can only output a base64 string, you'll want to convert it before sending it to Mealie: function base64ToBytes(inputString) {
const binaryString = atob(inputString);
const bytes = new Uint8Array(binaryString.length);
for (let i = 0; i < len; i++) {
bytes[i] = binaryString.charCodeAt(i);
}
return bytes;
}That should work, though I haven't actually tried this, so let me know! |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Thank you for your fast answer and sorry for bothering you with JavaScript but this is the only language, except C++, i'm familiar with. to make a long (4h) story short - after a lot of digging as this is my first time dealing with http APIs - here is the solution import FormData from 'form-data';
const formData = new FormData();
formData.append('image',Buffer.from(mpRecipe.Image, 'base64'), {
filename: 'image.jpg',
contentType: 'image/jpeg',
});
formData.append('extension','jpg')
response = await axios.put(BASE_URL+'/api/recipes/'+currentSlug+'/image', formData, {
headers: {
...formData.getHeaders(),
'accept' : 'application/json',
'Authorization': `Bearer ${token}`,
},
});The problem was that to put Last question: Should I convert the image into webp, as I already figured out the code or is the original JPG fine? |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
Ahh, okay, good to know. No worries on JS, you'll get no language hate from me! |
Beta Was this translation helpful? Give feedback.
Answer selected by
Christian-Me
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you for your fast answer and sorry for bothering you with JavaScript but this is the only language, except C++, i'm familiar with.
to make a long (4h) story short - after a lot of digging as this is my first time dealing with http APIs - here is the solution