0

I have some hard times to save a blob (image file) to my sql-database. I have three files: a html form (form.php), an ajax script (ajax.js) and a php-file (save.php). I think i have some errors in my ajax.js, but after a long google search i couldn`t find a good solution. There must be a problem with the blob handling in JS....

HTML Form:

<div id="editEmployeeModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="update_form" enctype="multipart/form-data">
                    <div class="modal-header">
                        <h4 class="modal-title">table bearbeiten</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="id_u" name="id" class="form-control" required>
                        <div class="form-group">
                            <label>Image</label>
                            <input type="file" id="image_u" name="image" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label>Überschrift 1</label>
                            <input type="text" id="header1_u" name="header1" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label>Überschrift 2</label>
                            <input type="text" id="header2_u" name="header2" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label>Text</label>
                            <input type="text" id="text_u" name="text" class="form-control" required>
                        </div>
            <div class="form-group">
              <label>Link</label>
              <input type="text" id="link_u" name="link" class="form-control" required>
            </div>
            <div class="form-group">
              <label>Link-Text</label>
              <input type="text" id="linkText_u" name="linkText" class="form-control" required>
            </div>
            <div class="form-group">
              <label>Datum</label>
              <input type="date" id="datum_u" name="datum" class="form-control" required>
            </div>
                    </div>
                    <div class="modal-footer">
                    <input type="hidden" value="2" name="type">
                        <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
                        <button type="button" class="btn btn-info" id="update">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

In form.php i specified all my Inputs and for the image type=file

Ajax Code:

    $(document).on('click','.update',function(e) {
        var id=$(this).attr("data-id");
        var image=$(this).attr("data-image");
        var header1=$(this).attr("data-header1");
        var header2=$(this).attr("data-header2");
        var text=$(this).attr("data-text");
    var link=$(this).attr("data-link");
    var linkText=$(this).attr("data-linkText");
    var datum=$(this).attr("data-datum");
        $('#id_u').val(id);
    $('#image_u').val(image);
        $('#header1_u').val(header1);
        $('#header2_u').val(header2);
        $('#text_u').val(text);
        $('#link_u').val(link);
    $('#linkText_u').val(linkText);
    $('#datum_u').val(datum);
    });

    $(document).on('click','#update',function(e) {
        var data = $("#update_form").serialize();
        $.ajax({
            data: data,
      enctype: 'multipart/form-data',
            type: "post",
            url: "save.php",
            success: function(dataResult){
                    var dataResult = JSON.parse(dataResult);
                    if(dataResult.statusCode==200){
                        $('#editEmployeeModal').modal('hide');
                        alert('Data updated successfully !');
                        location.reload();
                    }
                    else if(dataResult.statusCode==201){
                       alert(dataResult);
                    }
            }
        });
    });

My PHP-Code:

if($_POST['type']==2){
   $id=$_POST['id'];
   $image= base64_encode(file_get_contents($_FILES['image']['tmp_name']));
   $header1=$_POST['header1'];
   $header2=$_POST['header2'];
   $text=$_POST['text'];
   $link=$_POST['link'];
   $linkText=$_POST['linkText'];
   $datum=$_POST['datum'];
   $sql = "UPDATE `tblTable` SET `image`='$image',`header1`='$header1',`header2`='$header2',`text`='$text',`link`='$link',`linkText`='$linkText',`datum`='$datum' WHERE id=$id";
   if (mysqli_query($conn, $sql)) {
     echo json_encode(array("statusCode"=>200));

   }
   else {
     echo "Error: " . $sql . "<br>" . mysqli_error($conn);
   }
   mysqli_close($conn);
 }
}

My Datbase-Connection works fine. I can write and read all other Data (Text and Date) to my local Database. I think my problem is in the ajax.js. How can i specify $('#image_u').val(image); that it must handle a blob file and not just normal text input. And do i have to modify these lines?

 var data = $("#update_form").serialize();
        $.ajax({
            data: data,
      enctype: 'multipart/form-data',
            type: "post",
            url: "save.php",
MaJa
  • 9
  • 2
  • First of all, your first click handler attaches to `.update` instead of `#update`. I also don't see the `data` attributes specified anywhere else. Have you tried outputting `$image`? What exactly gets saved to the database? Are you sure you need to save the image to the database instead of uploading a file and referencing it in the DB? – tobiv Jan 26 '21 at 09:45
  • Yes, i configed my DB for BLOB (longblob). I dont want to reference the image. All other input types are working. Only the $image doenst work... It's empty and nothing is writen in the db-field "image"... So basically everything is working, except the image blob. – MaJa Jan 26 '21 at 09:52
  • I'm not sure if the base64_encoding is compatible with blob. Maybe [this question/answers](https://stackoverflow.com/questions/29284266/mysql-base64-vs-blob) can give you some insight. – tobiv Jan 26 '21 at 10:13

0 Answers0