upload image and store in database using ajax in php laravel - php

Question

I'm working in php laravel what i want is to upload an image in a form that is used to add new CATEGORY: category name, description and upload image.
my view is as shown:
#extends('layouts.app', ['activePage' => 'category', 'titlePage' => __('Category Management')])
#section('content')
#include('modal.editCategory');
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<form id="categoryForm">
#csrf
#method('post')
<div class="card ">
<div class="card-header card-header-primary">
<h4 class="card-title">{{ __('Add Category') }}</h4>
<p class="card-category"></p>
</div>
<div class="card-body ">
<div class="row">
<div class="col-md-12 text-right">
{{ __('Back to Feeds') }}
</div>
</div>
<div class="row">
<label class="col-sm-2 col-form-label">{{ __('Name') }}</label>
<div class="col-sm-7">
<div class="form-group{{ $errors->has('name') ? ' has-danger' : '' }}">
<input class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" name="category" id="category" type="text" placeholder="{{ __('Name') }}" value="" required="true" aria-required="true"/>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 col-form-label">{{ __('Description') }}</label>
<div class="col-sm-7">
<div class="form-group{{ $errors->has('name') ? ' has-danger' : '' }}">
<textarea class="md-textarea form-control" rows="5" name="desc" id="desc" type="text" placeholder="{{ __('Description') }}" value="" required="true" aria-required="true"></textarea>
</div>
</div>
</div>
</div>
<div class="card-footer ml-auto mr-auto">
<button type="button" class="btn btn-primary newCategory">{{ __('Add Category') }}</button>
</div>
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-header card-header-primary">
<h4 class="card-title ">{{ __('Category List') }}</h4>
<p class="card-category"> {{ __('Here you can manage categories') }}</p>
</div>
<div class="card-body">
#if (session('status'))
<div class="row">
<div class="col-sm-12">
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<i class="material-icons">close</i>
</button>
<span>{{ session('status') }}</span>
</div>
</div>
</div>
#endif
<div class="table-responsive ">
<table class="table display responsive nowrap table-striped" id="category-datatable" width="100%" cellspacing="0">
<thead class=" text-primary ">
<th>
{{ __('No') }}
</th>
<th>
{{ __('Name') }}
</th>
<th>
{{ __('Description') }}
</th>
<th class="text-right">
{{ __('Actions') }}
</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
#endsection
I used ajax to submit value from view to controller as shown below:
// add category
$('.newCategory').click(function (e) {
e.preventDefault();
var formData = $("#categoryForm").serialize();
$('.error-msg').html('');
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url: baseUrl + 'addCategory',
type: 'GET',
data: formData,
success: function (data) {
localStorage.setItem("swal",
swal({
title: "Success!",
text: "Category Added",
type: "success",
timer: 3000,
showConfirmButton: false
})
);
location.reload();
localStorage.getItem("swal");
}
});
});
An this is my controller:
public function addCategory(Request $request)
{
$name=$request->input('category');
$desc=$request->input('desc');
$created_at=Carbon::now();
$updated_at=Carbon::now();
$data=array('name'=>$name,'description'=>$desc,'created_at'=>$created_at,'updated_at'=>$updated_at);
Category::insert($data);
}
Can someone help me with this?