laravel 5.4 image upload no file detected

Question

This is my code.It returns no file everytime. I have an input field with name="file" being sent with this form.

Please help me diagnose my code so I can understnd why this has happend. Thank you.

<div class="container">
<div class="row section-register">
    <div class="col-md-8 col-md-offset-2">
        <div class="panel panel-default">
            <div class="panel-heading">New Auction</div>
            <div class="panel-body">
                <form class="form-horizontal" role="form" method="POST" action="{{ url('/addproduct') }}">
                    {{ csrf_field() }}
                    <div class="form-group">
                        <label for="itemname" class="col-md-2 control-label">Item name</label>

                        <div class="col-md-10">
                            <input id="itemname" type="text" class="form-control" name="itemname" value="" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="itemdesc" class="col-md-2 control-label">Decsription</label>

                        <div class="col-md-10">
                            <textarea id="itemdesc" class="form-control" name="itemdesc" value="" required></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="category" class="col-md-2 control-label">Category</label>

                        <div class="col-md-10">
                            <select id="category" class="form-control" name="category" required>
                                <option value="Games">Games</option>
                                <option value="Gadgets">Gadgets</option>
                                <option value="Books">Books</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="bid" class="col-md-2 control-label">Starting bid</label>

                        <div class="col-md-10">
                            <input id="bid" type="number" class="form-control" name="bid" value="" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="increment" class="col-md-2 control-label">Incremental value</label>

                        <div class="col-md-10">
                            <select id="increment" class="form-control" name="increment" required>
                                <option value="10">10</option>
                                <option value="20">20</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                                <option value="200">200</option>
                                <option value="300">300</option>
                                <option value="500">500</option>
                                <option value="1000">1000</option>
                            </select>
                        </div>
                    </div>
                    <br>
                    <p class="text-center warning-img">Images uploaded to SpinkyDink are resized. For the best quality images on your auction, please use land-scape images instead of portrait images.
                    <br>(Turn your phone sideways and snap a pic)</p>
                    <br>
                    <div class="form-group">
                        <label for="file" class="col-md-2 control-label">Main Image</label>

                        <div class="col-md-10 text-center">
                            <input id="file" type="file" class="form-control" name="file" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-10 col-md-offset-2">
                            <input id="file2" type="file" class="form-control" name="file2">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-10 col-md-offset-2">
                            <input id="file3" type="file" class="form-control" name="file3">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-10 col-md-offset-2">
                            <input id="file4" type="file" class="form-control" name="file4">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-12 text-center">
                            <button type="submit" class="btn btn-success">
                                Submit Auction
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

ROUTES:

Route::post('/addproduct', 'NewProductController@addproduct');

Controller

public function addproduct(Request $request)
{
    if ($request->hasFile('file')) {
        echo "file found";
    }else{
        echo "no file";
    }
}

The line echo "no file" will return everytime when I hit this controller.

Answer 1

Add enctype attribute to the form:

<form class="form-horizontal" role="form" method="POST" action="{{ url('/addproduct') }}" enctype="multipart/form-data">

By default the data gets encoded, but if you want to upload files using the form you have to disable the encoding and this is what multipart/form-data does.