how to access image data

[jojoblaze]

Hi, I need to send a custom request to a webservice.
I need to access image data in order to convert it in Base64 and send these data with others.
Someone can help, please?

[sime2408]

Try this:

constructor() {
    this.uploaderImage = new FileUploader({});
    // extract binary
    const extract = function (dataURI) {
      const binary = atob(dataURI.split(',')[1]);
      const array = [];
      for (let i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
      }
      return array;
    };

   // event  --- uncomment what you want
    this.uploaderImage.onAfterAddingFile = function (item) {
      const reader = new FileReader();
      reader.onload =  (event) => {
        //console.log(extract(reader.result));
        //console.log(reader.result);
      };
      reader.readAsDataURL(item._file);
      //reader.readAsText(item._file);
    }
  }

[jojoblaze]

Thank you very much, I solved this way

`saveImages() {

let fileCount: number = this.uploader.queue.length;
if (fileCount > 0) {

  this.uploader.queue.forEach((val, i, array) => {

    let fileReader = new FileReader();
    fileReader.onloadend = (e) => {
      let imageData = fileReader.result;
      let rawData = imageData.split("base64,");

      if (rawData.length > 1) {
        rawData = rawData[1];

        // create my model here

        // call my service here
      }
    }
    fileReader.readAsDataURL(val._file);

  });
}

`

[DzmVasileusky]

Hi.
I'm getting Typescript error "argument type File is not assignable to parameter type Blob" when using ._file as fileReader.readAsDataURL parameter.
MDN says it can be File or Blob
https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

Any thoughts?

[DzmVasileusky]

It looks like a bug in Webstorm JavaScriptLanguage plugin.
It defines readAsDataURL(blob: Blob): void;

[mvgadagi]

I am facing issue in converting to Base64 can you please help me, Below is my code can you help me

public uploader: FileUploader = new FileUploader({
    url: 'http://test.com',
    itemAlias: 'photo',
    authToken: 'Bearer ' + this.accessToken,
    headers: [{ name: 'Content-Type', value: 'application/json; charset=utf-8' }],
    disableMultipart: true,
    formatDataFunctionIsAsync: true,
    formatDataFunction: async (item) => {
        return new Promise((resolve, reject) => {
            resolve({
                documentType: 'Photo',
                contentType: 'PNG',
                documentCode: '1234',
                uploadCode: '564',
                data: this.extractBinary(this.uploader.queue[0])
            });
        });
    }
});

extractBinary(file) {
    file.withCredentials = false;
    const reader = new FileReader();
    let binaryValue;
    reader.onload = (event) => {
        binaryValue = reader.result;
        return binaryValue;
    };
    return reader.readAsDataURL(file._file);
}