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

Окрім цього, надання можливості вашим користувачам завантажувати зображення з фронтенду може дати вам багато переваг, таких як надання їм можливості завантажувати документи або будь-яке зображення, яке вони хотіли б використовувати, наприклад, для профілю.

In this post, we are going to evaluate a few plugins that allow us to achieve what we want to do.

Як завантажити зображення WordPress з фронтенду за допомогою плагіна

Here we will discuss several ways to upload WordPress images with several types of plugins.

Завантаження файлів у фронтенді за допомогою плагіна форми

One of the quick and most accessible ways is using a form plugin, this is useful when we need to create, for example, a contact form where we need the user to upload a document or any useful info using an image.

Є багато плаґінів, які дозволяють створювати форми з полем завантаження файлу, одним з таких є Contact Form 7, який дозволяє завантажувати файли на ваш сайт у фронтенді безкоштовно.

Отже, щоб використовувати форми для дозволу користувачам завантажувати файли у фронтенді, нам потрібно спочатку створити форму, тому після встановлення плагіна перейдіть до Контакти > Додати новий.

На цьому екрані ви матимете деякі теги HTML із коротким кодом для кожного поля всередині, за замовчуванням створюється форма з основними полями.

As we want to add a file upload field, click on the place where you want to add the field and then click on the file in the available buttons/options.

This will open a popup where you can set limits for your file upload, add all the limits you want, and finally, click on insert tag.

Це додасть шорткод для поля у вмісті форми.

Now you can customize as much as you want your form, add other fields, or add HTML and also CSS if you want as the form admits all that kinds of customizations.

When everything is done, you can add a title and click on Save.

Це згенерує шорткод, який ви можете використати для вбудовування форми у свій пост або сторінку, скопіюйте та використайте блок, доступний у редакторі сторінки для додавання шорткоду, у цьому випадку ми побачимо, як додати його за допомогою редактора Gutenberg.

Now you need to publish it and you'll be able to see the form with the fields that you added and the file upload button.

All you need to do is click on Choose File and select the file, in this case, your image, from your folders on your PC.

After clicking on submit, it should be done and the image should be now on your site.

This way your users will be able to upload images to your site, along with some other info we may need like the name or email from the person who uploaded using a form, really simple and functional.

Using the WordPress File Upload Plugin

Now that we saw the normal "old" way, let's see how to upload an image but using this plugin that will allow us to embed a file upload option in any post or page without needing to fill in other info or create a form at all.

First of all, we need to have the "WordPress File Upload" plugin installed as this will give us all the options needed to create the file upload option.

After having this plugin active on our site, we should be able to see a menu option available to check all the files we do upload using it.

Щоб використовувати його, все, що нам потрібно зробити, це додати шорткод [wordpress_file_upload] там, де ми хочемо його відобразити, у цьому випадку у нас є пост з деякою підготовленою інформацією, де ми додали шорткод, щоб ви могли перевірити, як він виглядатиме у редакторі Gutenberg і на фронтенді.

Редактор Gutenberg

Фронтенд

Now that our upload form is added, all you need to do is click on "Select File" to explore your PC files, and finally, click on Upload File.

Clicking on this button will allow your user to upload an image or file to your site, and the best part of this is that we can select where in the server we want to upload the image directly under the plugin settings as well as how it looks like and many other settings for the form.

The main place where we can check the uploads will be in the "Upload Files" option in the left menu from the admin dashboard, this is the main page for the plugin where all the files uploaded are displayed.

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

Manage Media per user role using WP Media Folder

Як ми бачимо, існує багато способів дозволити нашим користувачам завантажувати зображення та файли у фронтенді, але проблема в цих випадках полягає в тому, що зображення можуть бути завантажені "випадково" і ми не можемо мати точний хороший контроль над тим, куди вони завантажуються, зовсім не хвилюйтесь! WP Media Folder прийде на допомогу.

WP Media Folder has a special tool dedicated to managing the access to your media library, this could be really helpful when you want to control who uploads images and where as well as if you want to allow your users to manage their own media directly in the media library without being able to see other roles/users media.

First of all, we need to have installed WP Media Folder, this is the plugin that will allow us to use all the available features to make this work.

Now that we have installed it, we will need to enable the option to limit the access, for this, go to Settings > WP Media Folder, and we will be able to see the WP Media Folder main configuration page.

In this section, navigate to Access & Design > Media Access.

In this section, in order to limit the media per user role and automatically generate a folder dedicated for each user role, we will select Media access by User or User role and User roles.

We also have more options like selecting a path folder or allowing the role/user to see all other users/role media.

Now that we have enabled the option to only allow a user role to edit their own media, let's say we have an editor role and we want all the users under this role to be able to see and manage their media for posts and pages.

With the options we did select, all of this should be possible so let's see, for this, all we need to do is log in as an Editor and upload the media as they would do normally.

When logged in as an editor, you will be able to see the media library like this.

As you can see there are two sections where the Media Library lets you know that we are in a folder called "editor" so let's upload some media to check how it would work.

Процес завантаження буде точно таким же, як ви зазвичай робите, це може бути використання інструменту завантаження з фронтенду або просто використання вашої Медіа Бібліотеки, все, що завантажує ця роль користувача, буде автоматично обмежено для цієї ролі користувача.

One of the advantages of using WP Media Folder is that this role(and all others with access to the wp-admin) will be able to create folders using the +Add New Folder button.

We can confirm that under the media library an Editor folder has been created and inside is the folder that we created using the Editor role, and it was as easy as clicking a button!

Now that we have enabled the media access option, a folder will be created for each role that accesses your Media Library and uploads an image, and will be able to share or not the media with the other users under the same role depending on the settings you choose, you can also have more control over your media using filters.

What an awesome feature and really easy to use! Isn't it?

Allow your users to upload files in the most professional way

In this post, we were able to see how to allow our users to upload their images in the most professional way and adapt our site to each case such as just submitting a form or also allowing our Editors to create a shared folder that only they will be able to see in the Media Library, and this is not all! With WP Media Folder you will be able to do more other things like connecting your Media Library to a cloud service, Awesome! Isn't it?

Check more about WP Media Folder and the Access Limitation here!