Currently, I am working on integrating Quickblox into my Ionic2 application. I have successfully implemented all the required functionalities except for file uploading. In Quickblox, there is a specific function that needs to be used for uploading files, as per their JavaScript documentation:
var inputFile = $("input[type=file]")[0].files[0];
var params = {name: inputFile.name,
file: inputFile,
type: inputFile.type,
size: inputFile.size,
public: false};
QB.content.createAndUpload(params, function(err, response){
if (err) {
console.log(err);
} else {
console.log(response);
var uploadedFile = response;
var uploadedFileId = response.id;
}
});
So, I translated the above code to TypeScript and it looks like this:
uploadFile(filename) {
File.resolveDirectoryUrl(cordova.file.dataDirectory).then(
(dirEntry) => {
File.getFile(dirEntry, filename, { create: false }).then(
(fileEntry) => {
console.log(fileEntry);
fileEntry.file((file) => {
console.log(file);
var params = {
name: file['name'],
file: file,
type: file['type'],
size: file['size'],
'public': false
};
quickblox.content.createAndUpload(params,
(err, response) => {
if (err) {
console.log(err);
} else {
console.log(response);
var uploadedFileId = response.id;
var msg = {
type: 'groupchat',
body: "[attachment]",
extension: {
save_to_history: 1,
}
};
msg["extension"]["attachments"] = [{ id: uploadedFileId, type: 'photo' }];
quickblox.chat.send(this.xmpp_room_jid, msg);
}
});
})
}).catch(
(err) => {
console.log(err);
}
);
}
);
}
Although I receive successful responses from the Quickblox server, I noticed that the uploaded image appears to have 0 bytes when viewed in the Quickblox admin console. After examining the code and comparing with the Quickblox example app, the only noticeable difference was in the File object.
This is the File object retrieved in my Ionic 2 app:
https://i.sstatic.net/TmEfT.png
And this is the File object from the Quickblox JavaScript example:
https://i.sstatic.net/APQjp.png
All other aspects appear identical except for this disparity in the File object. I suspect this may be causing the issue, but being new to this field, I haven't been able to figure out how to cast the File object in Ionic to match the one in the JavaScript example. I appreciate any assistance or insights provided. Thank you.
EDIT:
Here are the request/response logs from my Ionic app:
https://i.sstatic.net/CilL7.png
https://i.sstatic.net/5IkuS.png
https://i.sstatic.net/01W7H.png
https://i.sstatic.net/1VsIN.png