How To Add Multiple Values To An Input Tag - Js

i'm trying to capture multiple images and then save into the database here is the js code and here is my views.py to get multiple base64 data and split it by using its data attrib

Solution 1:

• You need to create <input>, not <image>

• You're not appending anything by doing docs.value = canvas.toDataURL(), just overwriting old values.

---

const player = document.getElementById('player')
const canvas = document.getElementById('canvas')
const form = document.getElementById('form')
const captureButton = document.getElementById('capture')
const context = canvas.getContext('2d')

captureButton.addEventListener('click', (e) => {
  context.drawImage(player, 0, 0, canvas.width, canvas.height)
  let new_data = document.createElement('input') // <== use <input>
  new_data.setAttribute('name','document')
  new_data.value = canvas.toDataURL()
  form.insertAdjacentElement('beforeend',new_data)
});

navigator.mediaDevices.getUserMedia({video: true})
  .then((stream) => { player.srcObject = stream;})

form *{max-width:20vw;}
img{display:inline-block;}
canvas{display:none;}

<formid="form"action=""method="POST"enctype="multipart/form-data"><videoid="player"controlsautoplay></video><buttontype="button"id="capture">Capture</button><button>save</button><canvasid="canvas"width=320height=240></canvas></form>

https://jsfiddle.net/c7ykg83h/

Solution 2:

Where is your template snip, I assume you're not using ajax here so if you're having multiple image tags you would do something like this

<imgsrc='image01'name=image' class =" something"/><imgsrc='image02'name=image' class =" something"/><imgsrc='image03'name=image' class =" something"/>

images = request.FILES.getlist('image')

then returns a list of images and consequently you can save them in you database