Przesyłanie zdjęć jest jedną z najważniejszych rzeczy, gdy mówimy o stronie internetowej, ponieważ zdjęcia są zasadniczo tym, co nadaje styl stronie bez zdjęć, strona mogłaby wyglądać na zbyt starą lub mogłaby nie uzyskać liczby klientów/użytkowników, których chcielibyśmy uzyskać.

Oprócz tego, umożliwienie użytkownikom przesyłania obrazów z frontendu może dać Ci wiele korzyści, takich jak umożliwienie im pobierania dokumentów lub dowolnego zdjęcia, które chcieliby użyć, na przykład, do profilu.

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

Jak przesłać obraz WordPress z frontendu za pomocą wtyczki

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

Prześlij pliki z poziomu frontendu za pomocą wtyczki formularza

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.

Istnieje wiele wtyczek, które pozwalają tworzyć formularze z polem do przesyłania plików, jedną z nich jest Contact Form 7, który pozwala na przesyłanie plików na Twoją stronę na froncie za darmo.

Aby użyć formularzy, aby umożliwić użytkownikom przesyłanie plików na froncie, najpierw będziemy musieli utworzyć formularz, więc po zainstalowaniu wtyczki przejdź do Kontakt > Dodaj nowy.

Na tym ekranie będziesz mieć kilka tagów HTML z krótkim kodem dla każdego pola wewnątrz, domyślnie formularz jest tworzony z podstawowymi polami.

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.

To doda shortcode dla pola w treści formularza.

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.

To wygeneruje shortcode, który możesz użyć do osadzenia formularza w swoim poście lub stronie, skopiuj i użyj bloku dostępnego w edytorze strony do dodawania shortcode, w tym przypadku zobaczymy, jak dodać go za pomocą edytora 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.

Aby użyć tego pluginu, wystarczy dodać krótki kod [wordpress_file_upload] tam, gdzie chcemy go wyświetlić, w tym przypadku mamy przygotowany post z pewnymi informacjami, gdzie dodaliśmy krótki kod, aby można było sprawdzić, jak to będzie wyglądać w edytorze Gutenberg i na froncie.

Edytor Gutenberg

Frontend

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.

Jak widać, jest to łatwy i funkcjonalny plugin, który pozwoli nam uzyskać obrazy od naszych użytkowników bez większych niedogodności, poza wklejeniem krótkiego kodu w zapleczu i czekaniem na przesłanie pliku przez użytkowników.

Manage Media per user role using WP Media Folder

Jak widzimy, istnieje wiele sposobów, aby umożliwić naszym użytkownikom przesyłanie obrazów i plików z poziomu interfejsu frontend, ale problem w tych przypadkach polega na tym, że obrazy mogą być przesyłane "losowo" i nie mamy dokładnej kontroli nad miejscem, w którym są one przesyłane, ale nie ma się czym martwić! WP Media Folder na ratunek.

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.

Proces przesyłania byłby dokładnie taki sam, jak zwykle, mógłbyś użyć narzędzia do przesyłania z poziomu frontendu lub po prostu użyć Biblioteki Mediów, wszystko, co ta rola użytkownika przesyła, będzie automatycznie ograniczone dla roli użytkownika.

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!