Uploading files to parse.com with javascript

Question

I'm attempting to upload an array of files to parse using javascript with the following code:

html:

<fieldset>
    <input type="file" name="fileselect" id="fileselect" multiple></input>
    <input id="uploadbutton" type="button" value="Upload"> </input>
</fieldset>

JS:

$('#uploadbutton').click(function () {
    var fileUploadControl = $("#fileselect")[0];
    if (fileUploadControl.files.length > 0) {
        var file = fileUploadControl.files[0];
        var name = "style.css";
        var parseFile = new Parse.File(name, file);
        var filesArray = [parseFile];
    }
    parseFile.save().then(function() {
        // The file has been saved to Parse.
    }, function(error) {
        // The file either could not be read, or could not be saved to Parse.
    });
    var newStore = new Parse.Object("FileStore");
    newStore.set("files", filesArray);
    newStore.save();
});

I am uploading to a class I have called FileStore with key "files" which is set to an array currently, and I would like to have hold an array of files. Is this the best way to go about uploading multiple files to parse? The code for me isn't working right now. My aim is to have multiple files associated with each object in my class.

Timothy Walters · Accepted Answer · 2015-01-12 06:16:17Z

1

Be careful with async code. Currently your code will have a race condition that will most likely fail because you call newStore.save() before parseFile.save() is finished.

Those 3 lines dealing with newStore should be inside the success handler for parseFile.save(), e.g.:

parseFile.save().then(function() {
    // The file has been saved to Parse.
    var newStore = new Parse.Object("FileStore");
    newStore.set("files", filesArray);
    newStore.save();
}, function(error) {
    // The file either could not be read, or could not be saved to Parse.
});

When you get to saving multiple files you'll need to wait for all of them to finish before moving to the next step. You can chain your promises together to run in Series or in Parallel.

For what you want Parallel would work fine:

var fileSavePromises = [];

// assuming some code that creates each file has stored the Parse.File objects in an
// array called "filesToSave" but not yet called save
_.each(filesToSave, function(file) {
    fileSavePromises.push(file.save());
});

Parse.Promise.when(fileSavePromises).then(function() {
    // all files have saved now, do other stuff here
    var newStore = new Parse.Object("FileStore");
    newStore.set("files", filesToSave);
    newStore.save();
});

answered Jan 12, 2015 at 6:16

Timothy Walters

16.9k2 gold badges44 silver badges49 bronze badges

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

2 Comments

Mohammed B Over a year ago

No luck with this unfortunately :/

rashadb Over a year ago

@thankyouinadvance did you ever get this working? The docs for Parse.File aren't working as I understand it and I tried exactly what you present above and I only do it for a single file and I get an error saying Creating a Parse.File from a String is not yet supported. Everything I see comments on some base64 thing but it goes into no greater detail. Any help you could lend would be so much appreciated!

Ashoor · Accepted Answer · 2015-04-14 17:03:26Z

I have managed to solve this with the help of @Timothy code, full code after edit:

    var fileUploadControl = $("input[type=file]")[0];
    var filesToSave = fileUploadControl.files;

    var fileSavePromises = [];

    // assuming some code that creates each file has stored the Parse.File objects in an
    // array called "filesToSave" but not yet called save
    _.each(filesToSave, function(file) {
        var parseFile = new Parse.File("photo.jpg", file);
        fileSavePromises.push(
            parseFile.save().then(function() {
              // The file has been saved to Parse.
              $.post("/i", {
                file: {
                  "__type": "File",
                  "url": parseFile.url(),
                  "name": parseFile.name()
                }
              });
            })
        );
    });

    Parse.Promise.when(fileSavePromises).then(function() {
        // all files have saved now, do other stuff here
        window.location.href = "/";
    });

Collectives™ on Stack Overflow

Uploading files to parse.com with javascript

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related