How to get file name and mime type before upload in ionic2?

Question

I am trying to upload files by using help of ionic/file-chooser plugin. Everything was perfect until i did not get requirement to upload a doc or pdf file. I am using ionic 3.12.0 and cordova 7.0.1.

 const fileTransfer: FileTransferObject = this.transfer.create();
    let options: FileUploadOptions = {
      fileKey: 'files0',
      fileName: 'name.jpg',
      params: {
        Authkey: this.CS.auth_key,
        Token: this.CS.token,
        group_id: this.CS.activeGroupId,
        Userid: this.CS.userId
      }
    };
    this.fileChooser.open()
      .then(uri => {
        this.CS.show_loader();
        //alert(uri );
        this.file.resolveLocalFilesystemUrl(uri)
          .then((files)=> {
          alert(JSON.stringify(files, null, 4));
        }).catch((err) => {
          alert(JSON.stringify(err, null, 4));
        });
        //let name = uri.split("/");
        //options.fileName = name[name.length - 1];
       // alert(options.fileName);
        fileTransfer.upload(uri, this.CS.base_url + 'groups/uploadChat', options)
          .then((data) => {
            this.CS.hide_loader();
            this.res = data;
            //alert(JSON.stringify(data, null, 4));
            let d = JSON.parse(this.res.response);

            if(d.status == 1){
              let a = {
                member_id: this.user_id,
                imageLink: this.groupChatData.loginUserData.imageLink,
                message: '',
                attachment: d.data[0].attachment,
                member_name: this.CS.userData.name,
                mime_type: d.data[0].mime_type,
                attachment_imageUrl: d.data[0].attachment_imageUrl,
                attachment_linkUrl: d.data[0].attachment_linkUrl,
                send_at: Date.now()
              };
              this.group_chat.push(a);
              setTimeout(() => this.content.scrollToBottom(), 200);
            }else{
              this.CS.alertMessage("error", this.res.response.message);
            }

          }, (err) => {
            alert(JSON.stringify(err, null, 4));
          })
      })
      .catch(e => alert(JSON.stringify(e, null, 4)));

the resolveLocalFilesystemUrl return something like this -

There are neither file name nor file type, then how can i send file name to server?

Answer 1

First Solution

To get the file name and file mime, try the following:

First you need to install the following plugins:

1. fileChooser
2. filePath
3. file

then you can do the following:

  this.fileChooser.open().then(uri =>
    {
      console.log(uri);
      this.filePath.resolveNativePath(uri).then(filePath =>
        {
          this.filesPath = filePath;
          this.file.resolveLocalFilesystemUrl(filePath).then(fileInfo =>
            {
              let files = fileInfo as FileEntry;
              files.file(success =>
                {
                  this.fileType   = success.type;
                  this.filesName  = success.name;
                });
            },err =>
            {
              console.log(err);
              throw err;
            });
        },err =>
        {
          console.log(err);
          throw err;
        });
    },err =>
    {
      console.log(err);
      throw err;
    });

This works on android, the fileChooser.open() plugin will open the file system so you can choose a file, the filePath.resolveNativePath(uri) will give you the path of the file.

The method resolveLocalFilesystemUrl(filePath) will give you information about the file as you have shown in the question. It also return a Promise of type Entry, which does not contain the name and the type.

Therefore you need to use the as keyword to cast it to type FileEntry that will contain both the name and the type.

---

Second Solution

  fileUpload()
 {
 this.arrayType = ["txt", "pdf", "doc", "docx", "xls", "xlsx", "rtf", "gif", "csv"];
if(this.platform.is("ios"))
{
  this.filePicker.pickFile().then(uri=>
  {
    console.log(uri);
    this.filesPath  = uri;
    this.fileName   = filesPath.substring(filesPath.lastIndexOf("/") + 1);
    this.fileType   = this.fileName.substring(this.fileName.lastIndexOf(".") + 1);
  },err=>
  {
    console.log(err);
    throw err;
  });
}
else if(this.platform.is("android"))
{
  this.fileChooser.open().then(uri =>
  {
    console.log(uri);
    this.paths = uri;
    this.filePath.resolveNativePath(uri).then(filePath =>
    {
      console.log(filePath);
      this.filesPath  = filePath;
      this.fileName   = filesPath.substring(filesPath.lastIndexOf("/") + 1);
      this.fileType   = this.fileName.substring(this.fileName.lastIndexOf(".") + 1);
      if(this.arrayType.indexOf(this.fileType) > -1)
      {
       console.log("accepted type");
      }
    },err=>
    {
      console.log(err);
      throw err;
    });
  },err=>
  {
    console.log(err);
    throw err;
  });
  }
}

This solution is for both ios and android, here first you check which platform the user is using, then using the filepicker plugin, you can retrieve the file and using subString you can get the name and the type. Regarding android, you can use resolveNativePath(uri) method of the filePath plugin to get the path of the file and then using subString you can get the name and type.

You can also check if the type of the file is in the array of types or not.