All topics

Can't read locally uploaded file in custom action

Tom Ireland

8 months ago

Over lunch, I'm trying to get my app to read a locally uploaded file to display a preview prior to upload to the server, so I understand I need to use the FileReader API via a custom action.

I can get event.target.files[0] via onchange event on my input (type is file and accepts jpg and png) and store that into a variable but when passing it as an argument in my custom action, I'm getting the following error:

Error in Custom Action TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

I don't see where I'm going wrong because if I log my variable to console before I pass it to my custom action, I can see the files data.

Here is the custom action:

function fileReader(file) {
const reader = new FileReader();
reader.readAsDataURL(file);
}

Any pointers? Let me know if you want the branch (and component URL) for a wee peek.
Can't read locally uploaded file in custom action
Max

8 months ago

I believe that is a Toddle limitation. I don't think you can store a blob in a variable. I came across this at some point, if I remember correctly. Can you pass it directly without storing it?
Tom Ireland

8 months ago

I did try getting event.target.files[0] and passing that as the custom action argument but I get the same error in the console. I'm triggering an event back to store the result in a variable, which should be a Base64 encoded string, which I know does work (from other tests in the past), but no dice with this. 😬
Thanks for replying btw. 😄
Max

8 months ago

Can you check if this works for you?

https://random_tests.toddle.site/file-upload-preview

https://toddle.dev/projects/random_tests/branches/main/components/file-upload-preview
Tom Ireland

8 months ago

Yeah, that works! I think it must be something with my custom action?
@Tom Ireland
Yeah, that works! I think it must be something with my custom action?
Max

8 months ago

I guess... Can you spot the difference? Or you could share your setup and I'll have a look
@Max
I guess... Can you spot the difference? Or you could share your setup and I'll have a look
Tom Ireland

8 months ago

Happy to share. See https://toddle.dev/projects/releasenotesapp/branches/image-component/components/content-block-image?mode=design&leftpanel=design&canvas-width=360&canvas-height=740&rightpanel=events

Your function looks a bit more fleshed out than mine. 😄
Max

8 months ago

Ah, in your action, you need to call ctx.triggerActionEvent() to return a value. An action cannot return a value
Tom Ireland

8 months ago

Ah! 🤦‍♂️ I should have re-read the docs first. I’ll give that a whirl in a bit. Thanks, Max.
💪1
Tom Ireland

8 months ago

Thanks for your help today, pal - gave you a wee shout out. https://discord.com/channels/972416966683926538/1278615614318968842/1278773470959767592
@Tom Ireland
Thanks for your help today, pal - gave you a wee shout out. https://discord.com/channels/972416966683926538/1278615614318968842/1278773470959767592
Max

8 months ago

Thank you and anytime 😊
👍1
Alex

8 months ago

Is this similar to @NoCode ProCode solution to create a blob variable using a line of JavaScript to create a url from the file event?
@Alex
Is this similar to @NoCode ProCode solution to create a blob variable using a line of JavaScript to create a url from the file event?
Tom Ireland

8 months ago

I think so but - from reading online - there are some differences between the two. Apparently, the blob url is not cleaned up by garbage collection unless you call it, whereas the data url is. I don't know what that means exactly but for this purpose, blob url would do the job I think and is a little simpler to implement if you're not au fait with reading JS (which I'm not). 😄 What do you think, @Max ?
@Tom Ireland
I think so but - from reading online - there are some differences between the two. Apparently, the blob url is not cleaned up by garbage collection unless you call it, whereas the data url is. I don't know what that means exactly but for this purpose, blob url would do the job I think and is a little simpler to implement if you're not au fait with reading JS (which I'm not). 😄 What do you think, @Max ?
Max

8 months ago

Hi Tom! I skimmed briefly through the video. He uses createObjectURL, which also works. And it works for more file types. But as you stated, you need to clean the memory yourself. I did not see in the video that he did that, but I might have missed it. If you don't clean up, this is a memory leak, meaning that your app will consume more memory the longer it is running. It should not be a big issue for a simple file upload, but it is good practice to clean up after yourself in JavaScript, as these things add up 🙂
@Max
Hi Tom! I skimmed briefly through the video. He uses createObjectURL, which also works. And it works for more file types. But as you stated, you need to clean the memory yourself. I did not see in the video that he did that, but I might have missed it. If you don't clean up, this is a memory leak, meaning that your app will consume more memory the longer it is running. It should not be a big issue for a simple file upload, but it is good practice to clean up after yourself in JavaScript, as these things add up 🙂
NoCode ProCode

8 months ago

I did not clean up after myself 😉
NoCode ProCode

8 months ago

You wanna call URL.revokeObjectURL(blobUrl); to clear it and maybe save them when generated in local storage or use a service worker to clean up for best practices 😉
@NoCode ProCode
You wanna call URL.revokeObjectURL(blobUrl); to clear it and maybe save them when generated in local storage or use a service worker to clean up for best practices 😉
Max

8 months ago

I don't think that this works. The revoke method will free the memory and the URL will lead to nowhere. If you store it in the local storage, it will be a valid URL but the destination won't be there anymore
@Max
I don't think that this works. The revoke method will free the memory and the URL will lead to nowhere. If you store it in the local storage, it will be a valid URL but the destination won't be there anymore
NoCode ProCode

8 months ago

Yes - I mean store it in local storage as an array and on new page load break all those old links 😉
As this is only temporary and a frontend solution - you could also upload it to your CDN and the just set that link as source 😉
@NoCode ProCode
Yes - I mean store it in local storage as an array and on new page load break all those old links 😉
Max

8 months ago

This won't solve the problem. On page refresh, the memory is renewed anyway. The problem is that if you don't clean the memory from loaded objects, listeners, observers... your app will get slower the longer you use it. It is best practice to clean up resources as soon as you don't need them anymore. In the preview upload scenario, this would be, for example, when you change the input, when you actually upload, or when the current component is unloaded.
@Max
This won't solve the problem. On page refresh, the memory is renewed anyway. The problem is that if you don't clean the memory from loaded objects, listeners, observers... your app will get slower the longer you use it. It is best practice to clean up resources as soon as you don't need them anymore. In the preview upload scenario, this would be, for example, when you change the input, when you actually upload, or when the current component is unloaded.
NoCode ProCode

8 months ago

Right then you could just clean it up when it’s not needed anymore like on exit or modal close 😉
@Max
This won't solve the problem. On page refresh, the memory is renewed anyway. The problem is that if you don't clean the memory from loaded objects, listeners, observers... your app will get slower the longer you use it. It is best practice to clean up resources as soon as you don't need them anymore. In the preview upload scenario, this would be, for example, when you change the input, when you actually upload, or when the current component is unloaded.
NoCode ProCode

8 months ago

It’s probably not the best way of doing it the way I did it - but it’s one way - I’m learning too, and now I’m smarter 😉
@Max
This won't solve the problem. On page refresh, the memory is renewed anyway. The problem is that if you don't clean the memory from loaded objects, listeners, observers... your app will get slower the longer you use it. It is best practice to clean up resources as soon as you don't need them anymore. In the preview upload scenario, this would be, for example, when you change the input, when you actually upload, or when the current component is unloaded.
NoCode ProCode

8 months ago

Thank you for the information 🙏💛
💪4
Tom Ireland

8 months ago

Learn something new every day. Thanks, chaps.
💪2
triton2030

5 months ago

Helo, novice here
Trying to update current placeholder image URL from new image that stored localy and having problems for the last few days, it drives me crazy a bit 😅

So yes i did everything as an video but then I'm triggering this custom action:

/**
* @param {Args} args
* @param {Ctx} ctx
*/
function createObjectURL(args, ctx) {
const file = ctx.variables.selectedFile; // Retrieve the file from the variable
if (file) {
console.log('File received from variable:', file);
const blobUrl = URL.createObjectURL(file);
ctx.triggerActionEvent('imageUrl', blobUrl); // Emit the Blob URL as an event
} else {
console.error('No file found in variable "selectedFile".');
}
}

Next i do set variable with
set imageUrl
value event.imageUrl

Which in therory should update image src link
But yeah it's not working
triton2030

5 months ago

https://ddd-fjord.toddle.site
triton2030

5 months ago

Could you please help me
triton2030

5 months ago

ok found a solution
triton2030

5 months ago
Tod

5 months ago

Great energy @triton2030! Your continuous contribution to the toddle Community just made you advance to Community Level 1!
triton2030

5 months ago

Somekind of tips on hover would help a lot
triton2030

5 months ago

also it would be nice if something that looks like var it will somehow give me a sign that it is a var, but optional since i know it could be opposite of helpfull
Tom Ireland

5 months ago

Yeah, iirc you need the input for passing the file object and an event in order to pass back the object URL. Pleased to hear you managed to solve that on your own.

Not sure what you mean when you say "tips on hover". 🤔
triton2030

5 months ago

Yeah maybe it's just for noob like me 😅
Tom Ireland

5 months ago

I think in my case, I actually used FileReader API as using an object URL has some disadvantages in relation to cleanup.

This was my custom action:

function fileReader({file}) {
if (file) {
const reader = new FileReader();

reader.onload = function (e) {

ctx.triggerActionEvent("result", { result: e.target.result })
}

reader.readAsDataURL(file);
}
}

file being the input and result being the event.
@Tom Ireland
I think in my case, I actually used FileReader API as using an object URL has some disadvantages in relation to cleanup.

This was my custom action:

function fileReader({file}) {
if (file) {
const reader = new FileReader();

reader.onload = function (e) {

ctx.triggerActionEvent("result", { result: e.target.result })
}

reader.readAsDataURL(file);
}
}

file being the input and result being the event.
triton2030

5 months ago

Oh nice so in case with images it will result in img link?
triton2030

5 months ago

oh it's base64 got it
💯1
Tom Ireland

5 months ago

I chose that route because I wanted local preview before actually sending to the server.
This is all a distant memory now. 😄
triton2030

5 months ago

Yes yes exactly my thoughts! Thank you very much!
👍1

Can't read locally uploaded file in custom action

Tom Ireland

Max

Tom Ireland

Max

Tom Ireland

Max

Tom Ireland

Max

Tom Ireland

Tom Ireland

Max

Alex

Tom Ireland

Max

NoCode ProCode

NoCode ProCode

Max

NoCode ProCode

Max

NoCode ProCode

NoCode ProCode

NoCode ProCode

Tom Ireland

triton2030

triton2030

triton2030

triton2030

triton2030

Tod

triton2030

triton2030

Tom Ireland

triton2030

Tom Ireland

triton2030

triton2030

Tom Ireland

triton2030