How to save an image from website to parse.com backend using javascript?

Question

I know very basic of javascript. I have an iOS App using parse.com cloud. Now moderator need a website platform to upload data to the parse.com cloud beside the mobile App. I have set up parse and everything works fine when I want to add a row to the table. However, when I want to add an image to the cloud in this way:

$("#post-form").submit(function(event){

    console.log("submit");
    event.preventDefault();

    var Event = Parse.Object.extend("Event");
    var newEvent = new Event();

    //Get form info
    var currUser = Parse.User.current();
    var eventName = $("#name").val();

    newEvent.set("name",eventName);
    newEvent.set("user",currUser);

    //Get file from form
    var fileElement = $("#post-file")[0];
    var filePath = $("#post-file").val();
    var fileName = filePath.split("\\").pop();
    alert("HERE 1111");
    if(fileElement.files.length > 0){
        alert("HERE 2222");
        var file = fileElement.files[0];
        var newFile = new Parse.File(fileName, file);
        newFile.save({
            success: function() { console.log("success11111");}, 
            error : function(error){ console.log("file save error== "+error.message);}

        }).then(function(theFile){

            newEvent.set("file",theFile);
            newEvent.save(
            {
                success: function(){ console.log("succes222s");}, 
                error : function(error){ console.log("Post file save error= "+error.message);}
            });
        });

    }
    else
    {
        newEvent.save(
        {
            success: function(){ console.log("success33333");}, 
            error : function(error){ console.log("error= "+error.message);}
        });
    }
});

If there is no image selected, it works fine and add a row to the table but when I select an image, I get the following error:

submit
parse-1.6.11.min.js:15 OPTIONS https://api.parse.com/1/1/files/Screen%20Shot%202015-12-16%20at%209.54.30%20am.png 
c @ parse-1.6.11.min.js:15y.ajax @ parse-
1.6.11.min.js:15u.default.setFileController.saveFile @ parse-1.6.11.min.js:13a.value @ parse-1.6.11.min.js:13(anonymous function) @ 
create.html:183f.event.dispatch @ jquery.min.js:3h.handle.i @ jquery.min.js:3
        create.html:1 XMLHttpRequest cannot load 
    https://api.parse.com/1/1/files/Screen%20Shot%202015-12-16%20at%209.54.30%20am.png. Response to preflight request doesn't pass access 
    control check: No 'Access-Control-Allow-Origin' header is present on the requested 
    resource. Origin 'http://mywebsitename.com' is therefore not allowed access. The 
    response had HTTP status code 404.

Appreciate if anyone can give me an easy solution as I know only the basic to upload file to the cloud.

I followed this tutorial: Parse File Upload

And this solution:

SO

But non of them worked for me.

Answer 1

Maybe you are creating a cross-origin HTTP request but the target server do not turn on 'Access-Control-Allow-Origin' flag.

For more detail, please check here: How does Access-Control-Allow-Origin header work?