Problems with file plugin in Ionic2

cordova
1

Hi Folks, I wasn’t sure if I had to post here or in Ionic 2 category.
I have this little problem:
I’m integrating quickblox in my Ionic2 app, for now I was able to do all the things except uploading a file.
In quickblox you have to upload a file using a function made by them that according to js documentation looks like this:
> 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 above code to typescript and I have something 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);
                    }
                    );
            }
        );
    }

This work in the terms of “I get ok responses from quickblox server”, but when I go to the admin console of quickblox to check the uploaded content I find out that the image I uploaded has 0 bytes.
So after checking the code for a while I compared side by side all my function calls with the example app of quickblox and the only difference I could find was in the File object.
This is the File object I get in my Ionic2 app:
image

And this is the one I get in the quickblox js example:
image
All the others things looks identically except this File object.
I’m almost sure that this is the problem I’m having, and because i’m very newbie in this field, I couldn’t find a way to cast from my File object in Ionic to something like the File object in the js example.
Thanks in advance at all for your time and help.

2

you have to upload input array to quickblox. in your current approach you are doing in wrong way.

Step1: IN view File
<input (change)="uploadmedia()" type="file">

Step2: in component
uploadmedia(){
var inputFile = jQuery(“input[type=file]”)[0].files[0];
this.sendAttachments(inputFile);
}

Step3:

sendAttachments(inputFile) {
    QB.content.createAndUpload({
      public: false,
      file: inputFile,
      name: inputFile.name,
      type: inputFile.type,
      size: inputFile.size
    }, function (err, response) {
      if (err) {
        console.error(err);
      } else {
        // your code come here
        var uploadedFile = response;
        console.log(response);
      }
    });
  }
3

Works like a charm.
Thank you very much.