How to get file properties and upload a file from ionic 4?

Issue

I am trying to upload a file from mobile to google bucket using ionic 4. Although a file can upload into the could. I am struggling to get the file properties out of file object.

Here is my method,

async selectAFile() {

    const uploadFileDetails = {
      name: '',
      contentLength: '',
      size: '',
      type: '',
      path: '',
    };

    this.fileChooser.open().then(uri => {

      this.file.resolveLocalFilesystemUrl(uri).then(newUrl => {
        let dirPath = newUrl.nativeURL;

        const dirPathSegments = dirPath.split('/');
        dirPathSegments.pop();
        dirPath = dirPathSegments.join('/');

        (<any>window).resolveLocalFileSystemURL(
          newUrl.nativeURL,
          function(fileEntry) {
            uploadFileDetails.path = newUrl.nativeURL;

            const file: any = getFileFromFileEntry(fileEntry);

            //log 01 
            console.log({ file });

            uploadFileDetails.size = file.size;
            uploadFileDetails.name = `${newUrl.name
              .split(':')
              .pop()}.${file.type.split('/').pop()}`;
            uploadFileDetails.type = file.type;

            async function getFileFromFileEntry(fileEntry) {

              try {
                return await new Promise((resolve, reject) =>
                  fileEntry.file(resolve, reject)
                );
              } catch (err) {
                console.log(err);
              }
            }

          },
          function(e) {
            console.error(e);
          }
        );
      });
    });

    // here uploadFileDetails is simller to what I declared at the top ;)
    // I wan't this to be populated with file properties
    // console.log(uploadFileDetails.name) --> //''

    const uploadUrl = await this.getUploadUrl(uploadFileDetails);

    const response: any = this.uploadFile(
      uploadFileDetails,
      uploadUrl
    );

    response
      .then(function(success) {
        console.log({ success });
        this.presentToast('File uploaded successfully.');
        this.loadFiles();
      })
      .catch(function(error) {
        console.log({ error });
      });
  }

even though I can console.log the file in log 01. I am unable to get file properties like, size, name, type out of the resolveLocalFileSystemURL function. basically, I am unable to populate uploadFileDetails object. What am I doing wrong? Thank you in advance.

Solution

you actually need 4 Ionic Cordova plugins to upload a file after getting all the metadata of a file.

1. FileChooser

   Opens the file picker on Android for the user to select a file, returns a file URI.

2. FilePath

   This plugin allows you to resolve the native filesystem path for Android content URIs and is based on code in the aFileChooser library.

3. File

   This plugin implements a File API allowing read/write access to files residing on the device.

4. File Trnafer

   This plugin allows you to upload and download files.

getting the file's metadata.

• file.resolveLocalFilesystemUrl with fileEntry.file give you all the metadata you need, except the file name. There is a property called name in the metadata but it always contains value content.
• To get the human readable file name you need filePath. But remember you can't use returning file path to retrieve metadata. For that, you need the original url from fileChooser.
• filePathUrl.substring(filePathUrl.lastIndexOf('/') + 1) is used to get only file name from filePath.
• You need nativeURL of the file in order to upload it. Using file path returning from filePath is not going to work.

    getFileInfo(): Promise<any> {
            return this.fileChooser.open().then(fileURI => {
                return this.filePath.resolveNativePath(fileURI).then(filePathUrl => {
                    return this.file
                        .resolveLocalFilesystemUrl(fileURI)
                        .then((fileEntry: any) => {
                            return new Promise((resolve, reject) => {
                                fileEntry.file(
                                    meta =>
                                        resolve({
                                            nativeURL: fileEntry.nativeURL,
                                            fileNameFromPath: filePathUrl.substring(filePathUrl.lastIndexOf('/') + 1),
                                            ...meta,
                                        }),
                                    error => reject(error)
                                );
                            });
                        });
                });
            });
        }

select a file from the file system of the mobile.

async selectAFile() {

    this.getFileInfo()
        .then(async fileMeta => {

            //get the upload 
            const uploadUrl = await this.getUploadUrl(fileMeta);

            const response: Promise < any > = this.uploadFile(
                fileMeta,
                uploadUrl
            );

            response
                .then(function(success) {
                    //upload success message                       
                })
                .catch(function(error) {
                    //upload error message
                });
        })
        .catch(error => {
            //something wrong with getting file infomation
        });
}

uploading selected file.

This depends on your backend implementation. This is how to use File Transfer to upload a file.

uploadFile(fileMeta, uploadUrl) {

    const options: FileUploadOptions = {
      fileKey: 'file',
      fileName: fileMeta.fileNameFromPath,
      headers: {
        'Content-Length': fileMeta.size,
        'Content-Type': fileMeta.type,
      },
      httpMethod: 'PUT',
      mimeType: fileMeta.type,
    };

    const fileTransfer: FileTransferObject = this.transfer.create();
    return fileTransfer.upload(file.path, uploadUrl, options);
  }

hope it helps. :)

Answered By - Sankha Karunasekara