FileUpload with url

I am uploading my images using a service and it is working fine, But 😦 How can the FileUpload field show a file via url

Forms\Components\FileUpload::make('image_upload')
  ->afterStateUpdated(
      function (Closure $set, Closure $get, TemporaryUploadedFile $state, HandleImagesService $handleImagesService) {
          $set(
              'image_id',
              $handleImagesService->handleImage(
                  null,
                  $state,
                  ModelsNamesWithImages::STATUS_IMAGE,
                  auth()->user()->role->id,
                  $get('force_upload') ?? false
              )->id
          );
      }
  )
  ->afterStateHydrated(
      function (ShowImage $component, Closure $get) {
          if ($get('image_id')) {
              $image = Image::find($get('image_id'));
              $component->state($image->storageLocation->host_name . '/' . $image->file_path);
          }
      }
  ),

Forms\Components\FileUpload::make('image_upload')
  ->afterStateUpdated(
      function (Closure $set, Closure $get, TemporaryUploadedFile $state, HandleImagesService $handleImagesService) {
          $set(
              'image_id',
              $handleImagesService->handleImage(
                  null,
                  $state,
                  ModelsNamesWithImages::STATUS_IMAGE,
                  auth()->user()->role->id,
                  $get('force_upload') ?? false
              )->id
          );
      }
  )
  ->afterStateHydrated(
      function (ShowImage $component, Closure $get) {
          if ($get('image_id')) {
              $image = Image::find($get('image_id'));
              $component->state($image->storageLocation->host_name . '/' . $image->file_path);
          }
      }
  ),

 $image->storageLocation->host_name . '/' . $image->file_path

 $image->storageLocation->host_name . '/' . $image->file_path

this gives the right url

Solution:

I added the CORS middleware to my FastAPI service and it is working Last question When I want to edit the resource, the image dose not appear...

Jump to solution

10 Replies

LancelotGamerOP•16mo ago

When the upload finishes It tries to get the image from here http://localhost/storage/WDg6gQRYyncjVtefyTC7WGZxrAKUNK-metaU2NyZWVuc2hvdCAyMDIzLTA4LTI0IDE0Mjg0MS5wbmc=-.png but the right URL is http://localhost:8088/uploads/lYNXDISVmx.png I can not configure a disk because I only need an HTTP request I asked if I could configure a disk with just A URL in the Laravel Discoed server Their answer was: Then that’s not a disk. The Storage facade and disks are an abstraction layer for filesystems. Not for making HTTP requests. Use the HTTP client to make HTTP requests: https://laravel.com/docs/10.x/http-client

Laravel - The PHP Framework For Web Artisans

Laravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things.

LancelotGamerOP•16mo ago

Any help please

Patrick Boivin•16mo ago

I'm not sure the FileUpload field was designed to work that way... What is the image upload service you're using, can you give a bit more context?

LancelotGamerOP•16mo ago

I am using my own FastAPI server to handle image saving, creating thumbnails and selecting the storage

Patrick Boivin•16mo ago

Ok, I'm not familiar with this service. Does the image upload work correctly? The issue is just displaying the image after it's uploaded?

LancelotGamerOP•16mo ago

Yes the image upload work correctly Yes The issue is just displaying the image after it's uploaded I Almost find the solution

->getUploadedFileUrlUsing(
    function (Closure $get) {
        if ($get('image_id')) {
            $image = Image::find($get('image_id'));
            return $image->storageLocation->host_name . '/' . $image->file_path;
        }
    }
)

->getUploadedFileUrlUsing(
    function (Closure $get) {
        if ($get('image_id')) {
            $image = Image::find($get('image_id'));
            return $image->storageLocation->host_name . '/' . $image->file_path;
        }
    }
)

but now I am getting this error Access to fetch at 'http://127.0.0.1:8088/uploads/CshuuKhfkY.png' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Patrick Boivin•16mo ago

Have a look at config/cors.php, I think you can add an exception for a known domain (ie. your other app's port): https://laravel.com/docs/10.x/routing#cors

Laravel - The PHP Framework For Web Artisans

Laravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things.

awcodes•16mo ago

I think the problem here is that you don’t have a filesystem driver for you custom disk. So the storage facade doesn’t know how to construct a urll for it.

Solution

LancelotGamer•16mo ago

I added the CORS middleware to my FastAPI service and it is working Last question When I want to edit the resource, the image dose not appear I created A custom field (ShowImage) to show the image via URL Is there a way to display the image inside the FileUpload field without a disk The FileUpload field is strongly coupled with the Laravel storage facade that's why I have this issue from the beginning Or my problem is a very specific edge case

Forms\Components\FileUpload::make('image_upload')
    ->getUploadedFileUrlUsing(
        //display uploaded image
        function (Closure $get) {
            if ($get('image_id')) {
                $image = Image::find($get('image_id'));
                return $image->storageLocation->host_name . '/' . $image->file_path;
            }
        }
    )
    ->afterStateUpdated(
        //upload the image
        function (Closure $set, Closure $get, TemporaryUploadedFile $state, HandleImagesService $handleImagesService) {
            $set(
                'image_id',
                $handleImagesService->handleImage(
                    null,
                    $state,
                    ModelsNamesWithImages::STATUS_IMAGE,
                    auth()->user()->role->id,
                    $get('force_upload') ?? false
                )->id
            );
        }
    ),
ShowImage::make('image_show')
    ->afterStateHydrated(
        //display the image
        function (ShowImage $component, Closure $get) {
          if ($get('image_id')) {
              $image = Image::find($get('image_id'));
              $component->state($image->storageLocation->host_name . '/' . $image->file_path);
          }
    })
    ->hidden(function (Page $livewire) {
        return !$livewire instanceof Pages\EditStatusImage;
    }),

Forms\Components\FileUpload::make('image_upload')
    ->getUploadedFileUrlUsing(
        //display uploaded image
        function (Closure $get) {
            if ($get('image_id')) {
                $image = Image::find($get('image_id'));
                return $image->storageLocation->host_name . '/' . $image->file_path;
            }
        }
    )
    ->afterStateUpdated(
        //upload the image
        function (Closure $set, Closure $get, TemporaryUploadedFile $state, HandleImagesService $handleImagesService) {
            $set(
                'image_id',
                $handleImagesService->handleImage(
                    null,
                    $state,
                    ModelsNamesWithImages::STATUS_IMAGE,
                    auth()->user()->role->id,
                    $get('force_upload') ?? false
                )->id
            );
        }
    ),
ShowImage::make('image_show')
    ->afterStateHydrated(
        //display the image
        function (ShowImage $component, Closure $get) {
          if ($get('image_id')) {
              $image = Image::find($get('image_id'));
              $component->state($image->storageLocation->host_name . '/' . $image->file_path);
          }
    })
    ->hidden(function (Page $livewire) {
        return !$livewire instanceof Pages\EditStatusImage;
    }),

Patrick Boivin•16mo ago

Is there a way to display the image inside the FileUpload field without a disk

I'm not sure... I've never implemented something like this. But the idea of the ShowImage component sounds like a good and simple solution.

Gaming

Programming

FileUpload with url