Arms crossed female doctor against white background

Uploading Other Types of Files¶

Adding support for uploading other types of files (such as PDF files) is similar
to uploading images. That’s why in the next sections we’ll show the required
steps, but we won’t repeat the same explanations. In this example, we’ll add
support for uploading PDFs that represent the contracts subscribed by the users.

Configuring the Uploading of Files

Define the «mapping» for the new user contracts:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
# config/services.yaml
parameters
    app.path.user_contracts /uploads/files/user/contracts
    # ...

# config/packages/vich_uploader.yaml
vich_uploader
    # ...
    mappings
        user_contracts
            uri_prefix '%app.path.user_contracts%'
            upload_destination '%kernel.project_dir%/public%app.path.user_contracts%'

Preparing your Entities to Persist Files

Considering that the entity already exists, add two new properties to
store the name of the contract ( property) and the binary contents of
the PDF file ( property). Only the first property is persisted in
the database:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
use Doctrine\ORM\Mapping as ORM;
use Symfony\Component\HttpFoundation\File\File;
use Vich\UploaderBundle\Mapping\Annotation as Vich;

/**
 * @ORM\Entity
 * @Vich\Uploadable
 */
class User
{
    /**
     * @ORM\Column(type="string", length=255)
     * @var string
     */
    private $contract;

    /**
     * @Vich\UploadableField(mapping="user_contracts", fileNameProperty="contract")
     * @var File
     */
    private $contractFile;

    // ... getters and setters for these properties
}

Displaying the Files in the and Views

This is the most tricky part of adding support for file uploads. Contrary to
images, it’s not easy to provide a preview of the contents for any kind of file.
Instead of trying to do that, we’ll display a View contract (PDF) link in the
and views.

First, add the property to the list of properties to display:

1
2
3
4
5
6
7
8
9
# config/packages/easy_admin.yaml
easy_admin
    entities
        User
            # ...
            list
                fields
                    # ...
                    - contract

Then, add the option to define the custom template to use to render
the contents of this property:

1
2
3
4
5
6
7
8
9
# config/packages/easy_admin.yaml
easy_admin
    entities
        User
            # ...
            list
                fields
                    # ...
                    - { property 'contract', template 'contract.html.twig' }

Now you must create the template with this content:

1
{{ value }}">View contract (PDF)

Reload your backend and you’ll see the link to the contract PDF. However, if you
click on the link, you won’t see the file. The reason is that the
property only stores the name of the file, but you also need the public path to
that file (which in this case is stored in the parameter).

The solution is simple: you can define any number of arbitrary options for a
property and they will be available in your custom template via the
option. So you just need to add a new option in the property definition:

1
2
3
4
5
# Before
- { property 'contract', template 'contract.html.twig' }

# After
- { property 'contract', template 'contract.html.twig', base_path '%app.path.user_contracts%' }

Then, update the custom template to use this new option:

1
{{ field_options.base_path ~ '/' ~ value }}">View contract (PDF)

Tip

You can also solve this issue using Symfony asset packages instead of relying
on EasyAdmin options. The custom template would look like this:

1
{{ asset(value, 'user_contracts') }}">View contract (PDF)

What?

A simple image uploader module that can be included within your project.

It will:

  • Upload imagess (to S3 and Google drive/photos) effortlessly
  • Use ImageMagic to automatically re-size & optimise the image for mobile devices
  • Return a list of the images that were uploaded to S3 for use in other objects.

Image Rotation

We started using this code in staging today and
users started uploading images imediately.

Was a user comment that delighted us.

However they uploaded images from their iDevices which were not in the correct orientation…

So we need to add rotation.

Therefore we need to rotate images 90 degrees clockwise.

We’ll be using gm for our image rotation.

Understanding JPEG Exif Orientation

For convenience, here is what the letter F would look like if it were tagged correctly and displayed by a program that ignores the orientation tag (thus showing the stored image):

See: Jpeg Exif Orientation http://sylvana.net/jpegcrop/exif_orientation.html for more detail

Customizing Form Fields for Image and File Uploading¶

EasyAdmin renders the VichUploaderBundle form fields using a custom form theme
that improves their default styling. For example, image fields are rendered as
thumbnails which display the original images when clicking on them.

If you prefer to use the original VichUploaderBundle styles, add its form theme
in the configuration option (put it at the end to override
EasyAdmin’s default form theme):

1
2
3
4
5
6
7
# config/packages/easy_admin.yaml
easy_admin
    # ...
    design
        form_theme
            - '@EasyAdmin/form/bootstrap_4.html.twig'
            - '@VichUploader/Form/fields.html.twig'

Apply the same technique in case you want to use your own form theme instead
of the one provided by VichUploaderBundle.

Usage

var uploader = require('base64-image-upload');

var image = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
uploader.setApiUrl("https://yourimageapi.com/upload");
uploader.upload(image, {mime"image/png", headers {'X-Access-Token' '123456789'}}, function(err, response){
  if (!err && response.statusCode == 200){
    console.log(JSON.parse(response.body));
    // handle response
  } else {
    console.log(err, response);
    // handle errors
  }
});

Another example using the Data URI scheme in the base64 string. If this scheme is used, the MIME can be left out of the call to .

var uploader = require('base64-image-upload');

var image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
uploader.setApiUrl("https://yourimageapi.com/upload");
uploader.upload(image, {headers {'X-Access-Token' '123456789'}}, function(err, response){
  if (!err && response.statusCode == 200){
    console.log(JSON.parse(response.body));
    // handle response
  } else {
    console.log(err, response);
    // handle errors
  }
});

Another example leaving out the (optional) options argument, if no headers, URL params, or MIME need to be specified.

var uploader = require('base64-image-upload');

var image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
uploader.setApiUrl("https://yourimageapi.com/upload");
uploader.upload(image, function(err, response){
  if (!err && response.statusCode == 200){
    console.log(JSON.parse(response.body));
    // handle response
  } else {
    console.log(err, response);
    // handle errors
  }
});

Почему EWWW Image Optimizer не работает

EWWW Image Optimizer requires exec()

После установки плагин может дать предупреждение

EWWW Image Optimizer requires exec() or an API key. Your system administrator has disabled the exec() function, ask them to enable it.

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

Если у вас свой сервер, тогда отправляемся в настройки php, а именно в .

Чтобы определить, где находится php.ini, можно воспользоваться функцией phpinfo(). Создаём файл в корне сайта, потом записываем туда

= phpinfo();?>

Сохраняем, потом открываем в браузере

Ищем строчку Loaded Configuration File

Где расопложен php.ini

Итак, у нас php.ini расположен в

Редактируем его, для чего можно воспользоваться Far Manager или putty.

В самом файле ищем строку . Это список отключенных функций php. Изымаем оттуда , и потом сохраняем.

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

Включаем exec

Теперь, чтобы изменения вступили в силу, нужно перезагрузить php (Apache или php-fpm).

service apache2 restart

или

service php5-fpm restart

Всё, теперь функция работает.

Отсутствует: jpegtran, optipng, gifsicle, pngout

EWWW Image Optimizer использует jpegtran, optipng, pngout, pngquant, gifsicle и cwebp. Отсутствует: jpegtran, optipng, gifsicle, pngout. Установите отсутствующие через Настройки или Инструкции по установке.

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

Установка в Debian, Ubuntu

apt-get install libjpeg-progs 

Установка в Debian, Ubuntu

apt-get install optipng

Установка в Debian, Ubuntu

apt-get install gifsicle

Обзор плагина EWWW Image Optimizer

Сжатие происходит при помощи jpegtran, TinyJPG, JPEGmini, optipng, pngout, pngquant, TinyPNG и gifsicle. Этого набора утилит хватит за глаза, чтобы качественно сжать ваши PNG и JPG изображения без потери качества, а gifsicle, входящий в состав EWWW Image Optimizer, даже сможет позаботиться о gif анимациях.
По умолчанию, плагин настроен на сжатие изображений без потерь, поэтому не бойтесь неожиданного появления артефактов на картинках, их не будет. Разве что информация EXIF и прочие комментарии могут быть потёрты, что может быть важным для фотографий, но этот момент настраивается в опциях.

Сам автор перечисляет преимущества своего детища

  • Ваши страницы будут загружаться быстрее. Отсюда меньше отказов и более лояльное отношение поисковых систем
  • Бекапы сайта создаются быстрее. Это означает меньшую нагрузку на хостинг, а на дешёвых хостингах этот момент немаловажен
  • Ускоряется работа с сайтом. Вам не придётся ждать, пока изображения пережмутся, можно настроить так, что всё будет происходить на лету либо позже
  • Оптимизация всех изображений сайта. Плагин имеет возможность сканировать систему и находить неоптимизированные изображения, включая элементы дизайна, и исправлять этот недочёт

Насколько хорошо плагин сжимает изображения

Берём любое изображение и добавляем его в

win.png

Загрузка длится немного дольше обычного, так как утилиты сжимают изображение.
На выходе получается

Тестируем EWWW Image Optimizer

У меня из маленького PNG файла в оригинале 236 Кб вышло 219 Кб. Таким образом, получилось сжать 7,2%. Представляете, что будет с большими файлами?

Как зайти на сайт под своим именем?

Первым делом после регистрации — проверьте свою электроную почту. Если всё прошло успешно, то вы увидите письмо с
поздравлением и, главное — ссылкой для ввода пароля.

Такая процедура сделана для того, чтобы:

  • Вы сами ввели свой пароль,
  • он не фигурировал в присылаемых письмаз и его нельзя было бы украсть,
  • вводом пароля на отдельной странице Вы подтвердили серьезность намерений 🙂

Далее загрузите главную страницу сайта (http://www.photosight.ru), и заполните поля логин и пароль соответственно.
Если данные введены правильно, после нажатия кнопки enter вы автоматически входите на сайт.

Как зарегистрироваться?

Логин

Не думайте, что выбрать лицеприятный логин не важно (мол, никто всё равно не узнает) — это часть имени вашей
будущей страницы на фотосайте. Hазовётесь «по приколу» loh — будете иметь страницу loh.photosight.ru

Под
полем для ввода логина находится ссылка для проверки его уникальности.

Имя и фамилия. Вот тут можно не выкладывать всю правду — поле является обязательным, но на текущий момент не
проверяется, а в дальнейшем может быть изменено.

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

Картинка с кодом. Для подтверждения того, что вы хотите зарегистрироваться на нашем сайте, введите в пустое поле все
символы (цифры, буквы), увиденные на картинке. Это помогает избегать левых и обходных регистраций роботами.

Второй блок (необязательные поля) заполняется пользователями по желанию. На возможность регистрации он не влияет.
После заполнения всех полей жмете кнопку «зарегистрироваться» и следуем дальнейшим инструкциям.

Настройка EWWW Image Optimizer

Чтобы попасть в настройки, переходим в —
Вы можете ничего не менять, по умолчанию всё работает как надо.

Основные настройки EWWW Image Optimizer

На скрине всё видно и достаточно ясно описано, что за что отвечает. Вы можете изменить настройки под свои нужды.

Если вы развернёте вкладку , то увидите, что установлено в системе, и чего не хватает для нормального функционирования, а также статистику проделанной работы. Список возможных проблем в Статусе плагина и их решений смотрите ниже в специальном разделе.

Параметры установки необходимых утилит

Вот как выглядит вкладка . Здесь, пожалуй, прокомментирую непереведённую часть

Содержимое вкладки Дополнительные

  • Deferred Optimization — сжатие будет происходить позже, по расписанию WP Cron
  • Disable Automatic Optimization — Изображения не будут оптимизированы в момент их загрузки на сайт. Их оптимизацию можно провести позже вручную либо настроить расписание оптимизации. Опция будет полезна, если вы загружаете много изображений и не хотите ждать, пока они будут сжиматься
  • Include Media Library Folders — Если вы отключили автоматическую оптимизацию изображений, отметьте этот пункт для включения сжатия по расписанию для последних двух директорий из библиотеки медиафайлов

Продолжение содержимого вкладки Дополнительные

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

Сжатие неоптимизированных изображений

Research (way more detail than you’ll ever need)

How are others solving the problem?

  • https://gist.github.com/dariocravero/3922137 (out of date!)
  • S3 Upload: https://gist.github.com/dnprock/6689567

There was a suggestion to use Meteor CollectionFS: https://github.com/CollectionFS/Meteor-CollectionFS to upload/store images.
This is a terrible idea because the file gets stored in MongoDB!
Not only is MongoDB storage considerably more expensive, its also
slower than a CDN!! (If you know why this is a good idea, please tell me!)

Avoid Filename Collisions with Hashes

All the big players are storing files with generated names (instead of using
the files’ original name such as «photo1.jpg» thus avoiding name collisions)
e.g:

Google is maintaining the file name and storing it in a folder:

https://lh6.googleusercontent.com/-273qnruKEa8/Us0Xnng-KeI/AAAAAAAAAXI/WVr-OfaLRUA/w886-h589/Christmas%2Bin%2BGlenluce%2B2013_001.jpg

Should we maintain the filename?
I tend to re-name all the photos I want to be able find later.
So does giving these hash.jpg on our system loose some valuable information…?
(feedback please…!)

Helpful Links

  • Unoffical Meteor FAQ: https://github.com/oortcloud/unofficial-meteor-faq
  • Meteor Fontawesome4: https://github.com/chrismbeckett/meteor-fontawesome4 (icons)

Troubleshooting

If you get an enoent error while trying to run gm see:
http://stackoverflow.com/questions/16222116/error-spawn-enoent-while-using-gm-in-node

History

I’ve partially «solved» this problem before:

  • https://github.com/nelsonic/node-cdn
  • https://github.com/nelsonic/imagemagic-test
  • https://github.com/nelsonic/imgresizer

I need to re-visit these and get them working together (with tests 🙂

Загрузка изображений на сайт

1. Перейдите на страницу Записи -> Добавить новую или Страницы -> Добавить новую, или откройте существующую запись в режиме редактирования.

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

3. Нажмите на кнопку Выберите файлы, выберите файл изображения с вашего компьютера. Или просто перетащите файл прямо в поле загрузки:

4. По окончании процесса загрузки нажмите на кнопку Вставить в запись/страницу.

5. Чтобы настроить параметры изображения нажмите на вставленное в запись изображение, далее в левом верхнем углу изображения нажмите на появившуюся кнопку Редактировать:

Откроется окно редактирования настроек изображения:

Заголовок — Текст подсказки при наведении курсора мыши на изображение.

Подпись — Подпись к изображению (также будет использоваться в качестве альтернативного текста).

Ссылка – Адрес, по которому будет выполняться переход при клике по изображению.

Выравнивание – Положение в записи или на странице.

Размер – Размер изображения (можно изменить позднее).

6. После корректировки параметров изображения нажмите на кнопку Обновить.

Interface

Set the API URL to upload images to.

Get the current API URL. Returns null if it was never set.

Base64String can be bare (e.g. ) or use the Data URI scheme (e.g. ). If the string is bare, options.mime needs to contain a valid MIME type string (e.g. «image/png» or «image/jpeg»).

Callback should take in two arguments, error and response. The response object will have the same structure as that returned by the request package. Specifically, response.statusCode and response.body are what you expect.

options

Object that can be (optionally) used as the second argument in a call to .

String that contains the mime type of the file to upload (e.g. «image/png» or «image/jpeg»). If mime is specified both in options and through the Data URI, options will override the Data URI.

HTTP headers to add to the POST request. Content-Type will be automatically appended based on the MIME type specified in options.mime or the Data URI.

If provided, used instead of to get base API URL for the current upload.

Ответ

Эта ошибка обычно возникает, когда Вы загружаете изображение или другие файлы в WordPress с помощью встроенного загрузчика мультимедиа.

Есть несколько причин, которые могут привести к ошибке HTTP при попытке загрузить файлы с помощью медиазагрузчика WordPress. В принципе, WordPress не может понять причину, и поэтому он отображает общее сообщение об ошибке.

Для решения задачи существует несколько способов. Рассмотрим их более подробно.

Способ 1. Убедитесь, что ошибка HTTP не временная

Во-первых, Вы должны подождать несколько минут, а затем повторить попытку загрузить файл изображения. Эта ошибка иногда бывает вызвана необычным трафиком и низкими ресурсами сервера, которые автоматически фиксируются на большинстве серверов хостинга WordPress. Если это не сработает, попробуйте загрузить другой файл изображения. Если другой файл загружен успешно, попробуйте сохранить исходный файл изображения меньшего размера и повторите загрузку.

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

Если все эти шаги все равно приводят к ошибке, это означает, что ошибка не вызвана временным сбоем и определенно требует вашего непосредственного внимания.

Способ 2. Увеличьте предел памяти WordPress

Наиболее распространенной причиной этой ошибки является нехватка памяти для использования WordPress. Чтобы исправить это, Вам нужно увеличить объем памяти, который PHP может использовать сервере. Это можно сделать, добавив следующий код в основной конфигурационный файл wp-config.php:

define ('WP_MEMORY_LIMIT', '256M');

Способ 3. Измените библиотеку редактора изображений, используемую WordPress

WordPress работает на PHP, который использует два модуля для обработки изображений. Эти модули называются GD Library и Imagick. “Движок” может использовать любой из них, в зависимости от того, какой из них доступен.

Тем не менее, Imagick, как известно, часто сталкивается с проблемами памяти, вызывающими ошибку HTTP во время загрузки изображений. Чтобы исправить это, Вы можете сделать библиотеку GD редактором изображений по умолчанию.

function wpschool_image_editor_default_to_gd( $editors ) {
    $gd_editor = 'WP_Image_Editor_GD';
    $editors = array_diff( $editors, array( $gd_editor ) );
    array_unshift( $editors, $gd_editor );
    return $editors;
}
add_filter( 'wp_image_editors', 'wpschool_image_editor_default_to_gd' );

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

Способ 4. Использование метода .htaccess

Этот метод позволяет Вам контролировать, как Imagick использует серверные ресурсы. Многие хостинг-провайдеры ограничивают способность Imagick использовать несколько потоков для более быстрой обработки изображений. Однако это приведет к появлению ошибки HTTP при загрузке изображений. Простой способ исправить это – добавить следующий код в файл .htaccess, который находится в корневом каталоге сайта:

SetEnv MAGICK_THREAD_LIMIT 1

Этот код просто ограничивает модель Imagick одним потоком для обработки изображений.

Мне нравитсяНе нравится

Ссылка на основную публикацию