Issue - Unable to submit form and not able to read uploaded Image

Question

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

Is that a typo ? `e.target.files['0']` ? it should be an integer right not an array ? — xenooooo, Dec 23 '22 at 05:42

score 1 · Answer 1 · answered Dec 23 '22 at 05:28

1

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]);
};

answered Dec 23 '22 at 05:28

Gourav Khandelwal

21
3

Thankyou Gourav, This worked. I corrected integer valus as well for other pages and it's working fine now. :) – Vinay Dec 23 '22 at 06:39
Wow..Great....Accept the answer... :) – Gourav Khandelwal Dec 23 '22 at 08:26

score -1 · Accepted Answer · edited Dec 28 '22 at 00:43

-1

// portfolio_image is a name. given id is image
$('#portfolio_image').change(function(e){
    $('#image').change(function(e) {
    alert("hii")
}

edited Dec 28 '22 at 00:43

Joundill

6,828
12
36
50

answered Dec 23 '22 at 07:26

Akshay kumar

14
1

Issue - Unable to submit form and not able to read uploaded Image

2 Answers2