Media Manager files from S3

[refocusTheory]

Hi there, great work! I am integrating with Laravel and have it working. The only hang up I have is getting files from S3 disk or even locally, I get "undefined media.js:409 Uncaught TypeError: Cannot read properties of undefined (reading 'split')" I cant seem to figure the pattern, when i log dir variable its undefined, if you could provide any context on the media manager that would be great! And thanks for the hard work!

[refocusTheory]

Here is the code im using for the scan.php:

` $scan = function ($dir) use (&$scan) {
        $files = [];
        $contents = \Storage::disk('s3-user-images')->allFiles($dir);

         foreach ($contents as $item) {
             $isDirectory = substr($item, -1) === '/';

            $files[] = [
                'name' => basename($item),
                'type' => $isDirectory ? 'folder' : 'file',
                'path' => $item,
                 'size' => $isDirectory ? null : \Storage::disk('s3-user-images')->size($item),
                 'items' => $isDirectory ? $scan($item) : null,
                 'directory' => $isDirectory ? $item : dirname($item), // assuming directory if path ends with '/'
             ];
         }

         return $files;
     };

    $response = $scan($scandir );

  header('Content-type: application/json');

  echo json_encode([
      'name'  => '',
      'type'  => 'folder',
      'path'  => '',
      'items' => $response,
  ]);

 }`

[givanz]

Hi

Thank you.

What is the output of scan php? Is the output json valid?

You can check the json with something like https://jsonviewer.stack.hu/

At first glance I see that the js error is caused by path being null.

Make sure that path is a string and not null

'path' => $item ?? '',

or

'path' => (string) $item,

You can also try changing items from null to empty array

'items' => $isDirectory ? $scan($item) : [],

In the demo scan.php the output format is

{
  "name": "",
  "type": "folder",
  "path": "",
  "items": [
    {
      "name": "15.jpg",
      "type": "file",
      "path": "\\/15.jpg",
      "size": 135553
    },
    {
      "name": "2.jpg",
      "type": "file",
      "path": "\\/2.jpg",
      "size": 87295
    },
    {
      "name": "4.jpg",
      "type": "file",
      "path": "\\/4.jpg",
      "size": 225688
    },
    {
      "name": "5.jpg",
      "type": "file",
      "path": "\\/5.jpg",
      "size": 158339
    },
    {
      "name": "6.jpg",
      "type": "file",
      "path": "\\/6.jpg",
      "size": 149161
    },
    {
      "name": "7.jpg",
      "type": "file",
      "path": "\\/7.jpg",
      "size": 57618
    },
    {
      "name": "mountains",
      "type": "folder",
      "path": "\\/mountains",
      "items": [
        {
          "name": "1.jpg",
          "type": "file",
          "path": "\\/mountains\\/1.jpg",
          "size": 72587
        },
        {
          "name": "12.jpg",
          "type": "file",
          "path": "\\/mountains\\/12.jpg",
          "size": 130542
        },
        {
          "name": "3.jpg",
          "type": "file",
          "path": "\\/mountains\\/3.jpg",
          "size": 126297
        }
      ]
    },
    {
      "name": "sample.webm",
      "type": "file",
      "path": "\\/sample.webm",
      "size": 1404516
    },
    {
      "name": "sample.webp",
      "type": "file",
      "path": "\\/sample.webp",
      "size": 5138
    }
  ]
}

You can use this output temporarily as dummy output in your scan.php to check if the error is caused by scan.php or by something else.

[refocusTheory]

Hey thanks a lot! Actually all i had to do is return the items in array not in json, then it picked up on the this.response[0].path Thanks again!