title: JCrop and Ajax Image upload and crop (laravel 5, Jquery)
body: <p>I am currently building and image upload and crop feature on a website. the work flow is as follows</p>
  
  <p>1.upload button is pressed.
  2.A modal opens with an upload box</p>
  
  <p>code for modal:</p>
  
  <pre><code>&lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
  &lt;div class="modal-dialog" role="document"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
              &lt;h4 class="modal-title" id="myModalLabel"&gt;Upload Profile Picture&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;div id="load" class="display-none" style="width:32px;margin:150px auto;"&gt;&lt;img src="img/loading2.gif"&gt;&lt;/div&gt;
              &lt;div class="upload-container"&gt;
               {!! Form::open(['file' =&gt; true, 'Method' =&gt; 'POST', 'id' =&gt; 'profile-image-upload']) !!}
  
              &lt;div class="alert alert-danger display-none error"&gt;
                  &lt;p&gt;File must be an image&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  {!! Form::label('upload', 'Upload Photo') !!}
                  {!! Form::file('upload', ['id' =&gt; 'file-select', 'class' =&gt; 'form-control upload-box']) !!}
              &lt;/div&gt;
  
              {!! Form::close() !!}
              &lt;/div&gt;
              &lt;div id="image-box" class="image display-none" style="text-align:center;"&gt;
                  &lt;img id="large-image" src="" style="max-width:100%;max-height:500px;display:inline-block;"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-default close-button" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <ol start="3">
  <li>click the browse button and select a photo, this instantly triggers an ajax request to upload the image and return the path to it.</li>
  </ol>
  
  <p>server side code:</p>
  
  <pre><code>Route::post('upload-profile-pic', function(){
  
  $input['file'] = Request::file('upload');
  $rules = ['file' =&gt; 'mimes:jpg,png,gif,jpeg'];
  
  $validator = Validator::make(
      $input,
      $rules
  );
  
  if ($validator-&gt;fails())
      return 'false';
  
  $identifier = str_random(20);
  $image = Image::make(Request::file('upload'));
  $image-&gt;encode('png')-&gt;save(public_path(). '/profile-images/temp/' . $identifier . '.png');
  
  return $identifier;
  });
  </code></pre>
  
  <ol start="4">
  <li>On ajax success I load the resulting image into a div and show this in the modal.</li>
  </ol>
  
  <p>Javascript (Jquery):</p>
  
  <pre><code>    $('input[type=file]').change(function () {
  
          $('#load').show();
  
          var formData = new FormData($('#profile-image-upload')[0])
  
          $('.upload-container').hide();
  
          $.ajax({
              type: 'POST',
              url: 'upload-profile-pic',
              data: formData,
              cache: false,
              contentType: false,
              processData: false,
              success: function (data) {
                  $('#load').hide();
                  console.log("success");
                  if (data != 'false')
                      console.log(data)
                  $("#large-image").attr('src', '/profile-images/temp/' + data + '.png');
                  $('.image').show();
                  if (data == 'false')
                      $('.upload-container').show();
                  $('.error').show();
              },
              error: function (data) {
                  $('#load').hide();
                  console.log("error");
                  console.log(data);
              }
          });
      });
  
      $('#myModal').on('hidden.bs.modal', function () {
          $('.error').hide();
          $('.upload-container').show();
          $('.image').hide();
          $('#profile-image-upload').trigger("reset");
      })
  
      $('.close-button').on('click', function () {
          $('.error').hide();
          $('.upload-container').show();
          $('.image').hide();
          $('#profile-image-upload').trigger("reset");
      });
  </code></pre>
  
  <p>I also have two functions that reset the modal if it is canceled, this just hides the image and shows the upload box.</p>
  
  <p>This all works as it should but my problem is that i want to apply Jcrop to the image that is generated. I have tried many things</p>
  
  <p>in the ajax success funtion i added this</p>
  
  <pre><code>$("#large-image").attr('src', '/profile-images/temp/' + data + '.png').Jcrop();
  </code></pre>
  
  <p>The above works the first time but if the modal is closed and then the user tries again it doesn't replace the old image with the new one.</p>
  
  <p>I tried adding</p>
  
  <pre><code>.done(fucntion(){
      $("#large-image").Jcrop(
  });
  </code></pre>
  
  <p>This is the same as the last option, works the first time but doesn't work after that.</p>
  
  <p>I have tried</p>
  
  <pre><code>var image = $("#large-image");
  </code></pre>
  
  <p>then adding this to my ajax success</p>
  
  <pre><code>image.Jcrop()
  </code></pre>
  
  <p>and adding this to the closing functions</p>
  
  <pre><code>image.destroy()
  </code></pre>
  
  <p>This is the same as the last time where it wors the first time and detroy() throws an error in the console.</p>
  
  <p>JavaScript isn't my strong point and i'm quite stuck on this now, can anyone help?</p>