Limited Period Offer : 20% Discount on online/offline courses, for more details call/whatsapp

How to use and upload profile photos to AWS s3 using laravel jetstream

0 min read
2 years ago By Santosh Kshirsagar

As mentioned in official documentation https://jetstream.laravel.com/3.x/features/profile-management.html#enabling-profile-photos enable profile photos in config/jetstream.php by removing comment for Features::profilePhotos()

In .env file add aws credentials also make sure to follow laravel documentation to use aws s3 driver

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=
AWS_BUCKET= 
AWS_USE_PATH_STYLE_ENDPOINT=false

add one more variable in .env

VAPOR_ARTIFACT_NAME=true

You can change filesystem disk to s3 if needed for default save

FILESYSTEM_DISK=s3

You have to make sure add cors configuration on aws s3 bucket if you get this error - CORS header 'Access-Control-Allow-Origin' is missing.

go to s3 > select bucket > permission > cors configuration edit

in below example change to your local url if want and change with your website url

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "http://127.0.0.1:8000"
        ],
        "ExposeHeaders": []
    },
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "https://yourwebsitename.com"
        ],
        "ExposeHeaders": []
    },
    {
        "AllowedHeaders": [],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]
Jun 20, 2023 19:35 Back to Articles

Other Articles

React State Management Made Easy: Zustand and Redux Explained React State Management Made Easy: Zustand and Redux Explained

In this article, we will discover two powerful state management libraries for React: Zustand and Redux. Also explore their unique approaches, advantages, and use cases, to simplify and optimize your application's state handling. Choose the best fit for your project's needs and boost development efficiency with these popular solutions.

2 years ago By Mitali Gupta
How to identify Stack Questions? How to identify Stack Questions?

In this article, you will get clarity about how to find any given question that can be solved using stack.

2 years ago By Aniket Prajapati
Top 10 Web Frameworks of 2023 Top 10 Web Frameworks of 2023

As technology evolves and new trends arise, the landscape of web frameworks is continually shifting. This article will present the top 10 web frameworks to consider in 2023.

2 years ago By Mitali Gupta
What is Agile Development ? What is Agile Development ?

Agile development is a software development approach that emphasizes flexibility, collaboration, and continuous delivery. It involves iterative development, continuous feedback, a collaborative approach, adaptability, and continuous improvement.

2 years ago By Mitali Gupta