Laravel 8.* + Backpack + Article with image (file upload)

In order to proceed you should have:
- Laravel installed + Backpack admin (teaching purposes)
- Tags CRUD created
- Article CRUD created
- virtual host ready for you
- xampp setup or other web server
- composer installed

Article
- title — 255 symbols
- content — text — RichTextEditor
- tags (many available) — select with multiple options

New tutorial to add file upload to the artilce
- image (one image) — image upload

#STEP 1: Create migration to add image to an article

We are adding a new column image — which will be used to store the url of the image. Next step is to run the migration.

Expected result.

#STEP 2: Alter Article model

We need to add extra items to use:

And then add two functions in FUNCTIONS section.

First function will make sure that once we delete an entry — the file will be deleted as well.

Second function is a mutator responsible for the upload the image to the correct folder.

We have logic replacing /public folder with /storage folder due to the fact that images are exposed to end users using /storage folder.

#STEP 3: Install intervention/image

Run

#STEP 4: Adjust Article controller

We need to adjust getFieldsData function and add the image column.

Our next change is related to setupListOperation method. We need to update it to the following

This will make sure that when we are adding images they will be shown on list as well.

#STEP 5: Make disk public and allow files to be shown

#STEP 6: Time to test

Adding of an item

Edit of an item

List items table

Note: Files are uploaded to storage/app/public/articles

But they are available to the end users by accessing — DOMAIN/storage/articles/{IMAGE_NAME}

Video

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store