How to Upload image with some field?

Question

I am trying to upload image with some required field like name, description. When i am inserting data without the image field it works, but when trying to upload the image file as well its not inserting data to database. Could anyone tell me what may be wrong with my code?

Controller

public function store(Request $request)
{
    $this->validate($request, [
        'cat_name' => 'required|max:255',
        'description' => 'required|min:6',
        'cat_pic' => 'required|image|mimes:jpg,jpeg,png',
    ]);

    $fileName = null;

    if ($request()->hasFile('cat_pic')) {

       $file = $request()->file('cat_pic');
       $fileName = time().'.'.$file->getClientOriginalExtension();
       $destinationPath = public_path('/uploads/products/cats/');
       $file->move($destinationPath, $fileName);  
       $this->save();
   }

    Catagories::create([
        'cat_name' => $request->input('cat_name'),
        'description' => $request->input('description'),
        'cat_pic' => $fileName,

    ]);

    Session::flash('alert', __('messages.created'));
    Session::flash('alertClass', 'success');
    return redirect()->route('catagories');
}

View

<div class="col-md-4 offset-5">
<div class="form-group">
    <form role="form" action="<?php echo e('/products/cats') ?>" method="POST" id="createcat" >
        {{ csrf_field() }}
      <p>
        Create New Product Category
      </p>
      <div class="form-group">
        <label for="cat_name">
          Name*:</label>
          <input type="text" class="form-control"
          id="cat_name" name="cat_name" required maxlength="50">
        </div>
        <div class="form-group">
        <label for="cat_pic">Category Image* </label>
    <input data-preview="#preview" class="form-control" name="cat_pic" type="file" id="cat_pic">
    <img class="col-md-6" id="preview" height="100px" width="20px" src="">
  </div>
          <div class="form-group">
            <label for="description">
              Description*:</label>
              <textarea class="form-control" type="textarea" name="description"
              id="description" placeholder="Category Description"
              maxlength="600" rows="3"></textarea>
            </div>
            <button type="submit" class="btn btn-lg btn-success btn-block" id="btncreatecat">Create</button>

          </form>
      </div>
    </div>

@endsection
@push('scripts')
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#preview').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#cat_pic").change(function(){
        readURL(this);
    });
</script>

Route

Route::resource('products/cats', 'Admin\CatController');

and some JQuery to preview the image

  <script type="text/javascript">
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#preview').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#cat_pic").change(function(){
        readURL(this);
    });
</script>

Answer 1

I realized the problem is I just forgot to add enctype="multipart/form-data" inside the form tag.

Answer 2

you need to add enctype="multipart/form-data" to the <form> tag.

Like this:

<form role="#" action="#" method="#" id="#" enctype="multipart/form-data">

So your form can send other things than text.