Блог

Я использую выпадающую зону materual-ui для загрузки файлов. Я пытаюсь проверить файл при удалении или добавлении и отклонить его, если он будет признан недействительным. я не могу найти способ отклонить файл.

Я написал некоторый код в этом поле codesandbox (ссылка ниже) и добавил пустую функцию handleUpload , которая вызывается onDrop из файла. Я хочу реализовать здесь некоторую логику, чтобы отклонить файл. может ли кто-нибудь провести меня сюда?

https://codesandbox.io/s/material-ui-dropzone-forked-vf60b

Поскольку material-ui-dropzone используется react-dropzone ниже, вы можете передать пользовательский валидатор в dropzoneProps . К сожалению, проект, похоже, заброшен, сначала вам нужно будет сделать вилку, обновиться react-dropzone до версии 11, чтобы использовать пользовательский валидатор, и внести некоторые дополнительные изменения, чтобы исправить некоторые детали. Я сделал вилку с необходимыми изменениями и репо, чтобы протестировать ее

Затем вы можете указать на свое репо в зависимостях пакетов

   "dependencies": {
    ...
    "material-ui-dropzone": "git ssh://git@github.com:[your-user]/material-ui-dropzone.git#[your-branch]",
    ...
  },
 

и передайте валидатор при использовании компонента

       <DropzoneArea
        dropzoneProps={{
          validator: (file) => {
            return {
              code: "i-wanted",
              message: `Because I wanted`
            };
          }
        }}
        acceptedFiles={["text/csv"]}
        showPreviews={true}
        showPreviewsInDropzone={false}
        showFileNames={true}
        keepLocal={true}
        useChipsForPreview
        previewText="Selected File"
        dropzoneText={"upload csv file"}
        onDrop={this.handleUpload}
        showAlerts={true}
      />
 

просто не используйте мою вилку напрямую, так как я не могу гарантировать, что сохраню ее