How to access asset files when using Laravel and React with Inertia?

Question

My app uses Laravel as backend, and React as a frontend solution with Inertia as intermediary.

The idea is to load .wav files from media storage (say /storage/app/audio) to let users playback phone calls. File names should be passed to the <audio> tag inside the CallPreview component for it to grab the actual files from the storage folder.

    const CallPreview: React.FC<{
    date: string;
    grade: string;
    recording_name: string;
}> = ({
    date,
    grade,
    recording_name
}) => {    
    return (
        <div className="call-preview">
            <div className="call-preview-date">{date}</div>
            <div className="call-preview-grade">Grade: {grade}</div>
            <div className="call-preview-record">
                <audio controls src={recording_name}></audio>
            </div>
        </div>
);
}

It turns out, you cannot access any of the asset files directly, if I understood it correctly. You have to use something akin to Storage::*path to file* in routes, which would have defeated the purpose since the files should be loaded dynamically based on user's input.

Is there a better way? Am I missing something?

vsvietkov · Accepted Answer · 2025-09-11 22:25:18Z

2

As you said, you cannot access files from storage folder from the UI regardless the framework or solution you use.

Long story short, when you have any HTML tag which uses some source - this source link (path) should be accessible for GET request. And UI has access only to public folder in your root directory (you can find index.php file there - its an entry point for your application).

So, you should either put your files there or use a link to some external storage (like S3). I would not say it is a good idea to store in public user-related files, as anyone can fetch them, so you should consider some authorization for such requests too

In summary - ideal solution is to use external public storage like S3. As a temp solution, you can still use public folder. But in any case, you should ensure only an authorized user will be able to access this content. You can even create some method which will copy required files from storage to public only when they are needed and cleanup them from public after some time.

answered Sep 11 at 22:25

vsvietkov

362 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

vsvietkov Sep 11 at 22:35

You should also understand that if you store files in a project (any folder, not only storage) they definitely will be lost at some time. You cannot store user-related files in your repo, and you cannot store files just on your device, as you will eventually run out of storage memory or lose data.

Andrii's Quest Sep 12 at 11:11

Much appreciate it! To clarify: there is a way out there to load assets dynamically, without reloading the whole page, they just need to be reachable by a GET request?

vsvietkov Sep 12 at 12:26

There are definitely exist some plugins available for webpack or vite package managers (or any other that you use), but I am not sure that they will suit your purpose - as far as I remember they are more for like static files.

vsvietkov Sep 12 at 12:27

You can just copy needed files in your controller before the rendering or even make it async on UI via additional request

Collectives™ on Stack Overflow

How to access asset files when using Laravel and React with Inertia?

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related