Parse + Jquery uploading images

I'm creating my first website and I'm trying to create a user system. I've managed to upload images as files to parse, now I want to take it to the next level and let users crop the image before upload.

The problem is that you can't custom your input fields because of security issues. So I'd need a way to convert an image src to the "input:file" value to be able to submit it to parse. The following code is a snippet of my full code, however this is what is highlighted for this issue.

PS I am using cropit.( http://scottcheng.github.io/cropit/ )

HTML
<div class="form-group">
    <div class="col-sm-10 col-sm-offset-2">
        <label style="color:white; display:block;">Profile Picture:</label>

        <img id="target" src="#" style="float:left; display:none;">

        <div class="image-editor">

            <input type="file" id="imageSubmit" class="cropit-image-input">

               <div class="cropit-image-preview"></div>
               <div class="image-size-label">
                  Resize image
               </div>
               <input type="range" class="cropit-image-zoom-input">
               <button class="export" style="color:black">Export</button>
        </div>
     </div>
  </div>

JS

  $(function() {
    $('.image-editor').cropit({
      imageState: {
        src: '',
      },
    });

    $('.export').click(function() {
        var imageData = $('.image-editor').cropit('export');        
        $('#target').toggle();
        $('#target').attr('src', imageData);
        $('.image-editor').toggle();

    });
  });

SIGNUP CODE
$scope.signUp = function(form){

    // Upload image
    var fileUploadControl = $("#imageSubmit")[0];
    if (fileUploadControl.files.length > 0) {
      var file = fileUploadControl.files[0];
      var name = "displayPhoto.jpg";

      var parseFile = new Parse.File(name, file);
    }

    parseFile.save().then(function() {
      alert('success');
    }, function(error) {
      alert('fail');
    });

    var user = new Parse.User();
    user.set("email", form.email);
    user.set("username", form.username);
    user.set("password", form.password);
    user.set("picture", parseFile);


    user.signUp(null, {
        success: function(user){
            $scope.scenario = '';
            $scope.currentUser = user;
            $scope.clearFields();
            $scope.$apply();
        },
        error: function(user, error) {
            $scope.displayError(true, error.message, error.code);
        }
    });
};

So I'd need the src from #target to be copied into the #imageSubmit input to be able to upload my file. I just can't find a way to do this.

Here's a fiddle for the whole experiment. (This opens the SRC in a new window, I've redirect it to an img tag, it's the image that pops up in a new window that I do want to save into parse)

https://jsfiddle.net/lilput/hfa6t6nj/2/

Very thankful for answers!! Cheers :)

SOLVED!!!! Thanks to Aaron Saunders

For anyone who has the same problem. All I did was to remove this whole chunk of code in my signup function:

// Upload image
    var fileUploadControl = $("#imageSubmit")[0];
    if (fileUploadControl.files.length > 0) {
      var file = fileUploadControl.files[0];
      var name = "displayPhoto.jpg";

      var parseFile = new Parse.File(name, file);
    }

    parseFile.save().then(function() {
      alert('success');
    }, function(error) {
      alert('fail');
    });

And replaced it with this:

 // Upload image
    var file = new Parse.File("placeholder.txt", { base64: imageData });

    file.save().then(function() {
        alert('success');
    }, function(error) {
      alert('fail');
    });