Перетаскивание файлов для реагирования на основе веб-сайта не работает - PullRequest
Новая
       16

Перетаскивание файлов для реагирования на основе веб-сайта не работает

0 голосов
/ 13 января 2020

Я использую React для создания веб-сайта, который должен читать файлы Outlook и TXT-файлы, представленные методом перетаскивания. Я пробовал много способов создания поля Drag and Drop, но большинство методов возвращает только имя файла, поэтому я не могу прочитать файл. Мой текущий код выдаст предупреждение, когда я попытаюсь удалить файл, который не имеет окончания .txt.

Если файл является файлом Outlook с окончанием .msg, он ничего не сделает, кроме отображения предупреждения :

- Ресурс интерпретируется как Документ, но передается с помощью приложения / октет-потока MIME-типа: " filepath "

Если файл имеет окончание .vcf пытается загрузить файл первые несколько раз, удаляя его, но затем начинает показывать только сообщение об ошибке, как указано выше, с такой ошибкой:

Ресурс интерпретируется как Документ, но передается с текстом MIME типа / x-vcard: " filepath "

Когда я удаляю файл .txt, он просто открывается в веб-браузере, но мне тоже нужно прочитать эти файлы.

Это мой текущий код: 

class Outlook extends Component {


    render() {


        const handleFileSelect = function (evt) {
            evt.stopPropagation();
            evt.preventDefault();

            var files = evt.dataTransfer.files; // FileList object.

            // files is a FileList of File objects. List some properties.
            var output = [];
            for (var i = 0, f; f = files[i]; i++) {
                output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                    f.size, ' bytes, last modified: ',
                    f.lastModifiedDate.toLocaleDateString(), '</li>');
            }
            document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
        }



        return (

            <div id="drop_zone" onDrop='handleFileSelect(event)' >
                Drop files here
                </div>


        )

    }
}
export default Outlook;

Я пишу свой код в Visual Studio 2019 с React 16.10.2

Подводя итог: я ищу Drag and Drop, где я может читать файлы после удаления.

...