LARAVEL8: Photo not uploading to database, but rest of the form does

Question

This is my FileUploadController:

public function createFile(Request $request){
    $file = new File;
    $file->cursa=$request->cursa;
    $file->referinta=$request->referinta;
    $file->obs=$request->obs;
    
    if ($request->hasFile('photo')){
        $extension = $request->file('photo')->getClientOriginalExtension();
        $photoName = str_replace('','', $request->cursa). '_'. time(). '.' .$extension;
        $request->file('photo')->move(public_path('images'), $photoName);
        $file->photo = $photoName;
    }
    
    $file->save();
    return redirect()->back();
}

This is the whole form:

@extends('admin.template')
@section('title', 'Add User')
@section('content')


<link href="{{ asset('/styles.css') }}" rel="stylesheet">
<div id="layoutSidenav_content">

        <form action="{{route('fileUpload')}}" method="post" enctype="multipart/form-data">
          <h3 class="text-center mb-5">Trimite Fisier</h3>
            @csrf
            @if ($message = Session::get('success'))
            <div class="alert alert-success">
                <strong>{{ $message }}</strong>
            </div>
          @endif
          @if (count($errors) > 0)
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                      <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
          @endif
          <div class="form-group">
    <label for="exampleFormControlInput1">Nume Cursa</label>
    <input type="text" name="cursa" required  class="form-control @error('cursa') invalida @enderror" id="cursa"   placeholder="123456/1">
    <span class="text-danger">
      @error('cursa')
      {{$message}}
      @enderror
    </span>
  </div>
  <div class="form-group">
    <label for="exampleFormControlInput1">Referinta</label>
    <input type="text" name="referinta" class="form-control @error('referinta') invalida @enderror" id="referinta" placeholder="">
    <span class="text-danger">
      @error('referinta')
{{$message}}
@enderror
    </span>
  </div>
  <div class="form-group">
    <label for="obs">Observatii</label>
    <textarea class="form-control" name="obs" id="obs" rows="3"></textarea>
  </div>
 
          <div>
            <button id="start-camera">Start Camera</button>
<video name="photo" id="video" width="320" height="240" autoplay></video>
<button  name="photo" id="click-photo">Click Photo</button>
<canvas id="canvas" width="320" height="240"></canvas>
</div>
            <button type="submit" name="submit" class="btn btn-primary btn-block mt-4">
                Upload Files
            </button>
          
        </form>
        <script>
          let camera_button = document.querySelector("#start-camera");
let video = document.querySelector("#video");
let click_button = document.querySelector("#click-photo");
let canvas = document.querySelector("#canvas");

camera_button.addEventListener('click', async function() {
    let stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
    video.srcObject = stream;
});

click_button.addEventListener('click', function() {
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
    let image_data_url = canvas.toDataURL('image/jpeg/png');

    // data url of the image
    console.log(image_data_url);
});
        </script>
        <script type="text/javascript" src="{{ asset('/chart-area-demo.js') }}"></script>
            <script type="text/javascript" src="{{ asset('/chart-bar-demo.js') }}"></script>
            <script type="text/javascript" src="{{ asset('/datatables-demo.js') }}"></script>
            <script type="text/javascript" src="{{ asset('/datatables-simple-demo.js') }}"></script>
            <script type="text/javascript" src="{{ asset('/scripts.js') }}"></script>

@endsection

And this is my part of the form with the javascript to take the picture and store it

 <button id="start-camera">Start Camera</button>
<video name="photo" id="video" width="320" height="240" autoplay></video>
<button  name="photo" id="click-photo">Click Photo</button>
<canvas id="canvas" width="320" height="240"></canvas>
</div>
            <button type="submit" name="submit" class="btn btn-primary btn-block mt-4">
                Upload Files
            </button>
          
        </form>
        <script>
          let camera_button = document.querySelector("#start-camera");
let video = document.querySelector("#video");
let click_button = document.querySelector("#click-photo");
let canvas = document.querySelector("#canvas");

camera_button.addEventListener('click', async function() {
    let stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
    video.srcObject = stream;
});

click_button.addEventListener('click', function() {
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
    let image_data_url = canvas.toDataURL('image/jpeg/png');

    // data url of the image
    console.log(image_data_url);
});

All the data excluding the actual photo is loaded to database, but the picture itself does not, any ideas? I've tried a lot of tutorials but really I can't understand what is not working. My guess is that it's probably a rookie mistake but really can't put my finger on it. Also here is a picture of mysql structure for this

Answer 1

I would add an input element and put the data url from your console.log into it.

let camera_button = document.querySelector("#start-camera");
let video = document.querySelector("#video");
let click_button = document.querySelector("#click-photo");
let canvas = document.querySelector("#canvas");

camera_button.addEventListener('click', async function() {
    let stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
    video.srcObject = stream;
});

click_button.addEventListener('click', function() {
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
    let image_data_url = canvas.toDataURL('image/jpeg/png');

    // data url of the image
    console.log(image_data_url);
    document.querySelector('input[name="photo"]').value = image_data_url; // this line
});

<form action="{{route('fileUpload')}}" method="post" enctype="multipart/form-data">
  <!-- ... -->
  <button id="start-camera">Start Camera</button>
  <video name="photo" id="video" width="320" height="240" autoplay></video>
  <input type="hidden" name="photo">
  <button  name="photo" id="click-photo">Click Photo</button>
  <canvas id="canvas" width="320" height="240"></canvas>
  </div>
  <button type="submit" name="submit" class="btn btn-primary btn-block mt-4">
      Upload Files
  </button>          
</form>