Parse JS : Error: Tried to encode an unsaved file

Question

This error happens when I try to upload two files simultaneously that call the same controller for submission. Here is the relevant code:

And the controller methods :

fileChanged(files, type, i) {
    const self = this;
    const file = files[0];
    console.log(type.name, files);
    window.URL = window.URL || window.webkitURL;
    self['files'] = self['files'] || {};
    self['files'][type.name] = {
        file: file,
        blob: window.URL.createObjectURL(file)
    };

    var typeHolder = document.querySelector('.image' + i).innerHTML = "Uploading File.." + file.name;        
        this.$scope.$apply();
        this.submit(self.$scope.user, i)
}

And the submit method:

submit(user, i) {
        console.log('user', user);
        const self = this;
        //var UserDocument = Parse.Object.extend('UserDocument');
        this.$scope.mutex =0;
        var promises = [];

        for (self.$scope.doctype.documentType in this.files) {
            console.log("Files", this.files)

            if (this.files.hasOwnProperty(self.$scope.doctype.documentType)) {

                var parseFile = new Parse.File(self.$scope.doctype.documentType + i +'.' + this.files[self.$scope.doctype.documentType].file.name.split('.').pop(), this.files[self.$scope.doctype.documentType].file);


                if (!self.$scope.doc) {
                    var objUserDocType = new this.UserDocumentType();
                    console.log("reached here");
                    var docType = self.$scope.usd.find(o => o.documentType == self.$scope.doctype.documentType);
                    objUserDocType.id = docType.objectId;

                    this.objUserDoc.set('docType', objUserDocType);
                }
                // console.log("reached here too!");
                this.objUserDoc.set('owner', Parse.User.current());
                //objUserDoc.set('status', 'inReview');
                this.objUserDoc.set('image' + i, parseFile);
                self.$scope.submitted = 1;

                var p = this.objUserDoc.save().....

So when I try to upload one image before the other one has been saved, I get the error:

upload.controller.js:110 error objUserDoc Error: Tried to encode an unsaved file.
    at encode (http://localhost:3000/app-1db45d.js:92569:14)
    at ParseObjectSubclass._getSaveJSON (http://localhost:3000/app-1db45d.js:88168:40)
    at ParseObjectSubclass._getSaveParams (http://localhost:3000/app-1db45d.js:88176:24)
    at task (http://localhost:3000/app-1db45d.js:89758:34)
    at TaskQueue.enqueue (http://localhost:3000/app-1db45d.js:94528:10)
    at Object.save (http://localhost:3000/app-1db45d.js:89768:31)
    at ParsePromise.wrappedResolvedCallback (http://localhost:3000/app-1db45d.js:90767:44)
    at ParsePromise.resolve (http://localhost:3000/app-1db45d.js:90705:37)
    at ParsePromise. (http://localhost:3000/app-1db45d.js:90777:30)
    at ParsePromise.wrappedResolvedCallback (http://localhost:3000/app-1db45d.js:90767:44)

What can I do to resolve this??

thanks in advance

danh · Accepted Answer

Two key ideas are needed: (a) we must save the file, then save the referencing object, and (b) to do N file-object saves, accumulate the save promises first, then execute all of them with Promise.all().

I tried to re-arrange your code to illustrate, but with an important caveat: I don't understand the app, nor can I see the controller surrounding all this, so the code here must be checked carefully to insure that it correctly refers to the controller level objects, including $scope.

// save a parse file, then the parse object that refers to it
function saveUserDocWithFile(objUserDoc, doctype) {
    var parseFile = new Parse.File(doctype.documentType + i +'.' + this.files[doctype.documentType].file.name.split('.').pop(), this.files[doctype.documentType].file);

    // first save the file, then update and save containing object
    this.$scope.submitted = 1;
    return parseFile.save().then(function() {    
       objUserDoc.set('image' + i, parseFile);
       return objUserDoc.save();
    });
}

With that, the submit function is simpler. It just needs to create an array of promises and execute them (using Promise.all()).

submit(user, i) {
    console.log('user', user);
    const self = this;
    //var UserDocument = Parse.Object.extend('UserDocument');
    self.$scope.mutex =0;
    var promises = [];

    for (self.$scope.doctype.documentType in self.files) {
        console.log("Files", self.files)

        if (self.files.hasOwnProperty(self.$scope.doctype.documentType)) {
            if (!self.$scope.doc) {
                self.objUserDoc.set('docType', objUserDocType());
            }
            self.objUserDoc.set('owner', Parse.User.current());
            var promise = saveUserDocWithFile(self.objUserDoc, self.$scope.doctype);
            promises.push(promise);
        }
    }
    return Promise.all(promises);
}

// factor out objUserDocType creation for readability
function objUserDocType() {
    var objUserDocType = new this.UserDocumentType();
    var docType = this.$scope.usd.find(o => o.documentType == this.$scope.doctype.documentType);
    objUserDocType.id = docType.objectId;
    return objUserDocType;
}

Parse JS : Error: Tried to encode an unsaved file

Answers (1)

Related Questions