What is the correct format for uploading images via /api/recipes/{slug}/image Update Recipe Image API call #4788
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.
-
|
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.
-
|
Ahh, okay, good to know. No worries on JS, you'll get no language hate from me! |
Beta Was this translation helpful? Give feedback.
-
Hi,
hope I'm right here as I believe that this is not an issue on your side.
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
data:image/webp;base64,and suffix;type=image/webpbut always get an internal server error.AxiosError {message: 'Request failed with status code 500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', config: {…}, request: ClientRequest, …}Uploading by the API
http://my server/docsworks and I'm able to create and patch my recipe using the API (see first 4 lines).I saved the image which originates from the JSON as binary to a file and can open it without any issues.
Hope someone can help.
and BTW: Great app. Thank you for your work!
and here the code piece (sorry that's JavaScript 🫢)
Beta Was this translation helpful? Give feedback.
All reactions