AJAX - upload image with ajax without form on laravel

Question

i try to make upload image with ajax without form, when i am sent data without the image, data successfully submitted to the database, but when i am adding an image, when i try to submit, no response at all,

this is my template code :

 <input type="hidden" name="lesson_id" value="{{-- $lessons->id --}}">
   <input type="hidden" name="parent_id" value="0"> -->
    <div class="form-group">
      <label>Komentar</label>
      <textarea rows="8" cols="80" class="form-control" name="body" id="textbody0"></textarea>
    </div>
   <ul class="right">
  <input type="file" name="image" id="image" />
  <img id="myImg" src="#" />
 <button type="button" class="btn btn-primary" onClick="doComment({{ $lessons->id }},0)" >Kirim</button>

and this is my script for submit data :

function doComment(lesson_id, parent_id) {

    var body = $('#textbody'+parent_id).val();
    var image = $('#image').prop('files')[0];

    if (body == '') {
      alert('Harap Isi Komentar !')
    }else {


      var postData =
                  {
                      "_token":"{{ csrf_token() }}",
                      "lesson_id": lesson_id,
                      "parent_id": parent_id,
                      "image": image,
                      "body": body
                  }
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="token"]').attr('value')
        }
    });
      $.ajax({
          type    :'POST',
          url     :'{{ url("lessons/coments/doComment") }}',
          dataType: 'json',
          data    : postData,
          beforeSend: function(){
            // Show image container
            swal({
                title: "Sedang mengirim Komentar",
                text: "Mohon Tunggu sebentar",
                imageUrl: "{{ asset('template/web/img/loading.gif') }}",
                showConfirmButton: false,
                allowOutsideClick: false
              });
              {{--  $("#loader").show();  --}}
          },
          success:function(data){
            if (data.success == false) {
               window.location.href = '{{ url("member/signin") }}';
            }else if (data.success == true) {
              $('#textbody'+parent_id).val('');
              swal({
                title: "Komentar anda sudah terkirim!",
                showConfirmButton: true,
                timer: 3000
              });

              getComments();
            }
          }
      });
    }
  }

Can any one help me?

Possible duplicate of File upload using Jquery ajax without form — Kamalesh M. Talaviya
– Kamalesh M. Talaviya, Commented Jul 12, 2018 at 8:22

Mohit Tambi · Accepted Answer · 2018-07-12 10:12:56Z

0

postData = new FormData();
if(!!file.type.match(/image.*/)){
  postData.append("image", file);
  $.ajax({
    type    : 'POST',
    url     : '{{ url("lessons/coments/doComment") }}',
    data    : postData,
    dataType: 'json',
    processData: false,
    contentType: false,
    success: function(data){
        alert('success');
    }
  });
}else{
  alert('Not a valid image!');
}

answered Jul 12, 2018 at 10:12

Mohit Tambi

713 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AJAX - upload image with ajax without form on laravel

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related