jerosoler / Drawflow

Simple flow library 🖥️🖱️
https://jerosoler.github.io/Drawflow/
MIT License
4.7k stars 728 forks source link

Import Json Issue #717

Closed diazdennis closed 1 year ago

diazdennis commented 1 year ago

Hello, I'm using your Drawflow very usefully. I added image upload button in one Block. And I export it to JSON and try to import it. But I got error since this upload button has value(fake path). Please update me how to fix this issue asap. Thanks

jerosoler commented 1 year ago

Fakepath is security browser Duplicate View:

diazdennis commented 1 year ago

Thanks for your reply, I already check its issue but my issue is not fakepath. When I try to import JSON which has upload button with file path, I get this error.

Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

Kindly check again please.

jerosoler commented 1 year ago

How do you upload it as a df attribute? or html?

diazdennis commented 1 year ago

Let me explain. I need to save image path in DB and export flow into JSON and import it again. For example, I added file upload button in one block like this.

I added "df-imagepath" as a attribute in tag. I can save image path in DB using this attribute. When export this flow into JSON and try to import it, I have issue which I mentioned before. When import JSON, current import function try to add value as imagepath to tag. It seems this make issue now.

jerosoler commented 1 year ago

The problem is that the input type file. It cannot be assigned a value by javascript. Just a blank string.

Therefore a df- attribute would not be the best.

If you need to save the value you could do something like this.

    const nodeId = editor.addNode('test1', 1, 1, 100, 100, 'test1', { imagepath: '', fakeimagepath: '' }, '<div><input type="file" df-fakeimagepath></div>');

    editor.on("nodeDataChanged", (id) => {
        const nodeInfo = editor.getNodeFromId(id);
        const data = nodeInfo.data
        if(data.fakeimagepath !== '') {
           data.imagepath = data.fakeimagepath;
           data.fakeimagepath = ""; 
           editor.updateNodeDataFromId(id, data);
        }
    })
diazdennis commented 1 year ago

Hello @jerosoler, Thanks for your reply. Your solution is very helpful.