Export image file from Custom component to upload to Xano [RESOLVED]

Developer corner
1

I have canvas element in my custom component.
When user clicks “Export” button in component I need to export image from canvas (as Url string or file ) and then upload it to Xano DB.

I have this code to create weweb variable in my custom component and in weweb this var shows default value:

setup(props){
      const {value, setValue} = wwLib.wwVariable.useComponentVariable ({
        uid: props.uid,
        name: 'value',
        type: 'string',
        defaultValue: '',

      });
      return {value, setValue};
    },

I have method that exports image to “exportedURL” var on click:

exportAsJPG() {
      const canvas = this.$refs.canvas;
      const dataURL = canvas.toDataURL("image/jpeg");
      this.exportedURL = dataURL;
    },

Question 1:
how do I link my “value” variable to “exportedURL”? I mean how do I update value var with result of my method? Sorry I have zero knowledge in Vue.js and new to javascript. Need help for such blockers.

Question 2: should I export image URL or should it be blob & file type? is this will be temporary stored on weweb server after canvas export function runs?

Question 3:
I assume I have to use ''trigger" on click and then create workflow where Xano endpoint will ingest my imageURL to upload to XanoDB? or how this should be done?

Thank you in advance.

2

Hey @Anna.fae,

Question1: You need to use the setValue you defined in the setup function. Just call it with the data you want to set the variable this.setValue(dataUrl)

Question3: Best approach will be to define in the configuration a upload trigger when the button is clicked, which will populate the variable, then emit the event. Then on your project, you add a workflow on this trigger, which will do all the connection to backend logic. This is for me the best approach in term of design/dev pattern, as it decoupled your component logic from your endpoint, and make it more reusable.

Question2: When you use toDataUrl, the url is a local one. You will need to convert this to a blob or anything which is accepted by your endpoint (so it depends what your api endpoint is expecting)

Hope this helps :slight_smile:

1 Like
3

1 & 2 works perfectly , thank you! :pray: :partying_face:

with Q3 its much harder.
Can I trigger event outside of my component?
for example there will be button “Save” with my workflow on the page. When user clicks, how do I initiate event in my component exportAsJPG which can populate var? Or this is bad idea and better to do button & trigger inside component?

4

This is currently not possible, but will be available soon. The feature is called component actions, and it will let you define function on your component that can be called from anywhere. Its under QA on our side.
What i answered previously was how to do if the button is inside your component

1 Like
5

Do you have any plans for release?

Also, what’s the best way to learn how to create components? Do you have any documentation, course or video explaining?