Image Upload using Laravel and ajax.

Posted 8 months ago by beginner_luck

Hello, can someone help me on how to include in the form a field for image upload using laravel and ajax? It seems like my code for image upload is not working, but the other field works perfectly. Thank you in advance. This is my code.

My Ajax code:

//Ajax call for POSTS // add a new post

$(document).on('click', '.create-post', function() { $('.create-form').css('display','block'); $('.posts-table').css('display','none'); });

    $(".link-button").click(function () {
    window.location.href = $(this).data('href');
    });

    $('#submit-post').click(function(e) {
        e.preventDefault();
        var action = $('#form-post').attr('route');
        var title = $("#form-post").find("input[name='title']").val();
        var slug = $("#form-post").find("input[name='slug']").val();
        var category_id = $("#add-category").val();
        var featured_image = $("#add-image").val();
        var body = $("#add-body").val();


        $.ajax({
            type : 'POST',
            url : "/addpost",
            headers: {
                'X-CSRF-TOKEN' : $('input[name="_token"]').val()
            },
            data : {
                title: title, 
                slug: slug, 
                category_id: category_id, 
                featured_image: featured_image, 
                body: body
            },
            success: function(data){
                toastr.success('Successfully Added Post!', 'Success Alert', {timeOut: 4000});
                $('.create-form').css('display','none');
                $('.posts-table').css('display','block');
                $('.table tbody').append("<tr id='" + data.id + "' class='item'><th>" + data.id + "</th><td>" + data.title + "</td><td>" + data.body + "</td><td>" + data.created_at + "</td><td><button class='btn btn-outline-primary link-button' data-href='{{URL::to('posts/{$id}')}}'>View</button><button class='edit-modal btn btn-info' data-id='" + data.id + "' data-title='" + data.title + "' data-slug='" + data.slug + "' data-category='" + data.category_id + "' data-image='" + data.featured_image + "' data-body='" + data.body + "'><span class='glyphicon glyphicon-edit'></span> Edit</button></td></tr>");
                console.log(data); 
            }


        });

    });

My Controller:

public function store(Request $request)
{
    //validate the data
    $this->validate($request, array(
        'title'       => 'required|max:255',
        'slug'        => 'required|alpha_dash|min:5|max:255|unique:posts,slug',
        'category_id' => 'required|integer',
        'body'        => 'required',
        'featured_image' => 'image|nullable|mimes:jpeg,png,jpg,gif,svg|max:2048',
    ));

    //store in the database
    $post = new Post;

    $post->title = $request->title;
    $post->slug  = $request->slug;
    $post->category_id = $request->category_id;
    $post->body  = Purifier::clean($request->body);

    //Save Our Image
    if ($request->hasFile('featured_image')) {
        $image = $request->file('featured_image');
        $filename = time() . '.' . $image->getClientOriginalExtension();
        $location = public_path('images/'. $filename);
        Image::make($image)->resize(800, 400)->save($location);

        $post->image = $filename;
    } 

    
    $post->save();
    return response()->json($post);

}

Please sign in or create an account to participate in this conversation.

Laracasts Mascot

Hi, Have We Met Yet?

Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.

Sign Me Up

Channels

Reply to

Use Markdown with GitHub-flavored code blocks.