0

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.

1 Answer 1

2

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


    });

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

1 Comment

This encoding works with react-native too, just a note for whoever is looking for it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.