0

Hello everyone I used javascript to preview my image before it saves in my database which works perfectly but I want it to show not as blob:url... but I was the image src to also carry the file extension please is there anyway i can make this to work?

Here's my code

<div class="form-group">
       <div class="n_listed" style="margin-top: -10px">
            <br>
          <label for="file" style="cursor: pointer;">
             <a>
             <i class="mdi mdi-plus-box-outline"></i>
             Upload Image </a> &nbsp; &nbsp;
             &nbsp; &nbsp;</label><br>
               <input type="file" class="form-control @error('banner_image') is-invalid @enderror"  accept="image/*" name="banner_image" id="file"  onchange="loadFile(event)">
                @error('banner_image')
                 <span class="invalid-feedback" role="alert">
                  <strong>{{ $message }}</strong>
                 </span>
                 @enderror
               <p><img id="cover" style="max-width: 750px;" src="{{asset('dasharea/img/placeholder.png')}}"/></p>
               <div style="color: #333;font-size: .9em;margin: 10px 0 5px" class="progress_msg">
                      Note: Maximum size of the image should be 10MB
                </div>
                <script>
                  var loadFile = function(event) {
                  // let imgfile = $('#file').val();
                  // var imgext = imgfile.split('.').pop();
                     var image = document.getElementById('cover');
                     image.src = URL.createObjectURL(event.target.files[0]);
                       };
                   </script>
                                                                                                    
                    </div>
                  </div>

Please I really need help on this. I want it to save as blob:http://localhost:8000/6e315126-ef45-4419-a35d-c3dd2eb2eff7.jpg or .png or depending on the file extension instead of just blob:http://localhost:8000/6e315126-ef45-4419-a35d-c3dd2eb2eff7. Because based on validation rules the image cannot save in the database without it's file extension.

David Orizu
  • 27
  • 4
  • What is the specific problem you are facing? Does the image not show correctly? Do you not know how to find the extension when trying to write to the database on the backend? – James Clark Dec 13 '21 at 13:01
  • You can search the internet for this, StackOverflow has an answer here: [should be .name](https://stackoverflow.com/a/40439593/10441671): `event.target.files[0].name`. We should flag as duplicate. – Peter Krebs Dec 13 '21 at 13:43
  • Link to above mentioned question: [Javascript - How to extract filename from a file input control](https://stackoverflow.com/questions/857618/javascript-how-to-extract-filename-from-a-file-input-control) – Peter Krebs Dec 13 '21 at 13:44

0 Answers0