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

Ask the community
1

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 :slight_smile:

2

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)

3

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 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?

4

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.
5

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:

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
image2165Ă—617 51.7 KB

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

image

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

4 Likes
6

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.

7

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

2 Likes