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

const player = document.getElementById('player')
const canvas = document.getElementById('canvas')
const form = document.getElementById('form')
const docs = document.getElementById('documents')
const captureButton = document.getElementById('capture')
const context = canvas.getContext('2d')
      
captureButton.addEventListener('click', (e) => {
    context.drawImage(player, 0, 0, canvas.width, canvas.height)
    e.preventDefault();
    let new_image = document.createElement('img')
    new_image.src = canvas.toDataURL()
    console.log(new_image)
    docs.value = canvas.toDataURL()
    form.insertAdjacentElement('beforeend',new_image)
    e.preventDefault();
  });
    
navigator.mediaDevices.getUserMedia({video: true})
   .then((stream) => { player.srcObject = stream;})   
 <form id="form" action="" method="POST" enctype="multipart/form-data">{% csrf_token %}
                <video id="player" controls autoplay></video>
                <button type="button" id="capture">Capture</button>
                <button>save</button>
                <canvas id="canvas" width=320 height=240></canvas>
                <input type="text" name="documents" hidden id="documents">
</form>

and here is my views.py to get multiple base64 data and split it by using its data attribute , here is my code

@login_required
def add_new_image(request,id):
    obj = get_object_or_404(Booking,id=id)
    if request.method == 'POST':
        images = request.POST.get('documents')
        data,imgdata = images.split('data')
        for img in imgdata:     
            print(img)       
            format, imgstr = img.split(';base64,') 
            ext = format.split('/')[-1] 
            data = ContentFile(base64.b64decode(imgstr), name='temp.' + ext)
            photo = Document.objects.create(
                booking = obj,
                docs = data                
            )
            photo.save()
        return redirect(reverse_lazy("booking:add_booking",kwargs={"room_no":obj.room_no.room_no}))
    else:
        messages.error(request,_('choose or capture right image ..'))
    return render(request,'booking/add_img.html',{'obj':obj})

but it raise this error :

not enough values to unpack (expected 2, got 1)

and the print(img) returns only : ! and when i remove the for loop and add this format, imgstr = imgdata.split(';base64,') it saves only the last image ! please is there any way to achieve it , to add all base64 data from js to input tag and then split the input data by its data base64 attribute ?
thanks in advance ..

Source: JavaSript – Stack Overflow

October 2, 2021
Category : News
Tags: base64 | django | html | javascript

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.