User File Selection and Upload

help
1

Hi All,

I was wondering if I could get an assist. Basically I am trying to have the user select a file and upload it to an external server. Plot twist, the external needs it as a Base64 blob.

What I am doing [using Material UI here]

(1) Button to upload file, just next to the +document button.

1220×450 41 KB

Code:

renderUploadFileButton() {
  return (
    <IconButton
      style={{ padding: '5px 0px 5px 0px'}}
      tooltip='Upload File'
      tooltipPosition="top-right"
      onTouchTap={this.openFileDialog.bind(this)}
    >
      <input
        id='fileUpload'
        type='file'
        hidden={true}
        onChange={this.handleUpload.bind(this)}
      />
      <FileFileUpload/>
    </IconButton>
  );
}

openFileDialog() {
  document.getElementById('fileUpload').click();
}

readSuccess(event) {
  let field = document.getElementById('fileUpload');
  field.innerHTML = event.target.result;
  console.log(field);
}

So what is happening is:
(1) User click upload icon. Window for file selection appears. Cool. Lets say I selection the info(1).txt file.
(2) The upload function is triggered. I think the onload function is not working… clearly I am getting the data in my innerHTML, but this is not setting the source correctly.
(3) Basically I need to have content be the base64 version of the stuff in the file.

// is fucked!
  handleUpload(event) {
    const file = event.target.files[0];
    console.log(file);

    const repoName = getEGSrepoCode(this.props.mgmtStore.entityId);

    let filePath =
      getERSoption(this.props.mgmtStore.entityId, 'managementPath')
      + file.name;

    const name = getUserName(Meteor.userId());
    const email = getUserEmails(Meteor.userId())[0].address;

    const message = `New File: ${name}:${email}:${(new Date()).toJSON()}`;

    let reader = new FileReader();

    reader.onload = this.readSuccess.bind(this); // NOT WORKING BIT!

    let content = reader.readAsDataURL(file); // Shows as undefined???
    console.log(content);

// other stuff happens
}

Any pointers would be most appreciated. Thanks so much.

Tat