Acquiring exclusive files from Laravel 8 storage directory using JavaScript

Question

Acquiring exclusive files from Laravel 8 storage directory using JavaScript

I find myself in a specific situation:

Working with a Laravel 8 application.
My users upload STL files, which are stored in the storage/app/users/{userid} directory.
These STL files are private and not accessible to everyone as they are not located in the public folder.

Now, I am attempting to access these private STL files using JavaScript in order to display them in my Three.js scene for viewing.

However, when trying to retrieve the file path from the database before and passing it to the Three.js STLLoader function like this:

import * as THREE from 'three';
import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';

// {...}
let THREE_loader = new STLLoader();
let THREE_geometry;

THREE_loader.load(filePath, function (geometry) {
    THREE_geometry = geometry;

    // {...}
});

I encountered the 404 error message every time I attempt it, since the provided path is relative to the web root and incorrect!

[Error] Failed to load resource: the server responded with a status of 404 (Not Found)

So, my question now is:

Is there a way to overcome this obstacle? How can I access private files (not in the public folder) through JavaScript in my Laravel 8 application? There must be a solution, right?

Some other solutions I considered:

Directly storing the files in the database -> files may be too large?!
Storing an "secure" encrypted file path within the public(!) directory in the database -> not secure enough?!

Both of these "solutions" are definitely not ideal for me!

If anyone could provide guidance or direction on this matter, I would greatly appreciate it! 🤔

Warm regards, Leon

javascript laravel three.js laravel-8 laravel-storage

Answer 1

Answer №1

My Journey to Finding the Solution:

In General:

After much deliberation, I realized that to access private files, there must be a special web route with a corresponding FileController that checks for permission to view the file. It then either aborts or returns the file using a FileResponse.

In Laravel (in my case):

JavaScript

import * as THREE from 'three';
import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';

let THREE_loader = new STLLoader();
let THREE_geometry;

THREE_loader.load('data/users/1/filename.stl', function (geometry) {
  THREE_geometry = geometry;

  // {...}
});

PHP (Web Route)

<?php

use App\Http\Controllers\File\FileController;
use Illuminate\Support\Facades\Route;

Route::get('data/users/{user_id}/{filename}', [FileController::class, 'load_user_stl']);

PHP (FileController)

<?php

namespace App\Http\Controllers\File;

use App\Http\Controllers\Controller;
use Illuminate\Contracts\Filesystem\FileNotFoundException;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\File;
use Illuminate\Support\Facades\Gate;
use Illuminate\Support\Facades\Response;

class FileController extends Controller
{
    public function load_user_stl($user_id, $filename): \Illuminate\Http\Response
    {
        if (str_contains($filename, '.stl')) {
            if (Gate::allows('access-user-stl') || Auth::id() == $user_id) {
                return $this->return_user_stl($user_id, $filename);
            } else {
                abort(403);
            }
        } else {
            abort(400);
        }
    }

    public function return_user_stl($user_id, $filename): \Illuminate\Http\Response
    {
        $path = storage_path('app/data/users/'.$user_id.'/'.$filename);

        try {
            $file = File::get($path);
            $type = File::mimeType($path);
            $response = Response::make($file);
            $response->header('Content-Type', $type);

            return $response;
        } catch (FileNotFoundException) {
            abort(404);
        }
    }
}

I hope this explanation helps someone out there, and if you have a cleaner solution, please share it with me:)

Leon

Answer 2

My Journey to Finding the Solution:

In General:

After much deliberation, I realized that to access private files, there must be a special web route with a corresponding FileController that checks for permission to view the file. It then either aborts or returns the file using a FileResponse.

In Laravel (in my case):

JavaScript

import * as THREE from 'three';
import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';

let THREE_loader = new STLLoader();
let THREE_geometry;

THREE_loader.load('data/users/1/filename.stl', function (geometry) {
  THREE_geometry = geometry;

  // {...}
});

PHP (Web Route)

<?php

use App\Http\Controllers\File\FileController;
use Illuminate\Support\Facades\Route;

Route::get('data/users/{user_id}/{filename}', [FileController::class, 'load_user_stl']);

PHP (FileController)

<?php

namespace App\Http\Controllers\File;

use App\Http\Controllers\Controller;
use Illuminate\Contracts\Filesystem\FileNotFoundException;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\File;
use Illuminate\Support\Facades\Gate;
use Illuminate\Support\Facades\Response;

class FileController extends Controller
{
    public function load_user_stl($user_id, $filename): \Illuminate\Http\Response
    {
        if (str_contains($filename, '.stl')) {
            if (Gate::allows('access-user-stl') || Auth::id() == $user_id) {
                return $this->return_user_stl($user_id, $filename);
            } else {
                abort(403);
            }
        } else {
            abort(400);
        }
    }

    public function return_user_stl($user_id, $filename): \Illuminate\Http\Response
    {
        $path = storage_path('app/data/users/'.$user_id.'/'.$filename);

        try {
            $file = File::get($path);
            $type = File::mimeType($path);
            $response = Response::make($file);
            $response->header('Content-Type', $type);

            return $response;
        } catch (FileNotFoundException) {
            abort(404);
        }
    }
}

I hope this explanation helps someone out there, and if you have a cleaner solution, please share it with me:)

Leon

Acquiring exclusive files from Laravel 8 storage directory using JavaScript

Answer №1

My Journey to Finding the Solution:

In General:

In Laravel (in my case):

JavaScript

PHP (Web Route)

PHP (FileController)

Similar questions

When trying to access the same path, useEffect does not trigger

The dynamic functionality of the Bootstrap React Modal Component seems to be malfunctioning

Encountering an error with Angular-NG8001 due to an unknown element. Any suggestions on how

Tips for integrating Server-Side Rendering into an already established React.js app running on Express.js

What is the best approach for writing a concise Select statement that produces a data list?

Creating a Breeze js entity using a JSON string and importing it into the breeze cache: A step-by-step guide

Implement a dispatcher in raw JavaScript using React combined with the Redux Toolkit package

An effective method for appending data to a multidimensional array in Google script

Add fresh material to the bottom of the page using Javascript

Root scope digest trigger delay

Tips on adding to Jquery html code while maintaining the current CSS styling

Load grid data only when the tab is clicked in ExtJS

Selector that targets an attribute in the beginning of its value [name^=value]

Is there a way to interact with a DOM element through clicking and then pass it as a variable using PHP?

how can I transfer model values to a dashboard in Rails 5?

What is a superior option to converting to a promise?

What is the best way to execute a series of asynchronous JavaScript functions one after the other?

Tips for refreshing extensive JSON structures?

npm ERROR: Unable to install the package named "<packageName>" because it conflicts with an existing package of the same name

CSS - Absolute positioning appears to be slightly choppy in Microsoft Edge