Предварительный просмотр файла в React FilePond не отображается при настройке исходного файла - PullRequest
Новая
       42

Предварительный просмотр файла в React FilePond не отображается при настройке исходного файла

0 голосов
/ 12 апреля 2020

В последнее время я немного боролся с React filepond, поэтому мне просто нужна помощь. Таким образом, я могу загружать фотографии на сервер с помощью ответного файла с рельсами и хранилищем amazon s3. Все работает, не проблема. Сейчас я пытаюсь установить исходное изображение, но у меня возникают проблемы с запуском предварительного просмотра.

Итак, здесь я устанавливаю исходное изображение из общедоступного изображения заполнителя: 

class UserForm extends Component {
  constructor(props) {
    super(props);
    this.classes  = props.classes;    
    this.state = {     
      files: [{
        source: "https://picsum.photos/200/300",   
        options: {
          file: {
            size: 200
          }
        } 
      }],    
    code omitted for brevity

и вот мой компонент FilePond: 

<FilePond
            ref={ref => (this.pond = ref)}
            files={this.state.files}
            allowMultiple={true}
            maxFiles={3}            
            oninit={() => this.handleInit()}
            onupdatefiles={ this.fileChange } 
            allowImageCrop={true}
            imageCropAspectRatio={'1:1'}
            allowImageResize={true}
            imageResizeTargetWidth={100}
            imageResizeTargetHeight={100}
            imageResizeUpscale={false}
            imageResizeMode={'contain'}
            allowImageTransform={true}               
            onpreparefile={ this.prepareFile }

Итак, он должен загружать изображение-заполнитель в предварительном просмотре, но вместо этого я вижу:

enter image description here

Какие конфигурации мне не хватает, чтобы получить предварительный просмотр, чтобы показать?

Спасибо!

Редактировать 1 Добавлена ​​ссылка песочнице кода. Обратите внимание, что если я удалю параметры, в частности размер файла, он выдаст предупреждение о том, что он ожидает размер

https://codesandbox.io/s/react-filepond-live-demo-8s7oc?file= / src / index. js

А вот документы для настройки исходных файлов в filepond: https://pqina.nl/filepond/docs/patterns/api/filepond-object/#setting -initial-files

1 Ответ

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

Я понял это! Вот ссылка на изолированную программную среду с рабочим кодом: https://codesandbox.io/s/react-filepond-live-demo-2sdn0?file= / src / index. js

вам необходимо установить конфигурацию сервера следующим образом: 

<FilePond
        files={files}
        allowMultiple={false}
        server={{
          load: (source, load, error, progress, abort, headers) => {
            var myRequest = new Request(source);
            fetch(myRequest).then(function(response) {
              response.blob().then(function(myBlob) {
                load(myBlob);
              });
            });
          }
        }}
        labelIdle='Drag & Drop your files or <span class="filepond--label-action">Browse</span>'
      />

Credit переходит в этот ответ по этой ссылке: https://github.com/pqina/filepond/issues/192

...