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

If 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

npm i @balkangraph/familytree.js

Step 2 - Client side implementation

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

/// <reference path="FamilyTree.d.ts" />
var family = new FamilyTree('#tree', {
    nodeBinding: {
        img_0: 'photo'
    editForm: {
        generateElementsFromFields: false,
        photoBinding: "photo",        
        elements: [
            { type: 'textbox', label: 'Photo Url', binding: 'photo', btn: 'Upload' },

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

    { id: 1, pids: [2], gender: 'female'},
    { id: 2, pids: [1], gender: 'male' },
    { id: 3, mid: 1, fid: 2, gender: 'female' },

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

family.editUI.on('element-btn-click', function (sender, args) {
    FamilyTree.fileUploadDialog(function (file) {
        var data = new FormData();
        data.append('files', file);

        fetch('/Home/UploadPhoto', {
            method: 'POST',
            body: data
            .then(response => {
                response.json().then(responseData => {
                    args.input.value = responseData.url;

Step 3 - Server side implementation

On the server create standard http post action method in your .NET Core web app

public async Task<IActionResult> UploadPhoto(List<IFormFile> files)
    long size = files.Sum(f => f.Length);

    var file = files.First();
    var path = Path.Combine(_host.WebRootPath, "photos", file.FileName);
    using (var stream = new FileStream(path, FileMode.Create))
        await file.CopyToAsync(stream);

    return Json(new 
        url = new Uri(new Uri(Request.Scheme + "://" + Request.Host.Value), Url.Content("~/photos/" + file.FileName)).ToString() 

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.

See the code in GtiHub

Tell us if you have any questions in the comments below.

Customizing Filter UI - Code of The Week

Zoom Slider - Code of The Week

Bookmarks - Code of The Week

Customizing Search Results - Code of The Week

Introducing Undo Redo - Code Of The Week

Price adjustment announcement

The price will increase for new customers

Buttons for adding family members to a family tree - Code of The Week

Levels - Code of The Week

Change node color from a button in the Edit Form - Code of The Week

Filter and Highlight Nodes - Code of The Week

Up Expanding - Code Of The Week

Programmatically move the chart - Code of The Week

Siblings in Family Tree JS - Code of The Week

Purple template - Code of The Week

Assistant With Children - Code of The Week

Conditional Layout - Code of The Week

Conditional Color - Code of the Week

Sriniz Family Tree Template - Code of The Week

Color Picker - Code of The Week

Add company logo as watermark in exported PDF documents - Code of The Week

Mind map - Code of The Week

Create relationship with circle menu - Code of The Week

Animated Photos - Code of the Week

Grouped Dotted Lines - Code Of The Week

Dotted Lines - Code Of The Week

Department Dynamic Title - Code Of The Week

Add expand button for partners - Code of the Week

Change the sub levels with Drag and Drop - Code of The Week

Custom Edit From using Popover - Code of the Week

Sub levels tag option - Code of the Week

Highlights search results directly on Org Chart nodes - Code of the Week

Code of the Week/Relationship maps and Business process diagrams

Search using field name abbreviations - Code of the Week

Dynamic Template - Code of the Week

Read and Write local CSV file using File API and Org Chart JS - Code of The Week

Organizational Chart Path Highlighting and Selection

Modern Template - Org Chart JS

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



The Latest BALKAN App News and Releases. Latest information on Org Chart JS and Family Tree JS.