0

I have this AJAX message form:

HTML:

<form class="" id="message-form" action="message-send.php" method="POST">
  <div class="form-group">
    <textarea name="message" id="message-field" rows="3" class="form-control message-field"></textarea>
  </div>
  <div class="form-group">
    <input type="file" id="file" name="file">
  </div>
  <div class="form-group text-right">
    <input type="submit" id="submit" class="btn btn-success btn-sm msg-send" value="Envoyer" disabled>
  </div>
</form>

JavaScript:

var message_form = $('#message-form');
message_form.submit(function (e) {
    e.preventDefault();
    $('#submit').attr('disabled', true).val('Sending...');

    $.ajax({
        type: message_form.attr('method'),
        url: message_form.attr('action'),
        data: message_form.serialize(),
        success: function (data) {
            console.log('Submission was successful.');
            console.log(data);
            $('#message-field').val('');
            $('#submit').val('Send');
        },
        error: function (data) {
            console.log('An error occurred.');
            console.log(data);
        },
    });
});

PHP:

require 'config.php';

$message = $_POST['message'];

$query = 'INSERT INTO messages (time, from, to, message, file) VALUES (?, ?, ?, ?, ?)';
if (!($stmt = $mysqli->prepare($query))) {
    echo $mysqli->error;
}
$stmt->bind_param('iiiss', $time, $from, $to, $message, $file);
$stmt->execute();
$stmt->close();
$mysqli->close();

Now what I need:

  • Upload the file using AJAX
  • Store the file as is to "/uploads/" with the same name
  • Put the filename in the db with the message

NB: The form already works well (The code presented is just a minimal version) I just need the handling of the file.

Maistrenko Vitalii
  • 994
  • 1
  • 8
  • 16
medk
  • 9,233
  • 18
  • 57
  • 79
  • [How can I upload files asynchronously?](https://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously) – Musa Apr 06 '18 at 17:25

1 Answers1

0

You have not included mimetypes in your ajax request. mimeTypes: "multipart/form-data" add this inside ajax

try sending input values with formdata

var message_form = $('#message-form');
message_form.submit(function (e) {
    e.preventDefault();
    $('#submit').attr('disabled', true).val('Sending...');
       var message_form = $('#message-form');
       var file = $('#file');
       var formdata = new FormData();
       formdata.append('file', file.files[0]);
       formdata.append('message', $('#message-field').val());
       $.ajax({
            type: message_form.attr('method'),
            url: message_form.attr('action'),
            mimeTypes: "multipart/form-data,
            data: formdata,
            async: true,
            contentType: false,
            processData: false,
            beforeSend: function(){

            },
            success: function (data) {
                console.log('Submission was successful.');
                console.log(data);
                $('#message-field').val('');
                $('#submit').val('Send');
            },
            error: function (data) {
                console.log('An error occurred.');
                console.log(data);
            },
        });
    }
Ozal Zarbaliyev
  • 566
  • 6
  • 22