vorst.ru - Статьи о задачах возникающих при создании сайта и их решении
Статьи помеченные file

Как добавить атрибут к загруженному файлу

Добавление описания к файлу

Иногда важно определить дополнительную информацию для загружаемого файла. Например это может быть описание. В расширении yii2-byone-uploader возможность добавить описание к файлу уже предусмотрена.

Кроме описания может быть добавлено и любое другое свойство. В предыдущем примере использовалось свойство when типа radio с двумя значениями - "до" и "после". Как добавить новое свойство?


Как сделать галерею фотографий "До и После"

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

Представьте, что вы продаете курс похудания. Вам нужно наглядно представить результат вашего курса. Фото "До" и "После", что может быть лучшей иллюстрацией?

Как и в предыдущем примере примем, что участников ограниченное количество. Например 4. Забудем про похудающих - слишком скучно. Будем "работать" с кинозвездами. Для каждого можно загрузить только 4 фотографии. Таким образом всего 16 фото. Если загружены все 16 и кому-то захочется добавить "свои" фото, то придется что-то удалить. Демо.


Делаем демо для загрузки фото

Загрузка жестко определенного количества файлов

Чтобы показать, как работает загрузка изображений, нужно разрешить загружать изображения на свой сайт. Но, в этом случае, дисковое пространство может быть быстро исчерпано и нужно как-то удалять оставленный посетителями "мусор".

Например, можно устроить, что-то вроде надписи в столовой - "Уберите, пожалуйста, за собой посуду" (демо).



Поиск



Как добавить атрибут к загруженному файлу

Добавление описания к файлу

Иногда важно определить дополнительную информацию для загружаемого файла. Например это может быть описание. В расширении yii2-byone-uploader возможность добавить описание к файлу уже предусмотрена.

Кроме описания может быть добавлено и любое другое свойство. В предыдущем примере использовалось свойство when типа radio с двумя значениями - "до" и "после". Как добавить новое свойство?


    Поделиться

В расширении уже определено одно свойство - description. Чтобы его использовать, необходимо в папку представлений, например /sample/views/photo положить файл appendix.php следующего содержания:

<span id='description'>
  <?php echo isset($file->vars->description) ? $file->vars->description : ''; ?>
</span>

И, при вызове виджета в представлении /sample/views/photo/update.php, указать, что нужно использовать эту возможность.

<?= Byone::widget([
  'model' => $model,
  'appendixView' => '/photo/appendix',
]) ?>

Чтобы добавить поле when нужно 1. дополнить файл appendix.php следующим кодом:

<span id='when'>
  <?= isset($file->vars->when) ? ($file->vars->when ? 'after' : 'before') : 'before' ?>
</span>
<span id='description'>
  <?= isset($file->vars->description) ? $file->vars->description : '' ?>
</span>

И принять во внимание, что 2. этого, конечно, не достаточно.

Таблица загруженных файлов

имеет следующий, схематичный вид:

<ul class='table'>
  <li id='row_id'>
    <span><img></span>
    <span id='description'></span>
    ...
    <span id='buttons'>
      <button id='btn-edit'>
      <button id='btn-delete'>
      <button id='btn-save' style='display:none;'>
      <button id='btn-cancel' style='display:none;'>
    </span>
  </li>
</ul>

При редактировании с каждым полем происходит следующая метаморфоза:

  1. Значение поля сохраняется во вновь созданном элементе span c id="span". Значение используется при отмене операции редактирования.
  2. Дополнительно создается поле редактирования, для description это textarea с id="edit".

Строка списка определена в расширении, как строка редактирования:

editLine = {
  options: {},
  defaultField: {
    name: 'description',
    placeholder: 'description'
  },
  fields: []
};

Чтобы в строке появилось новое поле, его нужно определить.

Определить необходимо имя поля, значение по умолчанию, как поле будет добавляться и как сохраняться. В расширении уже определено поле description и можно посмотреть, как все работает на его примере /vendor/sergmoro1/yii2-byone-uploader/assets/js/editLine.js:

editLine.addField(true, {
  name: editLine.defaultField.name,
  save: function(id, save) {
    var edit = $(id + ' #edit');
    var span = $(id + ' #span');
    if(save)
      // copy textarea value to <span/> tag
      $(id).text(edit.val());
    else
      // copy span value to <span/> tag
      $(id).text(span.text());
    // remove all service fields
    edit.remove();
    span.remove();
  },
  default: function(obj) {
    // empty by default
    obj.text('');
  },
  add: function(obj) {
    var t = obj.text().trim();
    obj.text('');
    // make textarea and fill in it
    obj.append($('<textarea/>')
      .prop('id', 'edit')
      .css('width', '100%')
      .css('height', '100%')
      .prop('placeholder', editLine.defaultField.placeholder)
      .prop('maxlength', '255')
      .text(t)
    );
    // hide old value
    obj.append($('<span/>')
      .prop('id', 'span')
      .text(t)
      .hide()
    );
  }
});

Определение поля типа radio

выполнить немного сложнее, но принцип тот-же. Полный текст можно посмотреть в файле /sample/views/stout/update.php расширения yii2-byone-uploader.

Заключение

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

Оставить комментарий

Только авторизованные пользователи могут оставлять комментарии. Пожалуйста авторизуйтесь или пройдите регистрацию.