Parse JavaScript Upload or update file match objectId of row in table

Question

I am also new on Parse.com. I have done upload file through Javascript, but I want to do that file upload against a row in class by find "objectId". But I can't find any solution :(

Below is my code where I am upload file...

<html>
            <head>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/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">
            Parse.initialize("2Rsgjz6VQiozYpqQClfmBHQASTTtrdQpUoe2", "fIccKcC9sMH48CKkGYIk62wsA8tTgPpByip");


              $(function() {
                var file;

                // Set an event listener on the Choose File field.
                $('#fileselect').bind("change", function(e) {
                  var files = e.target.files || e.dataTransfer.files;
                  // Our file var now holds the selected file
                  file = files[0];
                });

                // This function is called when the user clicks on Upload to Parse. It will create the REST API request to upload this image to Parse.
                $('#uploadbutton').click(function() {
                  var serverUrl = 'https://api.parse.com/1/files/' + file.name;

                  $.ajax({
                    type: "POST",
                    beforeSend: function(request) {
                      request.setRequestHeader("X-Parse-Application-Id", '2Rsgjz6VQiozYpxWBfmBHQASTTtrdQpUoe2');
                      request.setRequestHeader("X-Parse-REST-API-Key", 'UPxPXDIkkC6lc52TYpQZ4bX5DjrWH9Wy7');
                      request.setRequestHeader("Content-Type", file.type);
                    },
                    url: serverUrl,
                    data: file,
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    success: function(data) {
                    var file_input = document.getElementById("url").innerHTML = '<a href="' + data.url + '">'+ data.url + '</a>';
                    var classUrl = "https://api.parse.com/1/classes/sampleClass"

                     if(data) {

            var fileName = "" + data.name;
            $.ajax({
                type: "POST",
                beforeSend: function(request) {
                    request.setRequestHeader("X-Parse-Application-Id", '2Rsgjz6VQiozYpqQClcxWBfmBHQASTTtrdQpUoe2');
                    request.setRequestHeader("X-Parse-REST-API-Key", 'UPxPXDIkkCLY2M2b56lc52TYpQZ4bX5DjrWH9Wy7');
                    request.setRequestHeader("Content-Type", 'application/json');
                },
                url: classUrl,
                data: '{"upload" : {"name" : '+"\""+fileName+"\""+', "__type" : "File"}}',
                processData: false,

                success: function(data) {
                    console.log("Image successfully uploaded.");
                },

                error: function(error) {
                    console.log("Error: " + error.message);
                }
            });

        } else {
            //Data is null
            console.log("Data IS NULL");
        }

                    },
                    error: function(data) {
                      var obj = jQuery.parseJSON(data);
                      alert(obj.error);
                    }
                  });
                });


              });
            </script>

            </head>
            <body>

            <div id="url">
            </div>

            <form id="fileupload" name="fileupload" enctype="multipart/form-data" method="post">
              <fieldset>
                <input type="file" name="fileselect" id="fileselect"></input>
                <input id="uploadbutton" type="button" value="Upload to Parse"/>
              </fieldset>
            </form>


            </body>

            </html>

Answer 1

I solved it. Just replace in second "ajax" "POST" to "PUT" and also set "objectId" of object you want to update in url for update existing file. My Code is below...

$(document).ready(function() {

//Init Parse SDK
Parse.initialize("yourappkey", "yourjskey");

//File Upload
var file;

// Set an event listener on the Choose File field.
$('#fileselect').bind("change", function(e) {
    var files = e.target.files || e.dataTransfer.files;
    // Our file var now holds the selected file
    file = files[0];
});

// This function is called when the user clicks on Upload to Parse. It will create the REST API request to upload this image to Parse.
$('#uploadbutton').click(function() {

    var serverUrl = 'https://api.parse.com/1/files/' + file.name;

    $.ajax({
        type: "POST",
        beforeSend: function(request) {
            request.setRequestHeader("X-Parse-Application-Id", 'yourappid');
            request.setRequestHeader("X-Parse-REST-API-Key", 'yourrestapikey');
            request.setRequestHeader("Content-Type", file.type);
        },
        url: serverUrl,
        data: file,
        processData: false,
        contentType: false,
        dataType: 'json',
        success: function(data) {

            //Change variable to reflect your class to upload to
            var classUrl = "https://api.parse.com/1/classes/ClassName/objectId"

            if(data) {

                var fileName = "" + data.name;
                $.ajax({
                    type: "PUT",
                    beforeSend: function(request) {
                      request.setRequestHeader("X-Parse-Application-Id", 'yourappid');
                    request.setRequestHeader("X-Parse-REST-API-Key", 'yourrestapikey');
                        request.setRequestHeader("Content-Type", 'application/json');
                    },
                    url: classUrl,
                    data: '{"upload" : {"name" : '+"\""+fileName+"\""+', "__type" : "File"}}',
                    processData: false,

                    success: function(data) {
                        console.log("Image successfully uploaded.");
                    },

                    error: function(error) {
                        console.log("Error: " + error.message);
                    }
                });

            } else {
                //Data is null
                console.log("Data IS NULL");
            }
        },
        error: function(data) {
            var obj = jQuery.parseJSON(data);
            alert(obj.error);
        }
    });
});
});

Parse JavaScript Upload or update file match objectId of row in table

Question

1 answers

solution1
0 ACCPTED 2014-08-11 09:03:57

Parse JavaScript Upload or update file match objectId of row in table

Question

1 answers

solution1 0 ACCPTED 2014-08-11 09:03:57

solution1
0 ACCPTED 2014-08-11 09:03:57