phpjqueryajaximagelaravel-5.4

How to return the inserted image using ajax request in laravel?


View code:

<form  enctype="multipart/form-data"  name="imagesform" id="imagesform" 
action="{{url('upload')}}" method="post" >
{{ csrf_field() }}
<input name="images[]" type="file" multiple>
<button type="submit"  class="save" id="saveImage" style="border-
radius: 8px; padding: 5px 15px;">SAVE</button>
</form>

This is laravel view code. Here I'm trying to upload multiple images into db.

AJAX CODE:

  <script type="text/javascript">
  $(document).ready(function(){

  $("#imagesform").submit(function(){


  $.ajaxSetup({
      headers: { 'X-CSRF-TOKEN': 
  $('meta[name="_token"]').attr('content') }
  });
  $.ajax({
      url      :"{{url('upload')}}",
      type: 'POST',
      data:new FormData($("#imagesform").get(0)),
      contentType:false,
      processData:false,
      success: function (data) {
         **$("#insertedImages").html(data);**  
         alert("Uploaded OK!")
      },

  });
  return false;
  });
   });

 </script>

This is my ajax request to store the images. Also,I'm trying to display those added images(marked in block).

Controller code:

public function uploadSubmit(UploadRequest $request)
{
    $product = Product::create($request->all());
    foreach ($request->images  as $photo) {
       $filename = $photo->store('uploadedImages');
       $filename=substr($filename,15);

        ProductsPhoto::create([
            'product_id' => $product->id,
            'filename' => $filename
        ]);
    }

      return $filename;


   }

Here is my controller to insert those array of images and also returning the same. But,it display only the name of the image. ie.,eZrcSTlkCeGez8Dq6pTW5X1yLUA080W5UamQEfXk.png..Instead of displaying it like this,I want to display the image.

Image display:

  <div id="insertedImages"></div>

This is what I have given to display images.


Solution

  • First of all you are uploading an array of images and returning a variable which only returns the name of the last file uploaded. Instead create and return an array of filenames of the files uploaded.

    public function uploadSubmit(UploadRequest $request)
    {
        $product = Product::create($request->all());
       $filenames = array();
        foreach ($request->images  as $photo) {
           $filename = $photo->store('uploadedImages');
           $filename = substr($filename,15);
           $filenames[] = asset('storage/app/uploadedImages/'.$filename);
            ProductsPhoto::create([
                'product_id' => $product->id,
                'filename' => $filename
            ]);
        }
    
          return response()->json($filenames);
       }
    

    Then make sure you run php artisan storage:link to create a symlink of the storage directory in the public directory.

    <script type="text/javascript">
      $(document).ready(function(){
    
      $("#imagesform").submit(function(){
    
    
          $.ajaxSetup({
              headers: { 'X-CSRF-TOKEN': 
          $('meta[name="_token"]').attr('content') }
          });
          $.ajax({
              url      :"{{url('upload')}}",
              type: 'POST',
              data:new FormData($("#imagesform").get(0)),
              contentType:false,
              processData:false,
              success: function (data) {
                $.each(data, function( index, value ) {
                   $("#insertedImages").append('<img src="'+value+'">');
                 });
              },
    
          });
          return false;
          });
           });
    
         </script>