href property on Upload button [Angular projects]

[simoespt]

The upload btn contains the propertie href="#", is it possible to remove this property? if the tree is not on the main page this button cause the redirect to the top domain? (at least on Angular projects)

[ZornitsaPesheva]

Hi Joao,

Please get the latest version and try this: https://code.balkan.app/family-tree-js/image-upload#JS

[simoespt]

Hi, I still have the issue with the latest version.

On this example https://code.balkan.app/family-tree-js/image-upload#JS the url gets change to "blob:https://..." not 100% sure why, but it might be something related with the code.balkan.app.

For example, there is a different behaviour of the link on the 2 cenarios bellow, although both work we can see that on the code.balkan.app the href link gets the prefix "blob:", while on the balkan.app no prefix gets added to the link cenario1: https://balkan.app/FamilyTreeJS/Demos/first-look cenario2: https://code.balkan.app/family-tree-js/first-look#JS

On https://balkan.app/FamilyTreeJS/Demos/first-look the href link doenst redirect the user to the top domain, that is probably do to the language used, on angular that would href would redirect to https://balkan.app/#

[ZornitsaPesheva]

I have tried the example I sent you in Angular and it opens the file Upload Dialog. Isn't that happen in your project also?

https://balkan.app/FamilyTreeJS/Demos/first-look - here we don't have code for Upload... just a link https://code.balkan.app/family-tree-js/first-look#JS - here also.

This is the code that you need to use:

family.editUI.on('element-btn-click', function (sender, args) {
    FamilyTree.fileUploadDialog(args.input, function (file) {
        var formData = new FormData();
        formData.append('file', file);
        alert('upload the file');
        console.log(args);
    })
});

[simoespt]

wait the problem is not the dialog is the href property.

In your example can you add a route (for example /tree), and put the component that contains the tree code on that route.

lets say the tree would be accessable via localhost:4000/tree by accessing the upload button since it has the property href=#, this will redirect to localhost:4000/#, it will go to the top component. (any link that has href=# will do that, the only way to bypass this is having the tree on the main route-> localhost:4000)

[ZornitsaPesheva]

Could you please create an example here: https://stackblitz.com/

[simoespt]

https://stackblitz.com/edit/angular-ivy-awkjv8 (there are 2 components, the example component has only a link with href=# to show the behavior, and the tree component has a a tree that also demonstrate the behavior when clicked on the upload button)

[ZornitsaPesheva]

Hi Joao, The issue is fixed in 1.07.08