Store [object File] data in variable

Ask us anything How do I?
1

Hey folks,

I have a ‘File upload’ element within a Tab section.

As the tabs are conditionally rendered, when the user navigates between tabs the File object loses its data (requiring the user to select the file again if they didn’t proceed to submit).

For inputs within the other tab sections, I store the data in their own variables rather than passing the input-values, so the data persists during navigation.

Similarly, I want to be able to store the [object File] data but can’t store it in the existing variable types: Object or Array.

What are my other options? Or, is it possible to add a variable type: File to the current variable options?

2

perhaps you can use the function „filetoURL“? It will create a blob link.

3

You can save it into an object variable. When you change the variable use this code for the value:

const file = // the File object from the change event or the input value
return {file}

Now in your variable you have a file property that has the File object

1 Like
4

remember that filetoURL uses URL.createObjectURL(), so you are in charge of revoking it when you are done to free memory (see here)

5

This is excellent. Thanks @dorilama

For any others interested, here’s how it works.

  1. Create an empty object variable eg. varFile

  2. Create a workflow on the File 1 container, triggered On change

  3. Change the varFile variable value, using the format prescribed.

    image
    image743×342 104 KB

  4. In a subsequent workflow, where I call the endpoint to post the submission, I get the object variable value with the file metadata using the following syntax

var fileresource =  wwLib.wwVariable.getValue(‘d7a86ef3-………………-edd8ae36e17f).file;
2 Likes