Реагировать DropzoneComponent открыть / изменить файл локально перед загрузкой

Question

Я строю приложение с пользовательской сборкой Uploader поверх DropzoneComponent (оболочки для Dropzone). Перед загрузкой файла на сервер я хочу открыть и изменить файл, но я обнаружил, что открыть файл с помощью FileReader невозможно.

Найдите 2 комментария в коде, какая часть не работает.

"dependencies": {
    "filereader": "^0.10.3",
    "js-cookie": "^2.1.4",
    "react": "^16.2.0",
    "react-dropzone-component": "^3.1.2",
}

Пример:

import React from 'react';
import DropzoneComponent from 'react-dropzone-component';
import * as Cookies from "js-cookie";
import FileReader from "filereader";
export default class CustomUploader extends React.Component {
    constructor(props) {
        let headers = {
              'X-CSRFToken': Cookies.get('csrf_token'),
        };
        this.config = {
            iconFiletypes: ['.data'],
            showFiletypeIcon: true,
            postUrl: '/upload',
        };
        this.djsConfig = {
            headers:headers,
            autoProcessQueue: true,
            autoQueue: true,
            previewTemplate: ReactDOMServer.renderToStaticMarkup(
            <div className="col-3 dz-preview dz-file-preview">
              <div className="dz-details">
                <img className="dz-preview-image" data-dz-thumbnail="true" />
              </div>
            </div>
          ),
        };
        this.eventHandlers = {
            addedfile: (file) => {
                // THIS GETS CALLED PROPERLY but the provided does
                // not seem to be loadable by FileReader :-(
                const reader = new FileReader();
                reader.onloadend = function (e) {
                    console.log(e.target.result);
                };
                reader.onerror = function (e) {
                    console.log(e.target.error);
                };
                // THIS IS WHERE IT FAILS, "file" object obviously
                // misses "path" attribute for some reason and reader 
                // cannot open it, do you have any idea how/where to 
                // access local path or how to open and modify the file?
                reader.readAsArrayBuffer(file);
            },
        };
    };
    render() {
        return (
            <div className="dz-wrapper">
                <DropzoneComponent config={this.config}
                           eventHandlers={this.eventHandlers}
                           djsConfig={this.djsConfig}
                          className="row">
                </DropzoneComponent>
            </div>
        );
     }
};

Я следовал руководству, как это сделать, но кажется, что файловый объект в Dropzone по какой-то причине имеет другую структуру, больше не совместимую с FileReader, возможно, проблема с версией??

Answer 1

Таким образом, выходные я оказался после 2 дней поиска в Google. С помощью new window.FileReader() вместо new FileReader() загрузил файл без проблем. Все еще не уверен, почему, но эй, это работает ¯_(ツ)_/¯