Save input into Parse (Javascript)

Question

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

Answer 1

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);
        }
     });
  }

Answer 2

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 3

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.