Question 16552 in Laravel Question posted in
The official Laravel Documentation can be found here.

Issue – Unable to submit form and not able to read uploaded Image – Laravel

I am facing issue with form, I am not able to submit changes, the submit button is not reflecting any changes and I am uploading image in form and trying to show under it using js but it’s returning no image.


                                        <form method="POST" action="{{ route('store.portfolio') }}" enctype="multipart/form-data">
                                            @csrf


                                        <div class="row mb-3 mt-3">
                                            <label for="example-text-input" class="col-sm-2 col-form-label">Portfolio Name</label>
                                            <div class="col-sm-10">
                                                <input class="form-control" name="portfolio_name" id="portfolio_name"type="text" value="">
                                                @error('portfolio_name')
                                                <span class="text-danger">{{ $message }}</span>

                                                @enderror
                                            </div>
                                        </div>
                                        <!-- end row -->

                                        <div class="row mb-3 mt-3">
                                            <label for="example-text-input" class="col-sm-2 col-form-label">Portfolio Title</label>
                                            <div class="col-sm-10">
                                                <input class="form-control" name="portfolio_title" id="portfolio_title"type="text" value="">
                                            </div>
                                        </div>
                                        <!-- end row -->

                                        <div class="row mb-3 mt-3">
                                            <label for="example-text-input" class="col-sm-2 col-form-label">Portfolio Description</label>
                                            <div class="col-sm-10">
                                            <form method="post">
                                            <textarea id="elm1" name="area">

                                            </textarea>
                                             </form>
                                            </div>
                                        </div>
                                        <!-- end row -->
 
                                        <div class="row mb-3">
                                            <label for="example-number-input" class="col-sm-2 col-form-label">Portfolio Image</label>
                                            <div class="col-sm-10">
                                                <input class="form-control" type="file" name="portfolio_image" id="image">
                                            </div>
                                        </div>
                                        <!-- end row -->
                                        <div class="row mb-3">
                                            <label for="example-number-input" class="col-sm-2 col-form-label"></label>
                                            <div class="col-sm-10">
                                            <img id="showimage" class="rounded-circle avatar-xl" src="{{ url('uploads/no_image.jpg') }}">
                                            </div>
                                        </div>
                                        <!-- end row -->
                                        <input id="submit" type="submit" class="btn btn-secondary btn-rounded waves-effect waves-light" value="Update Portfolio Page">

                                        </form>
                                    </div>
                                </div>
                            </div> <!-- end col -->
                        </div>
        
    </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $('#portfolio_image').change(function(e){
            var reader = new FileReader();
            reader.onload = function(e){
                $('#showimage').attr('src',e.target.result);
            }
            reader.readAsDataURL(e.target.files['0']);
        });
    });
</script>

When I select any image from my local system it should reflect just below the image selector

(https://i.stack.imgur.com/LrGit.png)

I am creating admin panel so that it reflect changes on front end but it’s not working. The same code I tried with different page and it’s working. I am not sure what I am missing here. Can anyone please look into it and help
thank you

Tags:

2

Answers


  1. 0

    you can directly render this via Load file change.

    <input type="file"  accept="image/*" name="image" id="file"  onchange="loadFile (event)" >
<img id="output" width="200" />

    
var loadFile = function(event) {
    var image = document.getElementById('output');
    image.src = URL.createObjectURL(event.target.files[0]);
};
    Login or Signup to reply.
  2. 0 
    // portfolio_image is a name. given id is image
$('#portfolio_image').change(function(e){
    $('#image').change(function(e) {
    alert("hii")
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search