1

So I'm done with trying to upload image using modal and ajax, now I want to edit it. So my modal trigger is the uploaded picture itself. My problem is how do I get the data from the database and display it on my modal? Am also having this error:

Uncaught ReferenceError: data is not defined

MODAL TRIGGER: (user/gallery.blade.php)

@foreach($galleries as $art)
    <div class="card" style="width: 20rem;">
         <img class="card-img-top" src="/storage/upload/{{$art->upload}}" alt="Card image cap" id="editUpload" data_id="{{$art->id}}">
    </div>
@endforeach

MODAL: (scripts/editUploadModal.blade.php)

<div class="modal .modal-lg bg-white" tabindex="-1" id="editUploadModal">
  <div class="container">
      <h3 class="text-center">EDIT UPLOAD</h3>
      <form id="editForm" enctype='multipart/form-data'>
        <div class="modal-body">
            <input type="text" name="id" id="editId">
            <input type="file" name="upload" id="editUpload"><br>
            <img class="card-img-top" src="#" id="imageResult"><br>
            <label>CAPTION</label>
            <input type="textarea" class="form-control bg-white border-dark" name="description" id="description">            
        </div>

        <button class="btn btn-danger">DELETE UPLOAD</button>
        <button class="btn btn-success">SAVE</button>
      </form>
  </div>
</div>

SCRIPT: (scripts/editUpload_script.blade.php)

<script>
    $(document).ready(function(){   
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('body').on('click','#editUpload', function(){    
            $('#editUploadModal').modal('show');

            console.log($(this).attr('data_id')); //DISPLAYS ID
            data_id = $(this).attr('data_id');
        
            //THIS IS WERE AM STUCK FROM BECAUSE IT IS NOT DISPLAYING THE DATA IN CONSOLE
            $.get("{{route('gallery.index')}}" + '/' + data_id + '/edit', function(Data){
                console.log(data.upload + " " + data.description)

                $('#editId').val(data.id);
                $('#editUpload').val(data.upload);
                $('#description').val(data.description);

                //display image
                reader.onload = function () {
                $('#imageResult').attr("/storage/upload/" + data.upload);
            });
        });
    });
</script>

CONTROLLER: (GalleryController.php) btw, I added use Response;

public function edit(Gallery $gallery)
    {
        return Response::json($gallery);
    }
Alca Famiglia
  • 45
  • 6
  • 1
    Hi you have `Data` inside `function(Data)` and then you are getting value from it using `data.upload..` i.e : `Data != data` change either of that and see if that works . – Swati Nov 11 '20 at 04:15
  • ooohhhh.... thank you... I can now retrieve data from my database but can you help me with how to put the file name on my file input box. The rest of my form is displaying what should be displayed except for the file. data.upload seems not to be working. thank you – Alca Famiglia Nov 11 '20 at 04:58
  • 1
    Yes ,you cannot set value for `file` type like that check [this](https://stackoverflow.com/questions/1017224/dynamically-set-value-of-a-file-input). Alternatively you can add some `div` and put that file name value there using `$("yourdivid").text(data.upload)` – Swati Nov 11 '20 at 05:09

0 Answers0