Save input into Parse (Javascript)

Currently when the user select a file, it gets directly uploaded into Parse. I have added now couple input text field such as name of individual, address that I would want to be recorded into Parse at the same time only when the user has click the select button as of now its automatically submitted once the user has selected the file.

$(document).ready(function() {
  // ***************************************************
  // NOTE: Replace the following your own keys
  // ***************************************************
  Parse.initialize("id", "id");

  function saveDocumentUpload(objParseFile) {
    var documentUpload = new Parse.Object("Scan");
    documentUpload.set("Name", "");

    documentUpload.set("DocumentName", objParseFile);
    documentUpload.save(null, {
      success: function(uploadResult) {
        // Execute any logic that should take place after the object is saved.
        var photo = uploadResult.get("profileImg");
        $("#profileImg")[0].src = photo.url();
      },
      error: function(uploadResult, error) {
        // Execute any logic that should take place if the save fails.
        // error is a Parse.Error with an error code and description.
        alert('Failed to create new object, with error code: ' + error.description);
      }
    });

   
  }

  $('#documentFileUpload').bind("change", function(e) {
    var fileUploadControl = $("#documentFileUpload")[0];
    var file = fileUploadControl.files[0];
    var name = file.name; //This does *NOT* need to be a unique name
    var parseFile = new Parse.File(name, file);

    parseFile.save().then(
      function() {
        saveDocumentUpload(parseFile);
      },
      function(error) {
        alert("error");
      }
    );
  });
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.15.min.js"></script>
<form>
  <input type="file" id="documentFileUpload">
  <br />
  <input type="text" value="UserID">
  <br />
  <input type="text" value="Address">
  <br />
  <input type="submit" id="documentFileUpload" value="submit">
</form>

Update 2:

    <HTML>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.15.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {

      // ***************************************************
      // NOTE: Replace the following your own keys
      // ***************************************************

        Parse.initialize("id", "id");

      function saveDocumentUpload(objParseFile)
      {
         var documentUpload = new Parse.Object("Scan");
         documentUpload.set("Name", "");

         documentUpload.set("DocumentName", objParseFile);
         documentUpload.save(null, 
         {
            success: function(uploadResult) {
              // Execute any logic that should take place after the object is saved.

            },
            error: function(uploadResult, error) {
              // Execute any logic that should take place if the save fails.
              // error is a Parse.Error with an error code and description.
              alert('Failed to create new object, with error code: ' + error.description);
            }
         });
      }

      $('#documentFileUploadButton').bind("click", function (e) {
            var fileUploadControl = $("#documentFileUpload")[0];
            var file = fileUploadControl.files[0];
            var name = file.name; //This does *NOT* need to be a unique name
            var parseFile = new Parse.File(name, file);

            var user_id = $('#user_id').val();

            var address = $('#address').val();


            parseFile.set('UserId', user_id);
            parseFile.set('Address', address);


            parseFile.save().then(
                    function () {
                        saveDocumentUpload(parseFile);
                    },
                    function (error) {
                        alert("error");
                    }
            );
        });
    });
    </script>

    <body><form>
        <input type="file" id="documentFileUpload">
        <br/>
        <input type="text" placeholder="UserID" id="user_id">
        <br/>
        <input type="text" placeholder="Address" id="address">
        <br/>
        <input type="submit" id="documentFileUploadButton" value="submit">
    </form>
    </body>
    </HTML>

**Updated 2:**
<HTML>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.15.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

  // ***************************************************
  // NOTE: Replace the following your own keys
  // ***************************************************

    Parse.initialize("pWG7YizRnwxRjplGT9RSLoHtFItDtvmc2EK0YJAe", "C2qlan3y2PXi6nwVbACGT6fY3CTus8oVEvNo889u");

   function saveDocumentUpload(objParseFile)
  {
     var documentUpload = new Parse.Object("Scan");
     documentUpload.set("Name", "");

     documentUpload.set("DocumentName", objParseFile);

     var user_id = $('#user_id').val();

     var address = $('#address').val();

     // create a pointer by assigning just an ID
     var user = new Parse.User();
     user.id = user_id;

     documentUpload.set('User', user);
     documentUpload.set('Address', address);

     documentUpload.save(null, 
     {
        success: function(uploadResult) {
          // Execute any logic that should take place after the object is saved.

        },
        error: function(uploadResult, error) {
          // Execute any logic that should take place if the save fails.
          // error is a Parse.Error with an error code and description.
          alert('Failed to create new object, with error code: ' + error.description);
        }
     });
  }

  $('#documentFileUploadButton').bind("click", function (e) {
        var fileUploadControl = $("#documentFileUpload")[0];
        var file = fileUploadControl.files[0];
        var name = file.name; //This does *NOT* need to be a unique name
        var parseFile = new Parse.File(name, file);

        var user_id = $('#user_id').val();

        var address = $('#address').val();


        parseFile.set('UserId', user_id);
        parseFile.set('Address', address);


        parseFile.save().then(
                function () {
                    saveDocumentUpload(parseFile);
                },
                function (error) {
                    alert("error");
                }
        );
    });
});
</script>

<body><form>
    <input type="file" id="documentFileUpload">
    <br/>
    <input type="text" placeholder="UserID" id="user_id">
    <br/>
    <input type="text" placeholder="Address" id="address">
    <br/>
    <input type="submit" id="documentFileUploadButton" value="submit">
</form>
</body>
</HTML>

Answers:

Answer

You have "documentFileUpload" twice:

Change:

<form>
    <input type="file" id="documentFileUpload">
    <br />
    <input type="text" value ="UserID"><br />
    <input type="text" value ="Address"> <br />
    <input type="submit"  id="documentFileUpload" value="submit">

</form>

To:

<form>
    <input type="file" id="documentFileUpload">
    <br />
    <input type="text" value ="UserID"><br />
    <input type="text" value ="Address"> <br />
    <input type="submit"  id="documentFileUploadButton" value="submit">

</form>

Edit

To answer your comment about the recording of the UserId and Address fields, please see the following code. I changed the file upload binding to the button and bound the click event. This will fix your file uploading on selection.

Also, added the id's user_id, and address to allow jQuery to get the values from those fields:

$('#documentFileUploadButton').bind("click", function (e) {
        var fileUploadControl = $("#documentFileUpload")[0];
        var file = fileUploadControl.files[0];
        var name = file.name; //This does *NOT* need to be a unique name
        var parseFile = new Parse.File(name, file);

        var user_id = $('#user_id').val();

        var address = $('#address').val();

        parseFile.set('UserId', user_id);
        parseFile.set('Address', address);

        parseFile.save().then(
                function () {
                    saveDocumentUpload(parseFile);
                },
                function (error) {
                    alert("error");
                }
        );
    });

And then:

<form>
    <input type="file" id="documentFileUpload">
    <br/>
    <input type="text" value="UserID" id="user_id">
    <br/>
    <input type="text" value="Address" id="address">
    <br/>
    <input type="submit" id="documentFileUploadButton" value="submit">
</form>
Answer

The problem is your submit button and the file input has same id. Change the id's accordingly and assign events to them separately. Assign submit event to submit button which eventually calls the upload function.

Answer

Other than the other issues found and fixed, you're also trying to treat a Parse.File like a Parse.Object.

You can't call set(column, value) on a Parse.File, as it is just a file. Once you save the file you add it to your object as a column.

In your case that means that the UserID and Address columns have to go on your Scan class. Also I would suggest you change the UserID column to a pointer and name it User as it will make queries much easier, e.g.:

  function saveDocumentUpload(objParseFile)
  {
     var documentUpload = new Parse.Object("Scan");
     documentUpload.set("Name", "");

     documentUpload.set("DocumentName", objParseFile);

     var user_id = $('#user_id').val();

     var address = $('#address').val();

     // create a pointer by assigning just an ID
     var user = new Parse.User();
     user.id = user_id;

     documentUpload.set('User', user);
     documentUpload.set('Address', address);

     documentUpload.save(null, 
     {
        success: function(uploadResult) {
          // Execute any logic that should take place after the object is saved.

        },
        error: function(uploadResult, error) {
          // Execute any logic that should take place if the save fails.
          // error is a Parse.Error with an error code and description.
          alert('Failed to create new object, with error code: ' + error.description);
        }
     });
  }

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.