upload image in Laravel before submitting form using ajax

Question

I have written some watermark code in Laravel and it is working fine. But now I want to show the preview before submitting the file. But I am getting error "POST 419 (unknown status)"

My view source code is

<form class="form-horizontal" method="POST" action="{{ route('announcement.store') }}" enctype="multipart/form-data">
{{ csrf_field() }}

<label for="description">Description</label>
<textarea id="my-editor" class="textarea" name="description"  ></textarea>

<label for="image">Featured Image</label>
<input type="file" id="image" name="image">
<button type="submit" class="btn btn-success">Submit</button>
</form>

Javascript code

$(document).ready(function() {

$("#image").change(function(e) {
var image = $('#image').val();
     $.ajax({
       type: 'POST',
       url:'{{url('/my-admin/imageupload')}}',
       data: {image:image},
       success: function( msg ) {
           alert(msg);
       },
       error: function( data ) {
           alert(data);
       }
   });
   });

In this code, when I change the image I get error. I have done some watermark on image and save that image in folder. Now, I need to show that image on preview before submitting the form.

Add `contentType: false, processData: false` options for uploading file via ajax [jQuery Ajax File Upload](https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload) — linktoahref, Dec 29 '17 at 13:41

score 1 · Answer 1 · answered Jan 02 '18 at 08:08

1

Image will not be sent with this "var image = $('#image').val();" piece of code while using ajax request as you need to use data = new FormData(); for image.

answered Jan 02 '18 at 08:08

Khurram Satti

44
4

shahabphp · Answer 2 · 2017-12-31T13:29:43.787

0

You missed _token as data to submit on ajax, so change the data to

        data: {
            "_token": "{{ csrf_token() }}",
            "image":image
        },

edited Dec 31 '17 at 13:29

answered Dec 30 '17 at 00:26

shahabphp

369
1
2
10

I still have save error "POST http://localhost:8000/my-admin/imageupload 419 (unknown status)" – sudeepsth Jan 01 '18 at 06:50

score 0 · Answer 3 · answered Jan 02 '18 at 07:38

I have successfully uploaded the image by this code.

$("#image").change(function(e) {
var data = new FormData();
data.append('image', $('input[type=file]')[0].files[0]);
data.append('_token', "{{ csrf_token() }}");
$.ajax({
        url:'{{url('/my-admin/imageupload')}}',
        type: 'POST',
        data : data,
        enctype : 'multipart/form-data',
        contentType: false,
        processData: false,
        success: function( data ) {
            var baseUrl = "{{asset('')}}";
            var imageUrl = baseUrl + data.msg;
            $('#changeimage').html('<img src="'+ imageUrl +'" height="120px" width="150px">');
        },
        error: function() {
            alert('unable to insert watermark on image');
        }
   });   
});

upload image in Laravel before submitting form using ajax

3 Answers3