title: Passing an image to croppic loadPicture before uploading & cropping
body: <p>I am using bootstrap modals to create a step by step guide to uploading an image.</p>
  
  <p>The steps include:</p>
  
  <ol>
  <li>Upload image button</li>
  <li>Opens upload image modal</li>
  <li>Select image file from local resource.</li>
  <li>Load image in separate croppic modal</li>
  </ol>
  
  <p>My question is. How can I pass the image file from the step 2 input to the loadPicture parameter in step 4.</p>
  
  <p>Here is my current code:</p>
  
  <pre><code>$(document).on('change', '.btn-file :file', function() {
  
      var input       =   $(this);
      var numFiles    =   input.get(0).files ? input.get(0).files.length : 1;
      var label       =   input.val().replace(/\\/g, '/').replace(/.*\//, '');
                          loadImageFromInput(this,'image-uploaded');
                          input.trigger('fileselect', [numFiles, label]);
  
      var log = numFiles &gt; 1 ? numFiles + ' files selected' : label;
  
      if(log){
          var picture = $('#image-uploaded').attr('src');
  
          if(picture == ''){
              picture = 'tests/images/croppic/assets/img/night.jpg';
          }
  
          var croppicHeaderOptions2 = {
              uploadUrl:'tests/images/croppic/img_save_to_file.php',
              cropData:{
                  "dummyData":1,
                  "dummyData2":"asdas"
              },
              cropUrl:'tests/images/croppic/img_crop_to_file.php',
              loadPicture:picture,
              modal:false,
              processInline:true,
              loaderHtml:'&lt;div class="loader bubblingG"&gt;&lt;span id="bubblingG_1"&gt;&lt;/span&gt;&lt;span id="bubblingG_2"&gt;&lt;/span&gt;&lt;span id="bubblingG_3"&gt;&lt;/span&gt;&lt;/div&gt; ',
              onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
              onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
              onImgDrag: function(){ console.log('onImgDrag') },
              onImgZoom: function(){ console.log('onImgZoom') },
              onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
              onAfterImgCrop:function(){ console.log('onAfterImgCrop') },
              onError:function(errormessage){ console.log('onError:'+errormessage) }
          }   
  
          var croppic = new Croppic('croppic2', croppicHeaderOptions2);
  
          $('.upload-picture-modal').modal('hide');
          $('.croppic-modal').modal('show');
      }
  
  });
  </code></pre>