Filepond настроить droparea

Используя filepond, мне нужно настроить droparea filepond, а это означает, что мне нужно добавить некоторый настраиваемый HTML-код с некоторыми изображениями-заполнителями, чтобы дать пользователю представление о том, какие изображения следует загружать и которые должны разрешить несколько загрузок.

введите здесь описание изображения

Есть ли способ сделать это?

Я попытался добавить абсолютно позиционированный конатинер с заполнителями, но я не могу покрыть загрузку своего настраиваемого элемента.

Вот как я использую Filepond внутри React:

...
    return (
      <div className="uploads">
        <div className="uploads__placeholders">{placeholderImages}</div>
        <FilePond
          ref={(ref) => (this.pond = ref)}
          files={this.state.files}
          labelIdle={""}
          allowMultiple={true}
          maxTotalFileSize={10485760}
          acceptedFileTypes={this.props.acceptedFileTypes}
          labelMaxTotalFileSize={"Total file size should be lesser than 10MB."}
          maxFiles={maxFilesAllowed}
          allowProcess={this.props.process ? this.props.process : true}
          imagePreviewHeight={135}
          //imagePreviewTransparencyIndicator={"grid"}
          server={{...}}
          onremovefile={(file) => {...}}
          oninit={(t) => {...}}
          onupdatefiles={(fileItems) => {...}}
        />
      </div>
    );
...

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


person fefe    schedule 10.06.2020    source источник
comment
Вам нужно начать с того, чтобы дать нам то, с чем можно поработать здесь - минимальный воспроизводимый пример, который показывает вашу проблему, и в идеале также то, что вы уже пробовали.   -  person CBroe    schedule 17.06.2020


Ответы (1)


Ключевой ответ - использовать labelIdle с параметром beforeAddFile, который дает вам возможность изменить шаблон HTML по умолчанию и заранее удалить любой контент. Вы должны добавить его в свою инициализацию Filepond.

Я знаю, как удалить контент в реакции, но пример jQuery будет примерно таким:

FilePond.parse(document.body);
const inputElement = document.querySelector('#file_upload');

FilePond.registerPlugin(FilePondPluginImagePreview);

const pond = FilePond.create(inputElement, {
  allowMultiple: true,
  imagePreviewHeight: 135,
  labelIdle: `
    <div style="width:100%;height:100%;">
    	<p>
        Drag &amp; Drop your files or <span class="filepond--label-action" tabindex="0">Browse</span><br>
        Some samples to give you an idea :
      </p>
    </div>
    <div class="images" id="allImages">
       <div class="images_child">
          <img src="https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg">
       </div>
       <div class="images_child">
          <img src="https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg">
       </div>
       <div class="images_child">
          <img src="https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg">
       </div>
     </div>
  `,
  beforeAddFile (e) {
  	$('#allImages').html('');
  }
});
.filepond--drop-label {
  background-color: #ECF7E9;
  height: auto!important;
}

.images {
  display: inline-block;
  padding: 0 5px;
}

.images_child {
  display: contents;
  padding: 0 5px;
  text-align: center;
}

.filepond--root * {
  height: auto;
  padding: 0 4px;
}

img {
  width: 25%;
  opacity: 0.8;
  filter: grayscale(100%);
  border-radius: 8px;
  cursor: pointer;
}


/* Responsive layout - makes a two column-layout instead of four columns */

@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}
<script src="https://unpkg.com/[email protected]/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/[email protected]/dist/filepond.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="https://unpkg.com/[email protected]/dist/filepond.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://unpkg.com/[email protected]/dist/filepond-plugin-image-preview.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

<input type="file" name='file' class='filepond' multiple id='file_upload' />

https://jsfiddle.net/d6e2nh93/

Заявление об отказе от ответственности:

1) Я НЕ использовал полный CSS в качестве примера вашего изображения, поскольку не вижу в этом необходимости, вы можете легко сделать это сами.

2) Это не ответный ответ, а ответ, который направит вас в правильном направлении, как использовать filepond для достижения желаемого результата.

person Islam Elshobokshy    schedule 19.06.2020