PHP Ajax file upload:Failed to set the ‘value’ property on ‘HTMLInputElement’: This input element accepts a filename

  javascript, jquery, php

Duplicates:
Failed to set the 'value' property on 'HTMLInputElement'
How solve Failed to set the 'value' property type filename JS
when I try to upload a file using Jquery its throwing error
How to bind file path to file upload in Jquery MVC

I have a datatable with an image, I can upload the file and the image is displayed on the table cell. When I want to edit, a modal pops up to edit the data except the image upload. Instead it’s showing me the upload:Failed to set the 'value' property Error.

Here are the codes I have for UPDATE

PHP:

if( isset($_POST['id']) ) {
      $id = $_POST['id'];
      $traffic_doc = $_FILES['traffic_doc']['name']; // violationStatement

      $target = "uploads/traffic_violations/" . basename($_FILES['traffic_doc']['name'] );

      // move the uploaded image to the target folder.
      if( move_uploaded_file($_FILES['traffic_doc']['tmp_name'], $target) )
      {
          $msg = "Image uploaded successfully";
      } else {
          $msg = "Failed to upload image";
      }
  
      // Query to update data
      $result = mysqli_query($mysqli, "UPDATE traffic_violations SET

      violationStatement='$traffic_doc',

      WHERE id='$id'");
  }

Displaying the data:

<tr id="<?php echo $row['id']?>">
    <td data-target="plate_number"><?php echo $row['plateNumber'];?></td>
    <td data-target="car_model"><?php echo $row['carModel'];?></td>
    <td data-target="car_color"><?php echo $row['carColor'];?></td>
    <td data-target="owner_gender" hidden><?php echo $row['ownerGender'];?></td>
    <td data-target="violation_type"><?php echo $row['violationType'];?></td>
    <td data-target="violation_location"><?php echo $row['violationLocation'];?></td>
    <td data-target="violation_date"><?php echo $row['violationDateTime'];?></td>
    <td data-target="working_shift" hidden><?php echo $row['workingShift'];?></td>
    <td data-target="violation_action" hidden><?php echo $row['violationAction'];?></td>
    <td data-target="traffic_doc">
        <a href="#" data-toggle="modal" data-target="#bigger_view">
          <img src="/uploads/traffic_violations/<?php echo $row['violationStatement'];?>" style="width: 50px; height: auto;"/>
        </a>
    </td>
    <td class="table-actions">
        <a href="#" data-role="update" data-id="<?php echo $row['id']?>" data-toggle="modal" data-target="trafficEdit">
            <i class="fas fa-edit"></i>
        </a>
    </td>
</tr>

The Ajax:

$(document).ready(function() {
   // Append values in input fields
   $(document).on('click', 'a[data-role=update]', function(){
      var id = $(this).data('id');
      var plate_number = $("#"+id).children('td[data-target=plate_number]').text();
      var car_model = $("#"+id).children('td[data-target=car_model]').text();
      var car_color = $("#"+id).children('td[data-target=car_color]').text();
      var owner_gender = $("#"+id).children('td[data-target=owner_gender]').text();
      var violation_type = $("#"+id).children('td[data-target=violation_type]').text();
      var violation_location = $("#"+id).children('td[data-target=violation_location]').text();
      var violation_date = $("#"+id).children('td[data-target=violation_date]').text();
      var working_shift = $("#"+id).children('td[data-target=working_shift]').text();
      var violation_action = $("#"+id).children('td[data-target=violation_action]').text();
      var traffic_doc = $("#"+id).children('td[data-target=traffic_doc]').text();
      var ccc_employee = $("#"+id).children('td[data-target=ccc_employee]').text();

      //Append the variables
      $('#plate_number').val(plate_number);
      $('#car_model').val(car_model);
      $('#car_color').val(car_color);
      $('#owner_gender').val(owner_gender);
      $('#violation_type').val(violation_type);
      $('#violation_location').val(violation_location);
      $('#violation_date').val(violation_date);
      $('#working_shift').val(working_shift);
      $('#violation_action').val(violation_action);
      $('#traffic_doc').val(traffic_doc);
      $('#ccc_employee').val(ccc_employee);
      $('#violationId').val(id);

      $('#trafficEdit').modal('toggle');
   });

   //Create event to get data from fields and update.
   $('#save_traffic_case').click(function() {
      var id = $('#violationId').val();
      var plate_number = $('#plate_number').val();
      var car_model =  $('#car_model').val();
      var car_color = $('#car_color').val();
      var owner_gender = $('#owner_gender').val();
      var violation_type = $('#violation_type').val();
      var violation_location = $('#violation_location').val();
      var violation_date = $('#violation_date').val();
      var working_shift = $('#working_shift').val();
      var violation_action = $('#violation_action').val();
      var traffic_doc = $('#traffic_doc').val();
      var ccc_employee = $('#ccc_employee').val();

      $.ajax({
         url: '/edit-traffic',
         method: 'post',
         data: {
           id: id,
           plate_number: plate_number,
           car_model: car_model,
           car_color: car_color,
           owner_gender: owner_gender,
           violation_type: violation_type,
           violation_location: violation_location,
           violation_date: violation_date,
           working_shift: working_shift,
           violation_action: violation_action,
           traffic_doc: traffic_doc,
           ccc_employee: ccc_employee
         },
         success: function(response) {
            
            $("#"+id).children('td[data-target=plate_number]').text(plate_number);
            $("#"+id).children('td[data-target=car_model]').text(car_model);
            $("#"+id).children('td[data-target=car_color]').text(car_color);
            $("#"+id).children('td[data-target=owner_gender]').text(owner_gender);
            $("#"+id).children('td[data-target=violation_type]').text(violation_type);
            $("#"+id).children('td[data-target=violation_location]').text(violation_location);
            $("#"+id).children('td[data-target=violation_date]').text(violation_date);
            $("#"+id).children('td[data-target=working_shift]').text(working_shift);
            $("#"+id).children('td[data-target=violation_action]').text(violation_action);
            $("#"+id).children('td[data-target=traffic_doc]').text(traffic_doc);
            $("#"+id).children('td[data-target=ccc_employee]').text(ccc_employee);
            
            $('#trafficEdit').modal('toggle');
         },
      });
   });
});

Source: Ask PHP

LEAVE A COMMENT