How to insert JavaScript object into Django JSONField

Question

In my django web app, I have two pages- One is a form for the user to fill out the name, size, image, and specify the names of some points of interest on the image. The next page displays that image and allows the user to place some SVG circles corresponding to the points of interest on top, and when the user submits, I want the form from the first page and a JSONField for the locations of the circles (points of interest) on the image to all get saved into one model.

Currently, my solution is a page with the first form, then pass that entire form into the next page. Since I don't want the user to see that form anymore, I put it in a hidden div. I render the image from the form and using JavaScript, I draw the circles where the user clicks. When the submit button is pressed, it runs a function in the script that submits the form for a second time but updates the JSONField with the locations of all the circles before submitting.

The code below works up until the form is submitted, but when I get to the view2 function, the form.is_valid() always returns false. I suspect that the issue is here:

document.getElementById("id_spots").innerHTML = spots

I thought that since the Django form field is a JSONField, I could assign the innerHTML to be the spots object that I created in JavaScript. If I take a look at how this affects the HTML, [object Object] is inserted in the spots textarea box. I also tried JSON.stringify(spots) but to no avail.

Can anyone spot the issue? And is there a better way to assign the value of the JSONFiled to match a variable in django?

views.py

def view1(request):
    if request.method == 'POST':
        form = ImageForm(request.POST, request.FILES)
        if form.is_valid():
            b64Img = str(b64encode(form.files['img'].file.read()))[2:-1]
            return render(request, 'my-app/view2.html', { 'form': form, 'base': base, 'my_img': b64Img })
    else:
        form = ImageForm()
    return render(request, 'my-app/page1.html', { 'form':form, "base":base })

def view2(request):
    if request.method == 'POST':
        form = ImageForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
    else:
        form = DocumentsForm()
    return render(request, 'my-app/page1.html', {'form':form, 'base':base})

models.py

class MyImage(models.Model):
    name = models.CharField(max_length=50)
    width = models.CharField(max_length=10)
    height = models.CharField(max_length=10)
    spot_names = models.CharField(max_length=1000)
    img = models.ImageField(default=None, upload_to='media/')
    spots = JSONField(blank=True)
    

    def __str__(self):
        return self.name

forms.py

class ImageForm(ModelForm):
    class Meta:
        model = MyImage
        fields = '__all__'

html/js

{% extends 'main/base.html' %}

{% block content %}

<div class="my-div">

    <div>
        <h1>Draw Dots!</h1>
        <h3 id="spot-selection">Click Spot: </h3>
    </div>
    <form id="drawForm" enctype="multipart/form-data" method="POST" action="/my-app/view2/">
        {% csrf_token %}
        <div style="display: none;">
            {{ form }}
        </div>
        
        <svg id="svg">
            <image id="my-img" href="data:image/png;base64,{{ my_img }}"/>          
        </svg>

        <button typr="button" id="submit-img" style="width: 100px;">Submit</button>
    </form>

</div>

{% endblock %}


{% block script_content %}

const spotNames = "{{ form.spot_names.value }}".split(",")
const width = {{ form.width.value }}
const height = {{ form.height.value }}
var spots = {}

this.window.addEventListener('DOMContentLoaded', (event) => {
    const svgElem = document.getElementsByTagName("svg")

    if (svgElem != undefined && svgElem.length != 0) {
        const svg = svgElem[0]
        const image = svg.firstChild
        var i = 0
        document.getElementById("spot-selection").innerHTML = "Click Spot: " + spotNames[i]
        
        svg.onclick = function(event) {
            if (i < spotNames.length) {
                var newCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
                let m = mousePositionSVG(event)
                newCircle.setAttribute('cx', m.x)
                newCircle.setAttribute('cy', m.y)
                newCircle.setAttribute('r', '10')
                newCircle.setAttribute('fill', 'red')
                svg.append(newCircle)
                spots[spotNames[i]] = [width*(m.x / document.getElementById("my-img").getBoundingClientRect().width), height*(m.y / document.getElementById("my-img").getBoundingClientRect().height)]
                i++
                if (spotNames[i] != undefined){
                    document.getElementById("spot-selection").innerHTML = "Click Spot: " + spotNames[i]
                }else{
                    document.getElementById("spot-selection").innerHTML = "All Spots Clicked!"
                }
                
            }
        }
        document.addEventListener("keydown", function(event){
            if (event.key == "Backspace" && i > 0){
                const circles = document.querySelectorAll("circle")
                circles[circles.length - 1].remove()
                i--
                document.getElementById("spot-selection").innerHTML = "Click Spot: " + spotNames[i]
            }
        })

    }
    document.getElementById("submit-img").onclick = function() {
        if (document.getElementById("spot-selection").innerHTML == "All Spots Clicked!"){
            document.getElementById("id_spots").innerHTML = spots
            console.log({{ form.spots.value }})
            document.getElementById("spotForm").submit()
        }
    }
})

function mousePositionSVG(e) {
    let svg = document.querySelector('svg')
    var p = svg.createSVGPoint()
    p.x = e.clientX
    p.y = e.clientY
    var ctm = svg.getScreenCTM().inverse();
    var p =  p.matrixTransform(ctm);
    return p;
}

{% endblock %}

Answer 1

Using JSON.stringify() is actually the correct method:

document.getElementById("id_spots").innerHTML = JSON.stringify(spots)

I thought this part was the error because I was getting errors on the form submission, and the only part of the form that changes is the JSONField. In reality, the error seems to be coming from the ImageField. It turns out that if you pass a form as context to another page, ImageFields will not be preserved.

I have made a more relevant post about the ImageField issue, so any new answers should be redirected to this post: How to pass image file from one page to another in multi-page form (Django)