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

Question

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.

well you'd need a filename on the end too. Or you can output as a base64 string instead of a file path. — ADyson, Sep 06 '17 at 09:51
where exactly are you writing that code `img src="{{asset(Storage::url('uploadedImages/' . $filename))}}" width="100" height="100" id="insertedImages">`? It's not shown anywhere in your example. It sounds like $filename is out of scope in the place where you're using it. — ADyson, Sep 06 '17 at 11:00

B. Desai · Answer 1 · 2017-09-06T11:09:05.090

1

If you are getting image_name in ajax the you can concatenate it with full image path

<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) {
          var img = '<img src="{{asset(Storage::url('uploadedImages'))}}/'+data+'" width="100" height="100" id="insertedImages">';
         $("#insertedImages").html(img);  
         alert("Uploaded OK!")
      },

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

 </script>

edited Sep 06 '17 at 11:09

answered Sep 06 '17 at 11:03

B. Desai

16,414
5
26
47

sry,Images were not displaying – Sep 06 '17 at 11:06
but now my url is `http://localhost/AdminPanel/public/storage/uploadedImages/fMSgH4PjuXrz6o5EW8CXjbxHTPX7v5CVrnPiHkBT.png` – Sep 06 '17 at 11:12
my storage path of images is `storage/app/uploadedImages` – Sep 06 '17 at 11:13
if its in `app` directory then add `app` in url `Storage::url('app/uploadedImages')` – B. Desai Sep 06 '17 at 11:14
added ,but no changes – Sep 06 '17 at 11:15
Now what is image url you are getting? – B. Desai Sep 06 '17 at 11:16
http://localhost/AdminPanel/public/storage/app/uploadedImages/UoYIln7MAo1tiBdQff0vbN3dlzRbLynPYHIHBOtN.png – Sep 06 '17 at 11:17
I think `storage` is not reside in `public` directory – B. Desai Sep 06 '17 at 11:22
then how to use this – Sep 06 '17 at 11:23
refer answer here https://stackoverflow.com/questions/43514628/how-to-get-avatar-url-which-are-stored-at-storage-directory-using-laravel-5-4 – B. Desai Sep 06 '17 at 11:35

score 0 · Accepted Answer · answered Sep 06 '17 at 11:14

0

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>

answered Sep 06 '17 at 11:14

Norris Oduro

1,019
8
17

Ok. ll try and let you know – Sep 06 '17 at 11:16
Here, when I simply alerts `data` it alerts the `url value` like `http:\\localhost..\app\uploadedImages\fsfnskhiu.png` – Sep 06 '17 at 11:26
so put the value in an `img` `src` attribute – Norris Oduro Sep 06 '17 at 11:28
are the files uploaded to the `uploadedFiles`? – Norris Oduro Sep 06 '17 at 11:30
uploadedImages ?? – Sep 06 '17 at 11:31
are the files present in that directory? – Norris Oduro Sep 06 '17 at 11:32
can you post the error log from your `laravel.log` file? – Norris Oduro Sep 06 '17 at 11:33
will you please tell me how to get that error log from laravel.log file – Sep 06 '17 at 11:34
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/153774/discussion-between-norris-oduro-and-nishanthi). – Norris Oduro Sep 06 '17 at 11:34

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

2 Answers2