Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

196
Views
How do I input an image that is already displayed on html?

I'm working with a webcam application and I am trying to integrate it into Django framework.

This is the function that takes a photo(it's javascript in static folder):

    // play sound effect
    shutter.play();

    // take snapshot and get image data
    Webcam.snap( function(data_uri) {
      // display results in page
      document.getElementById('results').innerHTML =
        '<img id="imageprev" src="'+data_uri+'"/>';
    } );
    document.getElementById("camera").outerHTML = "";

    Webcam.reset();
  }

This is a fraction from my template:

<div id="camera"></div>
<button onclick="takeSnapShot()" type="button" id="button1" class="button-1">Take Picture</button>
<form action="" enctype="multipart/form-data" method="POST">
        {% csrf_token %}
        <div name="results" id="results"></div>
        <div class="button-2">
            <button type="submit" href="/">Pateikti</button>
        </div>
</form>

So after picture taken, it displays an image inside < div > tag which id is "results" And now I want to save taken photograph. So I tried POST method, but when I do that, the template reloads, and the image gets lost. So I believe that's why I'm getting this error window. Also usually POST method used when you want to save files in your server which client uploads, so I'm not sure if this is the best way to do this

So my question is: Is there a method to save an image to your server from a template? Or am I using POST method wrong? I don't want to use PHP since I'm still new to programing

views.py for additional code:

from django.shortcuts import render
from .models import photo
from django.core.files.storage import FileSystemStorage
import datetime

# Create your views here.

def index(request):
    if request.method == 'POST':
        
        file=request.FILES['imageprev']
        fs=FileSystemStorage()
        filen = fs.save(datetime.datetime.now(), file)
        return render(request, 'index.html')
    else:
        return render(request, 'index.html')

models.py:

from django.db import models

class photo(models.Model):
    file = models.FileField(upload_to='file')

I hope my problem is understandable, if not, please ask for more info. I will happily provide it.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!