title: How to show image preview before uploading from controller in php laravel
body: <p>i'm working in a project where i wanted to upload an image for Category.
  The uploading part is working smooth.
  what i want is before uploading, when user selects the image a preview of the selected image along with name of the image should be shown.
  I'm pretty lost in this case.</p>
  
  <p>Below is my view part:</p>
  
  <pre><code>{!! Form::open(['url' =&gt; '/addCategory', 'method' =&gt; 'post', 'enctype'=&gt;  'multipart/form-data']) !!}
          {{ csrf_field() }}
            @method('post')
  
  
  
            &lt;div class="card "&gt;
              &lt;div class="card-header card-header-primary"&gt;
                &lt;h4 class="card-title"&gt;{{ __('Add Category') }}&lt;/h4&gt;
                &lt;p class="card-category"&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="card-body "&gt;
                &lt;div class="row"&gt;
                  &lt;label class="col-sm-2 col-form-label"&gt;{{ __('Name') }}&lt;/label&gt;
                  &lt;div class="col-sm-7"&gt;
                    &lt;div class="form-group{{ $errors-&gt;has('name') ? ' has-danger' : '' }}"&gt;
                      &lt;input class="form-control{{ $errors-&gt;has('name') ? ' is-invalid' : '' }}" name="category" id="category" type="text" placeholder="{{ __('Name') }}" value="" required="true" aria-required="true" /&gt;
  
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;div class="row"&gt;
                  &lt;label class="col-sm-2 col-form-label"&gt;{{ __('Description') }}&lt;/label&gt;
                  &lt;div class="col-sm-7"&gt;
                    &lt;div class="form-group{{ $errors-&gt;has('name') ? ' has-danger' : '' }}"&gt;
                      &lt;textarea class="md-textarea form-control" rows="5" name="desc" id="desc" type="text" placeholder="{{ __('Description') }}" value="" required="true" aria-required="true"&gt;&lt;/textarea&gt;
  
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
  
                &lt;div class="row"&gt;
                  &lt;label for="image" class="col-sm-2 col-form-label"&gt;Category Image&lt;/label&gt;
                  &lt;div class="col-sm-7"&gt;
                    &lt;input id="cat_image" type="file" class="form-control" name="cat_image"&gt;
                    &lt;img src="" id="category-img-tag" width="200px" /&gt;   &lt;!--for preview purpose --&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
              &lt;/div&gt;
              &lt;div class="card-footer ml-auto mr-auto"&gt;
                &lt;button type="submit" class="btn btn-primary"&gt;{{ __('Add Category') }}&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p>Below is the controller part:</p>
  
  <pre><code>public function upload(Request $request)
      {
          $cat = new Category;
          $cat-&gt;name = request('category');
          $cat-&gt;description = request('desc');
          if ($request-&gt;file('cat_image')) 
          {
              $categoryFile = $request-&gt;file('cat_image');
              $mimeType = $categoryFile-&gt;getClientOriginalName();
              $path =  public_path() . '/storage/category/';
              $categoryFile-&gt;move($path, $mimeType);
  
              $cat-&gt;cat_image = $mimeType;
          }   
          $cat-&gt;save();
  
          toastr()-&gt;success($cat-&gt;name,'Category added!');
  
          return redirect('/category');
      }
  </code></pre>
  
  <p>I have done uploading using controller instead of ajax because there were some complications...So kindly help me with image preview from controller.</p>
  
  <p><a href="https://i.stack.imgur.com/Rmoem.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Rmoem.png" alt="enter image description here"></a></p>