david001's avatar

How to solve it

I need to fetch all images based on current url id :eg:localhost:8000/company/post/id using jquery.

public function upload($id)
    {
        $post= \App\Post::find($id);

        return view('gallery.create',compact('post'));
        
    }

  public function postUpload(Request $request,$id)
   {   
        $destinationPath = 'gallery'; 
        $extension =  $request->file('file')->getClientOriginalExtension(); 
        $fileName = time() . '.' . $extension;
        $upload_success = $request->file('file')->move($destinationPath, $fileName); 
            
            $image = new Image;
            $image->filename = $fileName ;
            $image->post_id = $id;
            $image->save();
    }

Route:

     Route::get('company/post/{id}','PostController@upload');
     Route::post('images/post/{id}','PostController@postUpload');

view:


<form action="{{url('image/post')}}/{{$post->id}}" enctype="multipart/form-data">
    {{ csrf_field() }}
  //.......
</form>



<div id="show">display all images here based on current post id in url</div>

//Note: i have upload form above and display div below on same page


<script type="text/javascript">

$(document).ready( function(){
$('#show').load('url that pull all images based on current upload id');
refresh();
});
 
function refresh()
{
    setTimeout( function() {
$('#show').fadeOut('slow').load('/url that pull all images based on current upload id').fadeIn('slow');
      refresh();
    }, 2000);
}
</script>

for example :my current upload id in browser is localhost::8000/company/post/id Based on this Id i need to fetch all images in show div using jquery above.

I think i need to make another method that returns all images based on current Post Id.But how to get current Id(ie:$id in above function). in another method so that i call pull images based on that Id

0 likes
4 replies
Reached's avatar

Store it in a data-attribute somewhere and fetch it with Javascript when you need it maybe?

Let me know if I have misunderstood you :)

SyedAbuthahir's avatar

Create Separate controller for Image Crud Operations

PostImageController.php

    public function index($id)
    {
            $images =   Image::where('post_id',$id)->get();
            return view('gallery.list',compact('images'));;
        }

    public function create($id)
    {
            $post= \App\Post::find($id);
            return view('gallery.create',compact('post'));
        }

    public function store(Request $request,$id)
    {   
        $destinationPath = 'gallery'; 
            $extension =  $request->file('file')->getClientOriginalExtension(); 
            $fileName = time() . '.' . $extension;
            $upload_success = $request->file('file')->move($destinationPath, $fileName); 
    
        $image = new Image;
        $image->filename = $fileName ;
        $image->post_id = $id;
        $image->save();
    }

In Routes File

Route::resource('posts.images','PostImageController');

Then In your create

<!-- here paste your form -->
<div id="postImages">
    <!-- here we will load post images after page load -->
</div>
<script>
    $(document).ready( function(){
        getPostImages({{ $post->id }});
    });
    function getPostImages(id) {
        $.ajax({
            method: 'POST',
            url: '/posts/' + id + '/images',
            data: function(response) {
                $('#postImages').append(response.body);
            }
        });
    }
</script>

if you use ajax to upload images to server you may need another function to get particular image after upload an image to server and render on the page.

david001's avatar

@SyedAbuthahir it won't work since i am in gallery/create page (according to yours) there is my upload form and i need to fetch all images in same page (gallery/create) below form based on current ID

SyedAbuthahir's avatar

When did to want to show images based on post id?

  1. On page load or
  2. After uploading a new image

If you need images on page load you can use the below method (Demo purpose below code was not tested)

In Controller File

    public function create($id)
    {
        $post= \App\Post::find($id);
        $images =   Image::where('post_id',$id)->get(); // get all images belongs to posts and
        return view('gallery.create',compact('post','images'));
    }

In View

<form id="uploadImage" action={{ route('posts.store',$post->id)  }}>

</form>

<!-- render post images on view -->
<div id="postImages">
@foreach( $images as $image )
<div class="image_{{ $image->id }}">
    <img src="{{ $image->filename  }}">
</div>
@endforeach 
</div>

Javascript concept


// if you use ajax for form request maybe you need extra work in javascript to get the last upload image object and render a image in form request success callback action
//example
$('#uploadImage').submit(function(e){
    e.preventDefault();
    $.ajax({
    // ajax configuration for post request to posts.store end point in controller
    data: function(response){
        var imageObj = response.data.image;
        var newImage = '<div class="image_' + imageObj.id + ' ">';
            newImage +=  '<img src="' +imageObj.filename+'">';
            newImage += '</div>';
        $('#postImages').append(newImage);
    }
    });
});

If you need second option compain my first answer with this javascript part.

Please or to participate in this conversation.