What is the best way to store a JavaScript variable in Django's media folder?

Question

What is the best way to store a JavaScript variable in Django's media folder?

I currently have a canvas on which I draw rectangles and save their coordinates. These coordinates are stored in a Javascript dictionary.

Through the script provided below, I am able to save/download a file containing the dictionary. However, it is only saved in the Downloads folder.

function myFunction() {
    var hiddenElement = document.createElement('a');

    hiddenElement.href = 'data:attachment/text,' + encodeURI(JSON.stringify(dict));
    hiddenElement.target = '_blank';
    hiddenElement.download = 'dict.json';
    hiddenElement.click();
}

My goal is to save this file in Django's media folder specific to each user.

The desired location should be: media > {{user}} > dict.json

Any assistance on achieving this would be greatly appreciated.

javascript django

Answer 1

Answer №1

Managed to resolve the issue by utilizing Ajax.

Here is the Ajax script:

$(document).ready(function() {
    $("#mybutton").click(function() {
        $.ajax({
            url: "{% url 'drawing' user %}",
            type: "POST",
            dataType: "json",
            data: {
                url: JSON.stringify(dict), // storing coordinates in dict
                csrfmiddlewaretoken: '{{ csrf_token }}'
                },
            success : function(json) {
                alert("Drawing saved!");
            },
            error : function(xhr, errmsg, err) {
                alert("Could not save drawing!");
            }
        });
    });
});

In views.py:

def drawing(request):
    user = request.user

    url = request.POST.get('url') // received URL from ajax will be stored here.
    first_value = next(iter(((request.POST).dict()).values())) // cleaning output
    
    with open("media/{}/dict.json".format(user), 'w') as draw:
        draw.write(first_value) // saving to file

    return JsonResponse(url, safe=False)

Answer 2

Managed to resolve the issue by utilizing Ajax.

Here is the Ajax script:

$(document).ready(function() {
    $("#mybutton").click(function() {
        $.ajax({
            url: "{% url 'drawing' user %}",
            type: "POST",
            dataType: "json",
            data: {
                url: JSON.stringify(dict), // storing coordinates in dict
                csrfmiddlewaretoken: '{{ csrf_token }}'
                },
            success : function(json) {
                alert("Drawing saved!");
            },
            error : function(xhr, errmsg, err) {
                alert("Could not save drawing!");
            }
        });
    });
});

In views.py:

def drawing(request):
    user = request.user

    url = request.POST.get('url') // received URL from ajax will be stored here.
    first_value = next(iter(((request.POST).dict()).values())) // cleaning output
    
    with open("media/{}/dict.json".format(user), 'w') as draw:
        draw.write(first_value) // saving to file

    return JsonResponse(url, safe=False)

What is the best way to store a JavaScript variable in Django's media folder?

Answer №1

Similar questions

Randomly assigning a unique color to each div upon loading the page

JavaScript: Accessing the selectedIndex of a dropdown list in RadGrid

Warning: Promise rejection not caught in _.map function in NodeJs

Is it possible to detect the source of a digest cycle in AngularJS?

Looking for a way to add interactivity to this canvas rectangle?

Setting a default value for the longText field in Laravel

Is there a way to focus on a specific iteration of the ngFor loop in Angular 9 using jQuery?

Node: Exploring folders through recursive traversal

Transforming all commas to plus signs in a JavaScript codebase for the entirety of

Passing Variables to Child Components with Vue Slots

Error: Type error - unable to call function on string during Ajax request

Navigating to a parent URL where the Angular configuration is set can be achieved by following these steps

Combining Context and MUI's theme provider for effective nesting: A step-by-step guide

Display a comprehensive inventory of all bot commands within a designated category

Having trouble deciphering the API or a specific one from React.js/Node.js/Axios/Fetch?

Disable touch interactions on the body, only allow pinch-zoom on specific elements

Encountering a 400 error message (Bad Request) when attempting to send a "POST" request via Ajax to a website built on the

Ways to access JSON data in JavaScript

Assign a value of zero to the currentItem variable upon changing to a different category

Encountering an issue with React npm causing errors that I am unable to resolve