How can i use an $photo-temporaryUrl() with an drag and drop function?

Question

I'm currently implementing a drag-and-drop functionality for images in my project and aiming to utilize $photo->temporaryUrl() to display the image on-screen before committing to saving it. The goal is to defer saving the $photo until the user clicks the save button.

However, I'm facing a challenge in achieving this due to the nature of my drag-and-drop implementation. Unlike a conventional field, I'm uncertain about how to integrate the necessary part into the existing drag-and-drop setup.

I've explored the documentation at https://laravel-livewire.com/docs/2.x/file-uploads and attempted to replicate the Temporary Preview URLs section. Nevertheless, I'm unsure about the placement of the within the drag-and-drop structure.

I'm seeking assistance in resolving this issue, which arose from my earlier error discussed here: Stack Overflow Question.

Below is the relevant snippet from my add-products.blade.php file:


{{--    --}}

    @if ($photo)

        {{-- my img   --}}
        

        {{-- hidden imput so i can use this in the controllers   --}}
        
    @endif

    {{var_dump($photo)}} {{-- this is for debugging --}}

    {{-- My drop and drag    --}}

    

            {{-- i originally put the  here, but dont know if it was correct because it aint working       --}}

        
            
            Drop Your Files Here
            
                
                Processing Files

And here's the corresponding section from my AddProducts.php file:

namespace App\Livewire;

use AllowDynamicProperties;
use App\Models\Product;
use Illuminate\Support\Facades\Storage;
use Livewire\Component;
use Livewire\WithFileUploads;

#[AllowDynamicProperties] class AddProducts extends Component
{
    use WithFileUploads;
    protected $listeners = ['deleteDroppedImage' => 'deleteDroppedImage'];
    public $files = [];
    public $url; // Declare a public property
    public Product $product;
    public $photo;

    // How the example code looked like 
    public function updatedPhoto() {
        $this->validate([
            'photo' => 'image|max:102400', // 100MB Max
        ]);
    }
    
    // These 2 functions are what i had before the updatedPhoto function
    public function render()
    {
        $this->url = $this->url ?? 'https://img.freepik.com/premium-vector/default-image-icon-vector-missing-picture-page-website-design-mobile-app-no-photo-available_87543-11093.jpg';
        return view('livewire.add-products');
    }

    public function updatedFiles()
    {

        $this->validate([
            'files.*' => 'image|max:102400', // 100MB Max
        ]);
//        dd($this->files);
//        // You can do whatever you want to do with $this->files here
//        foreach ($this->files as $file) {
//            $path = $file->storePublicly('photos', 'public'); // Store the file publicly in the 'public' disk and get the path
//            $path = "storage/" . $path;
//            $newUrl = asset($path); // Get the URL of the new file
//
//
//            $this->url = $newUrl; // Update the URL of the file
//        }
    }
}

Currently, the $photo variable is returning NULL even after dropping an image into the drag-and-drop area. Resolving this issue would pave the way for further improvements in saving the image correctly.

Any insights or guidance on resolving this matter would be greatly appreciated. Thank you for your assistance in advance!

Edit: After dropping an image, the files = [] array contains the following data:

array:1 [▼
  0 => Livewire\Features\SupportFileUploads\TemporaryUploadedFile {#1697 ▼
    -test: false
    -originalName: "dfbvRDOpvwwUbx3IKkHSVNH2dd9u21-metaZmVlXzc4Nl81ODdfcG5nLndlYnA=-.webp"
    -mimeType: "application/octet-stream"
    -error: 0
    #hashName: null
    #disk: "local"
    #storage: Illuminate\Filesystem\FilesystemAdapter {#1711 ▶}
    #path: "livewire-tmp/dfbvRDOpvwwUbx3IKkHSVNH2dd9u21-metaZmVlXzc4Nl81ODdfcG5nLndlYnA=-.webp"
    path: "/var/www/html/storage/app/livewire-tmp"
    filename: "dfbvRDOpvwwUbx3IKkHSVNH2dd9u21-metaZmVlXzc4Nl81ODdfcG5nLndlYnA=-.webp"
    basename: "phposZkW0"
    pathname: "/var/www/html/storage/app/livewire-tmp/dfbvRDOpvwwUbx3IKkHSVNH2dd9u21-metaZmVlXzc4Nl81ODdfcG5nLndlYnA=-.webp"
    extension: ""
    realPath: "/var/www/html/storage/app/livewire-tmp/dfbvRDOpvwwUbx3IKkHSVNH2dd9u21-metaZmVlXzc4Nl81ODdfcG5nLndlYnA=-.webp"
    size: 75844
    writable: false
    readable: false
    executable: false
    file: false
    dir: false
    link: false
  }
]

How can i use an $photo->temporaryUrl() with an drag and drop function?

Answers (1)

Related Questions

How can i use an $photo-&gt;temporaryUrl() with an drag and drop function?

Answers (1)

Related Questions

How can i use an $photo->temporaryUrl() with an drag and drop function?