CODEWITHSUNDEEP
cssfilelaravelinput
ivva
ivva

Reputation: 2949

Style input type file in Laravel

I'm trying to style input type file using Laravel -> Form::file:

<div class="col-md-3">
  {{ Form::file('images[]',  ["class"=>"required","multiple"=>true]) }}
</div>

It should look like that: enter image description here

I've searcched in web for some solutions and there are possibilities with js but in some of them it's commented that it's not always working in all browsers.

What should be the right way to do that?

Upvotes: 2

Views: 6735

Answers (2)

Siraj Ahmed
Siraj Ahmed

Reputation: 144

Here's you can attach your file in laravel 

<div class="row p-t-20">

                                <input id="file-upload" type="file" name="banner_url" value="{{old('banner_url')}}" /> 
                                {!! $errors->first('banner_url', '
                                <p class="text-warning errorBag">:message</p>') !!}
                                <label for="file-upload" id="file-drag">
                                    <div id="file-cont">
                                        Select a file to upload
                                        <br />OR
                                        <br />Drag a file into this box
                                    </div>
                                    <br />
                                    <br /><span id="file-upload-btn" class="btn btn-success">Add a file</span>
                                </label>

                                <progress id="file-progress" value="0">
                                    <span>0</span>%
                                </progress>

                                <output for="file-upload" id="messages"></output>

this is the easy and the stylish way to input your file in laravel please share anyone who needs this thanks

Upvotes: 0

Mirr
Mirr

Reputation: 131

you can solve this through "label" tag.

<label for="form-file">Upload a file</label>
<input type="file" name="file" id="form-file" class="hidden" />

Just hide the input with css or move it somewhere -9999px to the left, and style the label element to whatever you desire. When user will click on label it will show the upload popup.

I hope this help.

EDIT: Here is example. With "Form::file" you can just add label and add ID parametr to your function.

Upvotes: 1

Related Questions