Parse.com JavaScript SDK uploading file from url

Question

I am trying to upload a user profile picture to parse.com with JavaScript SDK and I am stuck in referencing a media file. All the tutorials and documentation I could found point to 'uploading a local file' but I am trying to upload a file from url.

$('#parse').on('click', function () {

    Parse.initialize(xxx, yyy);

    var user = new Parse.User();
    user.set("username", photos.owner_name);
    user.set("password", "12349876");
    user.set("email", photos.owner_id + "@blabla.com");

// other fields can be set just like with Parse.Object
    user.set("phone", "000-000-0000");
    user.set("nameLowerCase", photos.owner_name.toLowerCase());
    user.set("name", photos.owner_name);


    var url = '/images/tpp.png';
    user.set("profileThumbnail", url);


    user.signUp(null, {
        success: function (user) {
            console.log(user);

        },
        error: function (user, error) {

            alert("Error: " + error.code + " " + error.message);
        }
    });

});

The documentation shows you how to upload a file to Parse cloud and using it's url; because I have the file uploaded already, I don't need to upload to Parse cloud.

I know, "url" variable is a string and I am lost. I appreciate any help in advance.

Answer 1

I found the solution:

Parse doesn't accept any file outside it's cloud to save object. Therefore we need to upload the file to parse cloud first.

To upload a file to parse cloud we use the below code:

var parseFile = new Parse.File(filename, file);
parseFile.save().then(function (parseFile) {
    url = parseFile.name();
    classname.set({objectname: {"name": url, "__type": "File"}});
});

This code is useful when we upload a local file; but when we want to upload a file from url, first we need to encode the file into base64.

Below there is the whole solution to my question:

$('#parse').on('click', function () {

    Parse.initialize(xxx, yyy);

    var user = new Parse.User();
    user.set("username", photos.owner_name);
    user.set("password", "12349876");
    user.set("email", photos.owner_id + "@timeset.com");

// other fields can be set just like with Parse.Object
    user.set("phone", "000-000-0000");
    user.set("nameLowerCase", photos.owner_name.toLowerCase());
    user.set("name", photos.owner_name);

//base64 encoder with File Reader
    function base64encode(url, callback) {
        var xhr = new XMLHttpRequest();
        xhr.responseType = 'blob';
        xhr.onload = function () {
            var reader = new FileReader();
            reader.onloadend = function () {
                callback(reader.result);
            };
            reader.readAsDataURL(xhr.response);
        };
        xhr.open('GET', url);
        xhr.send();
    }

    base64encoder('/images/tpp.png', function (base64Img) {
        imge = base64Img;
        simge = imge.split(',');
        simge = simge[1];
        parseFile = new Parse.File("profilePicture.png", {"base64": simge});
    });

    parseFile.save().then(function (parseFile) {

        url1 = parseFile.name();

        user.set({profileThumbnail: {"name": url1, "__type": "File"}});

        user.signUp(null, {
            success: function (user) {
                console.log(user);
                // Hooray! Let them use the app now.
            },
            error: function (user, error) {
                // Show the error message somewhere and let the user try again.
                alert("Error: " + error.code + " " + error.message);
            }
        });


    });

});