PHP and Ajax Upload file path to Mysql and save renamed image to the folder fails

Question

I am trying to upload the file path and other parameters to mysql and I keept the file to the folder with Ajax and PHP it fails, For String parameters it's ok, but get file parameter to database I get empty file data.

an error: Uncaught TypeError: Illegal invocation

HTML form :

     ................

 <form role="form" action="" 
          method="post" autocomplete="off" class="form" 
 enctype="multipart/form-data" > 

                            <div class="form-group">
                               <label class="" for="">Ministry in the 
   church(facultative)</label>
                                <input type="text" name="mn_church" placeholder="Facultative" class="form-control" id="mn_church">
                            </div>

                        </fieldset> 
                       <!-- end -->

                       <!-- Attachements -->

                        <fieldset>
                     <h4>Document attachments:</h4><br>       
                        <div class="form-group">
                    <label class="" for="">Last degree obtained</label>
                         <input type="file" name="ldgree" placeholder="Upload" class=" form-control" id="ldgree">
                            </div> 

                 <button type="button" class="btn btn-previous">Previous</button>
                          <button type="button" onclick="insertDataThirdStep() " class="btn btn-next">Next</button>
                            </div>
                        </fieldset> 
                     .............

PHP code :

     ------------------      
$mn_church = trim($_POST['mn_church']);
$mn_church = strip_tags($mn_church);
$mn_church = htmlspecialchars($mn_church);

         // upload file
      $ldgree = $_FILES['ldgree']['name'];
      $tmpName = $_FILES['ldgree']['tmp_name'];
      // Rename image with a random number
      $random_digit=rand(0000,9999);
     $renamed_image=$random_digit.$ldgree;
          //upload renamed image and image path to db variable 
             $filePath = $uploadDir . $renamed_image;
       //upload renamed image and  path image to the folder 
   $result = move_uploaded_file($tmpName, $filePath);
    if(!get_magic_quotes_gpc())
  {
// $fileName = addslashes($fileName);

// Add slashes between folder and image     
    $filePath = addslashes($filePath);
    } 
          // end first file
       //start student application by inserting the form's data to database
      $query = "
    UPDATE 
    aku_student_application
     SET 
  mychurch ='$mn_church',
 last_degree_optained='$filePath ',
   "
   -------------------

Jquery code with ajax I used to work with php in order to avoid page reload :

          var mn_church=$("#mn_church").val();

  //  Attachment    
 var ldgree = $('#ldgree').prop('files')[0];

$.ajax({

        url:'step-4-appli-form-attachments.php',
        method:'POST', 
                data:{   

                        mn_church:mn_church,
                        ldgree:ldgree
                    },
             success:function(response){
                        // alert(response);
                    console.log('Success fourth step');
                    }

Did you look over this in regards to that error? https://stackoverflow.com/questions/11071100/jquery-uncaught-typeerror-illegal-invocation-at-ajax-request-when-data-param — IncredibleHat, Sep 14 '18 at 17:47
an `update` statement requires a `where` clause - unless you wish to update all records... is that really all the relevant code?? — Professor Abronsius, Sep 14 '18 at 18:00
@IncredibleHat, Yes `It say that error occurs when I try to passs an HTML element instead of its value`, is what I need to know how to pass `file` element from `Ajax` to `PHP` — Alexis MUGWANEZA, Sep 14 '18 at 18:09
@RamRaider , No matter of where clause because the problem is not that — Alexis MUGWANEZA, Sep 14 '18 at 18:10
Looks like we will need more of your JS block than the short clipping you provided. In other news, look into "FormData" for setting up an ajax data send that includes files. (https://stackoverflow.com/questions/21044798/how-to-use-formdata-for-ajax-file-upload) — IncredibleHat, Sep 14 '18 at 18:13

score 0 · Accepted Answer · answered Sep 17 '18 at 10:13

With this solution you can upload more than one file's path to mysql and and photos to folders using one form, the trick I used is FormData to upload file and String(text) too.

First Id did I gave my form id then I referenced Id in Jquery file in order to use it in form data.

HTML Code:

................

<form role="form" action="" 
      method="post" autocomplete="off" class="form" 
  enctype="multipart/form-data" id="myform" > 
                        <div class="form-group">
                           <label class="" for="">Ministry in the 
   church(facultative)</label>
                            <input type="text" name="mn_church" placeholder="Facultative" class="form-control" id="mn_church">
                        </div>

                    </fieldset> 
                   <!-- end -->

                   <!-- Attachements -->

                    <fieldset>
                 <h4>Document attachments:</h4><br>       
                    <div class="form-group">
                <label class="" for="">Last degree obtained</label>
                     <input type="file" name="ldgree" placeholder="Upload" class=" form-control" id="ldgree">
                        </div> 

             <button type="button" class="btn btn-previous">Previous</button>
                      <button type="button" onclick="insertDataThirdStep() " class="btn btn-next">Next</button>
                        </div>
                    </fieldset> 
                 .............

I reformated my php code like this :

      $mn_church = trim($_POST['mn_church']);
$mn_church = strip_tags($mn_church);
$mn_church = htmlspecialchars($mn_church);

  $fileName = rand(0000,9999).'_'.$_FILES['ldgree']['name'];
    $sourcePath = $_FILES['ldgree']['tmp_name'];
      $targetPath = "images/fuploads/".$fileName;
      if(move_uploaded_file($sourcePath,$targetPath)){
            $uploadedFile = $fileName;
        }
      $query = "
UPDATE 
aku_student_application
 SET 
    mychurch ='$mn_church',
  last_degree_optained='$targetPath' "

Jquery code to work with php

      function insertDataFourthStep() {


var form = document.getElementById('myform');
var church _Input = document.getElementById('mn_church');
var Lastdgree_Input = document.getElementById('ldgree').files[0];



var mn_church= new FormData(form);
var ldgree = new FormData(form);


student_id.append("mn_church",church _Input);
ldgree.append("file",Lastdgree_Input);


    $.ajax({

        type: 'POST',
        url: 'step-4-appli-form-attachments.php',
        data:ldgree,mn_church,         
        contentType: false,
        cache: false,
        processData:false, 

        success: function(data){
       console.log('Success fourth step');
            // clear file field
            // $("#ldgree").val("");
        }
    });

   }

Thank you friends for your positive comments

PHP and Ajax Upload file path to Mysql and save renamed image to the folder fails

1 Answers1

Jquery code to work with php