How to access media files inside Javascript in Django project?

Question

I am relatively new to Django. I have a Djano project in which I am trying to render a list of video files that are present inside the media directory in Django.

I have followed all the Media URL related requisites and I am able to render the video files in a template inside an application like this:

{% block content %} 
    <video width="320" height="240" controls>
        <source src="{{ MEDIA_URL }}sample_video_file.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
{% endblock content %}

and it works like a charm.

However, I want to display a list of such video files that are returned from a model programmatically using JavaScript.

This is my views class:-

def video_quiz_data_view(request, pk):
    videoquiz = VideoQuiz.objects.get(pk=pk)
    questions = list()
    for q in videoquiz.get_questions():
        answers = list()
        for a in q.get_answers():
            answers.append(a.text)
        #questions.append({str(q.pk) + " " + q.text : answers})
        print(f"Video path: {q.video_path}")
        questions.append({q.video_path : answers})

    return JsonResponse({
        'data': questions, 
        'time': videoquiz.time,
    })

I am able to console log the response in the .js file corresponding to the .html file above.

I have written an ajax function that calls the view which returns a list of video urls like sample_video_file.mp4 present inside the media directory.

$.ajax({
    type: 'GET',
    url: `${url}data`,
    success: function(response){
        console.log(response)
        data = response.data
        data.forEach(element => {
            for (const [video_path, answers] of Object.entries(element)){
                // console.log(question)
                quizBox.innerHTML += `
                    <hr>
                    <div class="mb-2">
                        <b>${video_path}</b>
                    </div>

                    <div class="mb-2">
                        <video width="320" height="240" controls>
                            <source src="{{ MEDIA_URL }}${video_path}" type="video/mp4">
                        </video>
                    </div>
                `
                answers.forEach(answer => {
                    quizBox.innerHTML += `
                        <div>
                            <input type="radio" class="ans" id="${question}-${answer}" name="${question}" value="${answer}" >
                            <label for="${question}">${answer}</label>
                        </div>
                    `
                })
            }
        });
    },
    error: function(error){
        console.log(error)
    }
})

On the browser, I am able to render all the fields except the video files present inside the media directory, whereas I am able to do the same in the html file. How do I access these video files in my Javascript?

On debugging on the browser, for some reason my project is trying to fetch URLs from {path_of_the_current_view}/{video_file}

score 2 · Accepted Answer · answered May 21 '21 at 20:59

Seems like it's not possible to reference static and media file URLs in JavaScript files in Django - Django {% static 'path' %} in javascript file

The way I solved the issue was to instead prepend the video URL path with my media folder and it worked. Something like this:

$.ajax({
    type: 'GET',
    url: `${url}data`,
    success: function(response){
        console.log(response)
        data = response.data
        data.forEach(element => {
            for (const [question, answers] of Object.entries(element)){
                // console.log(question)
                quizBox.innerHTML += `
                    <hr>
                    <div class="mb-2">
                        <b>${question}</b>
                    </div>

                    <div class="mb-2">
                        <video width="320" height="240" controls>
                            <source src="/media/${question}" type="video/mp4">
                        </video>
                    </div>
                `
                
                answers.forEach(answer => {
                    quizBox.innerHTML += `
                        <div>
                            <input type="radio" class="ans" id="${question}-${answer}" name="${question}" value="${answer}" >
                            <label for="${question}">${answer}</label>
                        </div>
                    `
                })
            }
        });
    },
    error: function(error){
        console.log(error)
    }
})

Notice the line where I have explicitly specified that the video source should be "/media/${question}". Hope this can help someone save some time.

How to access media files inside Javascript in Django project?

1 Answers1