|
How to upload a photo to Family Tree JS in .NET core |
|
|
|
|
|
|
|||
How to upload a photo to Family Tree JS in .NET core![]() Family Tree JS has rich API, easily you can use it to upload avatars to your server This is step by step tutorial on how to upload photos for Family Tree JS to your server in .NET core. Step 1 - InstallationIf you are already familiar with BALKAN FamilyTreeJS you can skip this step. There are two installation options: standalone or using npm standalone installation See our getting started page npm installation
Step 2 - Client side implementationBALKAN FamilyTreeJS has builtin edit form that you can use to edit the nodes data. The Edit Form has tons of configuration options you can learn more from this help article.
Now lets load the nodes data or family members data, you can load from json, xml csv or even import the data from excel file, here we will use the load method
Now the family tree is ready and it will be displayed, but in many cases you will need uploaded images to your server. To send the upload image from the client to the server you can use "element-btn-click" event listener of the editUI interface and its setAvatar method
Step 3 - Server side implementationOn the server create standard http post action method in your .NET Core web app
The UploadPhoto action method will upload the portraits to a "photos" folder in wwwroot. If you are going to use the same location in production make sure that the IIS has write permissions to that folder. Tell us if you have any questions in the comments below. Sub levels tag option - Code of the WeekHighlights search results directly on Org Chart nodes - Code of the WeekCode of the Week/Relationship maps and Business process diagramsSearch using field name abbreviations - Code of the WeekDynamic Template - Code of the WeekRead and Write local CSV file using File API and Org Chart JS - Code of The WeekOrganizational Chart Path Highlighting and SelectionModern Template - Org Chart JSPerformance - Org Chart JS![]() Single parent is supported in Family Tree JS![]() How To Develop a Flowchart Maker with Org Chart JS![]() How to change the color of selected node - Family Tree JS![]() Family Tree with live tiles |