NativeScript file upload to QuickBlox example (iOS)

app.component.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var quickblox_1 = require("./quickblox");
var core_1 = require("@angular/core");
var fs = require("tns-core-modules/file-system");
var imagepicker = require("nativescript-imagepicker");
var bghttp = require("nativescript-background-http");
var parseUri = require("parseUri");

var AppComponent = (function () {
    function AppComponent(_changeDetectionRef) {
        this._changeDetectionRef = _changeDetectionRef;
        quickblox_1.QB.init(36125, 'gOGVNO4L9cBwkPE', 'JdqsMHCjHVYkVxV', { debug: { mode: 1 } });
        quickblox_1.QB.createSession({ email: 'qq@qq.qq', password: 'qq@qq.qq' }, function (err, session) { });
    }

    AppComponent.prototype.getFileAndUpload = function () {
      var file = fs.File.fromPath(this.filePath);
      var size = file.readSync().length;
      var contentType = 'image/jpeg';
                    
      var self = this;
                    
      console.log(size);
        
      // create QuickBlox blob
      var params = {
        name: file.name,
        content_type: contentType,
        public: false
      };
      quickblox_1.QB.content.create(params, function (err, createResult) {
        var uri = parseUri(createResult.blob_object_access.params),
            uploadUrl = uri.protocol + "://" + uri.authority + uri.path;
                                    
        var blobId = createResult.id;
            
        var uploadParams = [];
        Object.keys(uri.queryKey).forEach(function(val) {
           uploadParams.push({name: val, value: decodeURIComponent(uri.queryKey[val])});
        });
        uploadParams.push({name: "file", filename: self.filePath, mimeType: contentType}); // If the element is named anything other than 'file', you're likely to receive a MaxPostPreDataLengthExceededError response when upload to S3.
        
        var request = {
            url: uploadUrl,
            method: "POST"
        };
         
        var session = bghttp.session("image-upload");
        var task = session.multipartUpload(uploadParams, request);
                                    
        function onEvent(e) {
            console.log("event: " + e.eventName);
            if(e.object.description){
              console.log(e.object.description);
            }
            if(e.error){
              console.log(e.error);
            }
            if(e.currentBytes){
              console.log(e.currentBytes + " of " + e.totalBytes);
            }
            if(e.data){
              console.log(e.data);
            }
               
            if(e.eventName == "complete"){
                 // mark blob as uploaded on QuickBlox side
                 quickblox_1.QB.content.markUploaded({id: blobId, size: size}, function (err, res) {
                     if(!err){
                       console.log("SUCCESS!");
                     }
                 });
            }
        }
           
        task.on("progress", onEvent.bind(this));
        task.on("error", onEvent.bind(this));
        task.on("responded", onEvent.bind(this));
        task.on("complete", onEvent.bind(this));
      });
    };
                    
    AppComponent.prototype.onSelectImage = function () {
        var _this = this;
        var context = imagepicker.create({ mode: "single" });
        context.authorize()
        .then(function () {
              return context.present();
              }).then(function (selection) {
                      selection.forEach(function (selected) {
                                        selected.getImage()
                                        .then((imageSource) => {
                                              var originPathSplited = selected.fileUri.split("/");
                                              var origFilename = originPathSplited[originPathSplited.length-1];
                                              _this.filePath = fs.path.join(fs.knownFolders.documents().path, origFilename);
                                              var saved = imageSource.saveToFile(_this.filePath, "jpeg");
                                              console.log("new path: " + _this.filePath);
                                              console.log(`item saved:${saved}`);
                                              },(error) => {
                                              
                                              })
                                        });
                      }).catch(function (e) { return console.log(e); });
    };


    AppComponent = __decorate([
        core_1.Component({
            selector: "my-app",
            template: "\n        <ActionBar>\n            <ActionBar title=\"Image Uploader\"></ActionBar>\n        </ActionBar>\n        <FlexboxLayout height=\"100%\" flexDirection=\"column\" justifyContent=\"space-between\">\n            <Image [src]=\"item\" height=\"60%\" horizontalAlignment=\"center\"></Image>\n            <FlexboxLayout flexDirection=\"column\" justifyContent=\"center\">\n                <Button text=\"Pick Single\" (tap)=\"onSelectImage()\"></Button>\n                <Button text=\"Upload Single\" (tap)=\"getFileAndUpload()\"></Button>\n            </FlexboxLayout>\n        </FlexboxLayout>\n    ",
            styleUrls: ["buttons.css"]
        }),
        __metadata("design:paramtypes", [core_1.ChangeDetectorRef])
    ], AppComponent);
    return AppComponent;
}());
exports.AppComponent = AppComponent;

Thanks Igor! By chance is the original .TS file available?

Thanks for the demo. The upload does seem to work for iOS (Success! is output at the end after some progress events). For android though, I am consistently "TypeError: Cannot set property 'NAMESPACE' of undefined" on the line:
const session = bghttp.session("image-upload");

Could you guys provide a similar code snippet that will work for android? Thanks!

@RacknerFrank
What a version of nativescript-background-http did you use?
I have looked to releases of the plugin and seen fix for the issue in v.3.2.3

I'm on version 3.2.5 and unfortunately I'm still getting that error

I found the same issue in the nativescript-background-http repository (closed issues).
We will try to resolve this and let you know if there is any news.

Thanks!

@Vladlukhanin any update on this?