标签: react-dropzone

我正在使用众所周知的React Framework

https://marmelab.com/admin-on-rest/RestClients.html

现在我想将文件上传到Firebase，按照文档操作，找到一个很棒的上传组件

FileInput（FileInput允许使用react-dropzone上传一些文件。）

所以我在我的React应用程序中使用了它，下面是我的代码

export const PostCreate = (props) => (
    <Create {...props}>
        <SimpleForm>
            <ReferenceInput label="User" source="userId" reference="profiles" allowEmpty>
                <SelectInput optionText="name" />
            </ReferenceInput>
            <TextInput source="title" />
            <LongTextInput source="body" />


            <FileInput source="files" label="Related files" accept="video/*,audio/*, image/*, application/*" multiple={true} >
                <FileField source="src" title="title" />
            </FileInput>
        </SimpleForm>
     </Create>
);

对于Firebase交互，我正在使用

https://github.com/sidferreira/aor-firebase-client

当我看到Firebase控制台时，我看不到Firebase存储桶中的任何文件，但字段值保存正确。

“ blob：http：// localhost：3000 / 8daedcb8-e526-427b-aa0c-83ff7ce9deee ”

为了更好的主意，我附上了Firebase数据库和存储的快照

我是这个框架的新手，所以我知道我肯定错过了一些东西，但是我仍在寻找什么。

因此，请帮助我找到解决方案。

我在很长一段时间内遇到了 react-dropzone 的问题。

首先，让我们直接跳到视频的问题：https : //drive.google.com/open?id=1UmWtHbQ9U0LBHxYtZ1YSoXrfsezwH-os

文件选择器窗口在我网站的每个文件输入上打开两次，它不是无限循环，只是两次。

这是我用于此 dropzone 的代码：

                    <Dropzone onDrop={this.onDrop.bind(this)}
                              key={this.state.key}
                              style={{border: "none"}}>
                        <div className="input-file">
                            <label for="file">
                                <button type="button">Choisissez un fichier</button>
                            </label>
                        </div>
                        <div className={"file-name " + (!this.state.selectedOption ? '' : 'hidden')}>
                            Aucun fichier choisi
                        </div>
                        <div className={"file-name " + (this.state.selectedOption ? '' : 'hidden')}>
                            {this.state.selectedOption}
                        </div>
                    </Dropzone>

每次我放下甚至点击输入本身时都会发生不需要的事件

如果希望给你们足够的信息，如果你需要更多，我会很乐意分享代码。

我有一个反应组件，用户可以在其中上传图像，并且他还显示了上传图像的预览。他可以通过单击图像对应的删除按钮来删除图像。我正在使用 react-dropzone 。这是代码：

class UploadImage extends React.Component {
  constructor(props) {
    super(props);
    this.onDrop = this.onDrop.bind(this);
    this.deleteImage = this.deleteImage.bind(this);
    this.state = {
      filesToBeSent: [],
      filesPreview: [],
      printCount: 10,
    };
  }

  onDrop(acceptedFiles, rejectedFiles) {
    const filesToBeSent = this.state.filesToBeSent;
    if (filesToBeSent.length < this.state.printCount) {
      this.setState(prevState => ({
        filesToBeSent: prevState.filesToBeSent.concat([{acceptedFiles}])
      }));
      console.log(filesToBeSent.length);
      for (var i in filesToBeSent) {
        console.log(filesToBeSent[i]);
        this.setState(prevState => ({
          filesPreview: prevState.filesPreview.concat([
            <div>
              <img src={filesToBeSent[i][0]}/>
              <Button variant="fab" aria-label="Delete" onClick={(e) => this.deleteImage(e,i)}>
                <DeleteIcon/>
              </Button>
            </div>
          ])
        }));
      }
    } else {
      alert("you have reached …

使用 selenium ide 为反应应用程序记录测试用例，但无法从 selenium-ide 上传文件。React-dropzone 包用于文件上传。

尝试使用命令“键入”和“发送密钥”，但没有奏效。

硒化物：3.6.0 铬：74.0.3729.108

用 firefox 尝试过，但收到错误消息“目前仅在 Chrome 中支持文件上传”

Command: type
Target: css=input[type=file]
Value: c:\fakepath\test.png
Error: {"code":-32000,"message":"Not allowed"}


Command: send keys
Target: css=input[type=file]
Value: c:\fakepath\test.png
Error: Element is not currently interactable and may not be manipulatedElement is not currently interactable and may not be manipulated

selenium ide 能够上传文件并通过测试用例。

使用 react-dropzone 上传文件，我想以文件传输或 mbs 数据传输的百分比来实现文件进度。

这是链接：https : //react-dropzone.netlify.com/

onDrop(acceptedFiles, uploadApi) {
  const filesToBeSent = this.state.filesToBeSent;
  if (acceptedFiles.length) {
    if (acceptedFiles[0].type === FileTypeList.TYPE) {
      filesToBeSent.push(acceptedFiles);
      const formData = new FormData();
      formData.append("file", acceptedFiles[0]);
      uploadApi(formData).then((response) => {
        this.setState({
          filesPreview: [],
          filesToBeSent: [{}],
          showNotification: true,
          uploadResponse: response,
        });
        this.props.fetchHistory();
      });
    } else {
      this.setState({
        fileType: true,
      });
    }
  } else {
    this.setState({
      fileSize: true,
    });
  }
}

<Dropzone maxSize={this.props.maxSize} onDrop={(files) => this.onDrop(files, this.props.uploadApi)}>
  {({ getRootProps, getInputProps }) => {
    return (
      <div {...getRootProps()} …

我正在使用react-dropzone 创建一个组件。React-dropzone 提供了一个useDropzone()以对象作为参数的 a ，例如useDropzone({ onDrop })。

CodeSandbox 示例在这里

useDropzone 的类型是：

export function useDropzone(options?: DropzoneOptions): DropzoneState;

Dropzone选项有

export type DropzoneOptions = Pick<React.HTMLProps<HTMLElement>, PropTypes> & {
  onDrop?: <T extends File>(acceptedFiles: T[], fileRejections: FileRejection[], event: DropEvent) => void;
};

如何通过在 useCallback 中acceptedFiles键入泛型来键入（而不是任何） ？T

  const onDrop = useCallback((acceptedFiles: any) => {
    acceptedFiles.forEach((file) => {
      console.log(file)
    })
  }, [])

试图弄清楚如何一起使用这两个组件。github 上有一个问题，人们参考它来启动并运行它，但我无法弄清楚。其要点是这样的：

<Field name={`logo`}>
  {(fieldprops) => (
    <div>
      <label>Logo</label>
      <Dropzone 
        onDrop={(files, e) => {
          props.change(`logo`, files);
          props.blur(`logo`);
        }}
      />
      <pre>{JSON.stringify(fieldprops, 0, 2)}</pre>
    </div>
  )}
</Field>

使用确切的代码对我来说会抛出错误：TypeError: children is not a function

我在代码沙盒上设置了一个使用挂钩和文件预览的简化测试用例。我还尝试查看文档中的自定义输入，但似乎缺少一些东西才能正常工作。如果有人能指出我正确的方向，我会非常高兴。

我目前正在使用React-dropzone插件，并遇到了文档中未准确描述的用例。

基本上我有以下几个要素：

• 一个应该允许两者的外部拖放区
  • 拖放，以及
  • 本机文件选择器on click
• 不显示本机文件选择器的内部按钮on click

我现在遇到的问题是当单击内部按钮时阻止本机文件选择器显示。

为了说明我的示例，您可以将此代码粘贴到“查看代码”部分。

import React from 'react';
import {useDropzone} from 'react-dropzone';

function Dropzone(props) {
  const {getRootProps, getInputProps, open, acceptedFiles} = useDropzone({
    // Disable click and keydown behavior
    noKeyboard: true
  });

  const files = acceptedFiles.map(file => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));

  return (
    <div className="container">
      <div {...getRootProps({className: 'dropzone'})}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here</p>
        <InnerButton />
      </div>
      <aside>
        <h4>Files</h4> …

我已经在react应用程序中安装了react dropzone。添加组件放置区时，应用程序崩溃，并声称：

TypeError: children is not a function
Dropzone.render
node_modules/react-dropzone/dist/es/index.js:478
475 | var isMultipleAllowed = multiple || filesCount <= 1;
476 | var isDragAccept = filesCount > 0 && 
allFilesAccepted(draggedFiles, this.props.accept);
477 | var isDragReject = filesCount > 0 && (!isDragAccept ||!isMultipleAllowed);
> 478 | return children({
  | ^  479 |   isDragActive: isDragActive,
480 |   isDragAccept: isDragAccept,
481 |   isDragReject: isDragReject,

但是，一切似乎都很好。我的App.js是：

import React, { Component } from 'react';
import DropImg from './components/DropImg.js';

class App extends Component {
render() { …

我正在使用 React-dropzone 插件进行文件上传。我担心如何将每个文件转换为 base64：

例如：

这是我获取文件的函数：我在这里为每个文件创建例如拇指并附加到对象。但是如何添加像base64string这样的item here prop：它会保留每个文件的base64数据？

this.onDrop = files => {
      files.map(file =>
        Object.assign(file, {
          preview: URL.createObjectURL(file),
        })
      );
    };