Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
NativeScript file upload to QuickBlox example (iOS)
"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;
@datanotion

This comment has been minimized.

Copy link

commented Apr 23, 2018

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

@RacknerFrank

This comment has been minimized.

Copy link

commented Apr 30, 2018

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!

@Vladlukhanin

This comment has been minimized.

Copy link

commented May 3, 2018

@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

@RacknerFrank

This comment has been minimized.

Copy link

commented May 4, 2018

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

@Vladlukhanin

This comment has been minimized.

Copy link

commented May 7, 2018

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.

@RacknerFrank

This comment has been minimized.

Copy link

commented May 7, 2018

Thanks!

@RacknerFrank

This comment has been minimized.

Copy link

commented May 16, 2018

@Vladlukhanin any update on this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.