0

I want to store two text field (userID, and address), as well as the file the user has uploaded to parse, but despite support, my attempt has been unsuccessful. I am not sure if there a typo that lies in the code, but it just doesn't seem to record in Parse.

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

Update:

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

  $('#myForm').bind("submit", function (e) {
    e.preventDefault();
        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 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>
</body>
</HTML>
5
  • I was unable to get my question resolved thats why. Commented Dec 30, 2014 at 15:18
  • There is no question, the code shared is the same. (So you're saying that's a duplicate ?) Commented Dec 30, 2014 at 15:20
  • It looks like you are posting the form normally instead of intercepting the submit. Does the page reload when you submit the form? Commented Dec 30, 2014 at 16:36
  • Hi Jack, yes the page reloads when I hit the submit button. How would I "intercept the submit" Commented Dec 30, 2014 at 16:38
  • when i remove the form i get the following error: file.html:45 Uncaught TypeError: undefined is not a functionfile.html:45 (anonymous function)jquery.min.js:3 o.event.dispatchjquery.min.js:3 r.handle Commented Dec 30, 2014 at 16:42

1 Answer 1

0

First, do you have your api keys entered properly? I'm assuming you changed this out to post on here, but if not they need your keys.

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

You're posting the form back normally so your javascript isn't running.

Change your button click to the below - give your form some Id - I gave it an Id of myForm for this example.

Instead of:

$('#documentFileUploadButton').bind("click", function (e) {
     //your code to run
});

try:

$('#myForm').bind("submit", function (e) {
     e.preventDefault();
     //your code to run
 });
Sign up to request clarification or add additional context in comments.

3 Comments

thank you, do i remove the id for the submit input
@SystemAdminstrator not quite sure what you mean. Your submit button can have an Id, you just won't be using it anymore. You want to give your form the Id to bind the submit.
thanks for the clarifcation. I have provided the form an id, but recieve the following error on console upon pressing submit " Uncaught TypeError: undefined is not a functionfile.html:46 (anonymous function)jquery.min.js:3 o.event.dispatchjquery.min.js:3 r.handle" for your courteousy i have attached an updated code to this message