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;
3 Likes
6

@MichaelLovell @dorilama very good job, thantks.
Hopefully you’ll be able to help my with my slightly more advanced use case.

I’ve got a multi-steps flow (same page, different url path in weweb),

on step 3, the user has to upload several files linked to a specific type.
For instance a quote, an invoice.
So I’m need to bind my file object to an ‘id’ for example.

on step 4, I want to iterate through each file uploaded, and :
1/ upload the file object [i] to my supabase bucket → meaning that I need this varFile
2/ create a new document in supabase with this newly created file URL.

:check_mark: From your solution, I’ve been able to create this file object.
:cross_mark: However, when I’m trying to pass this variable of type object into a variable of type array, to get the the different file object, it does not work.

TL;DR : Any solution to work with a list of file Objects ?