# How do I send a file object from a coded component to the datastore?

**URL:** <https://community.appfarm.io/t/how-do-i-send-a-file-object-from-a-coded-component-to-the-datastore/295>\
**Category:** Ask the community\
**Tags:** coded-component\
**Created:** [February 23, 2023, 11:32am UTC](https://community.appfarm.io/t/how-do-i-send-a-file-object-from-a-coded-component-to-the-datastore/295 "2023-02-23T11:32:41Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![lbj](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/lbj/32/82_2.png) [@lbj](https://community.appfarm.io/u/lbj)\
**Post date:** [February 23, 2023, 11:32am UTC](https://community.appfarm.io/t/how-do-i-send-a-file-object-from-a-coded-component-to-the-datastore/295/1 "2023-02-23T11:32:41Z")

</div>

This question is somehow related to my last question How do I post files/images to a service in Appfarm? but using the built-in **Data** and/or **Actions** features of the coded component rather than using a service. There are examples of how to send and receive Text/JSON from a coded component, but are there examples for how to send over a standard JavaScript File object and store it to a file in Appfarm? I tried using `appfarm.data.send_file.set(file)` but I guess that would have been too easy 🙂

---

<div class="post-metadata">

**Author:** ![kristian](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/kristian/32/58_2.png) [@kristian](https://community.appfarm.io/u/kristian)\
**Post date:** [February 24, 2023, 9:06am UTC](https://community.appfarm.io/t/how-do-i-send-a-file-object-from-a-coded-component-to-the-datastore/295/2 "2023-02-24T09:06:41Z")

</div>

Persistence of Files in Appfarm is done with the “Create File” action node. Here, you may have source type “URL” or source type “Custom”. So, you may create files by sending either the URL form that coded component, or the filecontent itself, to some variable accessible outside the coded component (=“inside” appfarm)

---

<div class="post-metadata">

**Author:** ![lbj](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/lbj/32/82_2.png) [@lbj](https://community.appfarm.io/u/lbj)\
**Post date:** [February 24, 2023, 9:43am UTC](https://community.appfarm.io/t/how-do-i-send-a-file-object-from-a-coded-component-to-the-datastore/295/3 "2023-02-24T09:43:21Z")

</div>

And that’s where my limitations kicks in. How do I pass the file (Blob) content from within a coded component to Appfarm? I tried passing the **File** to a temporary App Variable of type File Object Class. (appfarm.data.send\_file.set(file)) That didn’t work. The file can be uploaded from the client or pasted in. The component in question is this: [GitHub - editor-js/image: Image Block for Editor.js](https://github.com/editor-js/image) So I guess the question is what type of variable to use to pass the File object to appfarm and if I need to use some kind of encoding/decoding in order to get this thing working?

---

<div class="post-metadata">

**Author:** ![kristian](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/kristian/32/58_2.png) [@kristian](https://community.appfarm.io/u/kristian)\
**Post date:** [February 24, 2023, 11:46am UTC](https://community.appfarm.io/t/how-do-i-send-a-file-object-from-a-coded-component-to-the-datastore/295/4 "2023-02-24T11:46:57Z")

</div>

The App variable of type File Object Class does not work. That property is only an ID reference to an Object Class. We do not have datatypes for “blob”.

You could try one of the following:

1. Store the blob in an App Variable of type String, with a `mystring = btoa(<blobfilecontent>)`"function first, converting the blob (binary) to base64 ascii string (btoa = built-in binary-to-ascii function). And when creating the file, get that string app variable (in the file content property of the “Create File” action node), and run `atob(<base64string>)` for the file content generation.
2. Try storing the file content in `window.myFile`. Then you store it in a variable available in your browser session. You may return that `window.myFile` with a function in the file content property of the “Create File” action node.

---

<div class="post-metadata">

**Author:** ![lbj](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/lbj/32/82_2.png) [@lbj](https://community.appfarm.io/u/lbj)\
**Post date:** [February 28, 2023, 9:50am UTC](https://community.appfarm.io/t/how-do-i-send-a-file-object-from-a-coded-component-to-the-datastore/295/5 "2023-02-28T09:50:36Z")

</div>

After some help from @timkurvers (Thanks!) it turned out to be really easy. All that is needed is to pass over the file object as is. The annoying bit is that this was exactly what I tried in my first attempt. Only I must have done something wrong. For anyone wanting to do something similar; the code needed inside the coded component is this:

```auto
uploadByFile(file) {
    return appfarm.actions.save_image({
    blob: file
                            })
                            .then((...args) => {
                                const url = appfarm.data.new_image.get()
                                return {
                                    success: 1,
                                    file: {
                                        url
                                    }
                                }
                            })
                    }

```

**file** is the standard fileobject/blob from the browser. The action that saves the image looks like this:

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/appfarm/original/1X/28c3f80292468406c4028d609ca9b805c62d730d.png)

And I’m passing back the **Image (t).File Content** as **url** :

![image](https://europe1.discourse-cdn.com/flex013/uploads/appfarm/original/1X/f4d79d1dee05379bb690b825b46f5014119c7eda.png)

Tim warned that this might break in future versions of Appfarm. I hope not.

---

<div class="post-metadata">

**Author:** ![lbj](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/lbj/32/82_2.png) [@lbj](https://community.appfarm.io/u/lbj)\
**Post date:** [April 15, 2024, 8:02am UTC](https://community.appfarm.io/t/how-do-i-send-a-file-object-from-a-coded-component-to-the-datastore/295/6 "2024-04-15T08:02:56Z")

</div>

It seems Tim’s warning was correct. This way of doing it is now broken. (As of version 103)  
If anyone know how to fix it, please let me know.

---

<div class="post-metadata">

**Author:** ![lbj](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/lbj/32/82_2.png) [@lbj](https://community.appfarm.io/u/lbj)\
**Post date:** [April 15, 2024, 9:34am UTC](https://community.appfarm.io/t/how-do-i-send-a-file-object-from-a-coded-component-to-the-datastore/295/7 "2024-04-15T09:34:03Z")

</div>

**Update:** Suggestion 2. from @kristian seems to work fine. I also tried converting to sting and back (suggestion 1.) but I could not get it working.

My code now looks like this:

`uploadByFile(the_image) { window.the_blob = the_image return edjs.actions.save_image() .then((...args) => { const url = edjs.data.new_image.get() return { success: 1, file: { url } } }) },`

And the action stores the image like this:

![image](https://europe1.discourse-cdn.com/flex013/uploads/appfarm/original/2X/7/7579e82ef642234e5179519189d86f676905a36d.png)