ERROR: “Filereader is not found” - works in emulat...
# 🤝help
r
I have an execute code card that runs a script containing an imageDownload function that downloads an image from the Google Maps Static API. It works perfectly in the emulator - but after publishing, it fails with the error message “FileReader is not defined”. My code contains the line: const reader = new FileReader(); I don’t know why the function would be available in the development environment but not in production - but can someone please check this and fix it ASAP so I can demo my bot to a potential client??? Thanks. Here’s the entire function that uses FileReader(): async function downloadImage(url: string): Promise { console.log('Downloading image from URL:', url); try { const response = await fetch(url); // console.log('Image download response:', response); const blob = await response.blob(); return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onloadend = () => resolve(reader.result as string); reader.onerror = reject; reader.readAsDataURL(blob); }) .then(dataUrl => { const base64Image = dataUrl.split(",")[1]; console.log("Uploading image with length: ["+ base64Image.length + "]") return uploadImage(env.imgbbkey, base64Image); }) .then(imageUrl => { console.log(
${imageUrl} downloaded successfully.
); return imageUrl; }); } catch (error) { console.error(
Error in downloadImage: ${error}
); throw error; } }
@early-train-33247 Hey - I hate to keep bugging you - but this one is more important/more urgent than anything else I’ve posted and I was hoping that you could get this in front of the person or team that can fix it as soon as possible? Thanks 🙏!
@acceptable-kangaroo-64719 I created this thread last night. Let me know if you need anything from me to help troubleshoot this or test a fix.
a
@colossal-activity-12523 do you know if FileReader obj are blocked in channel web? It feels like the kind of thing that would require an integration
r
@acceptable-kangaroo-64719 @User Do we have an ETA on this? Has anyone started looking at it yet?
e
Hey @rapid-manchester-41665, we talked about this today! What happens is that the Code functions don't actually have access to the FileReader method. The bot can't process media like this, and it shouldn't work in the Emulator!
What is your use case? You want to download an map screenshot from Google Maps and display it with an Image card?
r
@User I want to download the image file from Google Maps and then Upload to a free hosting site so I can attach a URL to it in my pushover notification and the e-mail message that I send to the owner of the company. I do also display it in the chatbot - but simply displaying it in the bot doesn’t fulfill my need.
I can’t just use the Google URL because it requires my API key.
If you can give me an alternate command to download from Google and then upload to imgBB, I’d be okay with swapping out the code I’m using now - but the easiest thing (for me) would be for you to add that function to the production environment (since it’s already in Dev and works for my use case). 😬
e
I understood your requirements! Hey @colossal-egg-20510 or @User, could you help with some workaround suggestions?
r
So, I feel like I’m kind of in limbo here right now. Are you considering updating production to make this function available? You said “the bot can’t process media like this” - but it clearly does process it just fine for my use case. Did I mention that this is the only thing stopping me from demonstrating my bot to a potential customer?
Umm… hello? Anybody? Are you discussing this issue internally? Or just done with it? This still works in Development and is still broken in Production. When should I expect to get a response?
c
@rapid-manchester-41665 The reason @early-train-33247 said
the bot can’t process media like this
is because the function you are calling is available in browsers but not in our runtime environment. We are currently working on a solution to upload file and store them. In the mean time, you can try using axios to download and upload the content from one server to the other without using the
FileReader
api.
r
I’m not great with Typescript - and with the development environment functionality not matching the production functionality, it seems I can’t even rely on trial and error. So can you please provide an alternative method that can accomplish this download from one api/upload to another that will work in your production environment?
c
If your using
imgBB
you can skip the step of downloading the image. You could just provide the url to
imgBB
. This example should work for you. Make sure to replace the
apikey
and
workflow variables
for your own. 🚀
Copy code
const downloadUrl = workflow.imageUrl
const uploadUrl = `https://api.imgbb.com/1/upload?key=${env.apiKey}`
var bodyFormData = new FormData();
bodyFormData.append('image', downloadUrl)
await axios.post(uploadUrl, bodyFormData)
r
I really don’t like the idea of sending my Google APIKey to a 3rd party. Thanks for offering that up - but I think I’m going to need to keep looking - or perhaps create my own Lambda function and API that I can call to work around the BotPress limitations. It’s frustrating that I spent half a day getting it to work perfectly in the development environment and then to find out it doesn’t work in productions and that I’m going to have to jump through hoops to make the same thing work in production.
32 Views