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 — linktoahref
– linktoahref, Commented Dec 29, 2017 at 13:41

Khurram Satti · Accepted Answer · 2018-01-02 08:08:18Z

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 2, 2018 at 8:08

Khurram Satti

444 bronze badges

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

Comments

shahabphp · Accepted Answer · 2017-12-31 13:29:43Z

0

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

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

edited Dec 31, 2017 at 13:29

answered Dec 30, 2017 at 0:26

shahabphp

3791 gold badge2 silver badges10 bronze badges

1 Comment

sudeepsth Over a year ago

I still have save error "POST localhost:8000/my-admin/imageupload 419 (unknown status)"

sudeepsth · Accepted Answer · 2018-01-02 07:38:47Z

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');
        }
   });   
});

Collectives™ on Stack Overflow

upload image in Laravel before submitting form using ajax

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related