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 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>

this happens because you have two elements with the id "documentFileUpload" — Hacketo
– Hacketo, Commented Dec 30, 2014 at 13:30
Thanks for the clarification.The Id was initially only attributed to file, I remove the id for file, and only kept it in submit, but then no file gets uploaded when i click submit — user3944525
– user3944525, Commented Dec 30, 2014 at 13:34

CodeLikeBeaker · Accepted Answer · 2014-12-30 14:05:01Z

1

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>

edited Dec 30, 2014 at 14:05

answered Dec 30, 2014 at 13:32

CodeLikeBeaker

21.4k14 gold badges83 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user3944525 Over a year ago

thank you for your suggestion. The problem with the current id associated with file, it doesn't wait for the submit button to be hit for the file to be stored into parse. It is stored in parse as soon as the person clicks on the file, and I am trying to figure out ways to also record those two text input

CodeLikeBeaker Over a year ago

What do you mean by record those two text inputs? Are you looking at how to get the value from this fields, or do something else with it?

user3944525 Over a year ago

More like when someone writes bob in userID, and toronto in address that information along with the file gets recorded into Parse upon hitting the submit button.

CodeLikeBeaker Over a year ago

Please see updated answer. This should lead you in the right direction.

user3944525 Over a year ago

Thank you so much for the update, but there seems to be a few issues. 1) I have changed the id of the submit button as indicated so that the file is only submited upon click on the submit button, however, it does not seem to save, but instead gives me an error message. 2) when I add the following lines: var user_id = $('#user_id').val(); var address = $('#address').val(); parseFile.set('UserId', user_id); parseFile.set('Address', address); than nothing happens.

|

Rohith K · Accepted Answer · 2014-12-30 13:33:11Z

0

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.

answered Dec 30, 2014 at 13:33

Rohith K

1,49210 silver badges15 bronze badges

3 Comments

user3944525 Over a year ago

Thank you for your suggestion. I have assigned the two ID seperatetly, my problem is in assigning the submit event that would call the upload function as well as store the two text input fields as well.

Rohith K Over a year ago

You can write callback functions, in which you can call upload function and write the code for saving text fields in the callback function. Callbacks function helps to do multiple functions one after another for a single event.

user3944525 Over a year ago

Hi with support from the community, I am one step closer. The problem that it does not respond with parse, like there a typo somnewhere in the code. for your courteousy I have included an updated code under my initial post

Timothy Walters · Accepted Answer · 2014-12-31 11:47:35Z

0

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

answered Dec 31, 2014 at 11:47

Timothy Walters

16.9k2 gold badges44 silver badges49 bronze badges

4 Comments

user3944525 Over a year ago

thank you for the clarification. How would I adjust the following lines: <form method="post" id='myForm'> <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" value="submit"> </form>

Timothy Walters Over a year ago

Green Chilli's answer with the updated buttons and click handler are good, just move the set calls to the saveDocumentUpload() method as I suggest and you should have a complete solution.

user3944525 Over a year ago

Hi, i have posted an update under the update 2 section of my initial post. There seems to be something missing, and I would appreciate if you could kindly look into it.

Timothy Walters Over a year ago

You still have the lines calling parseFile.set(...), delete those two lines from your click handler.

Collectives™ on Stack Overflow

Save input into Parse (Javascript)

3 Answers 3

6 Comments

3 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related