uniqueginun's avatar

Livewire: submit uploaded file to another server

Hello,

I have a livewire component that uses WithFileUploads trait. I want when the user submit the upload I resend this uploaded file to API endpoint.

<div class="container mt-5">
    <div class="row justify-content-center mt-5">
        <div class="col-8 mt-4">
            <form wire:submit.prevent="upload">
                <div class="form-group">
                    <label for="uploaded-file">Choose</label>
                    <input type="file" wire:model="attach" class="form-control">
                </div>
                <br />
                <br />
                <div class="form-group">
                    <button class="btn btn-primary btn-sm btn-block">Upload</button>
                </div>
            </form>
        </div>
    </div>
</div>
<?php

namespace App\Http\Livewire;

use Illuminate\Support\Facades\Http;
use Livewire\Component;
use Livewire\WithFileUploads;

class RequestService extends Component
{

    use WithFileUploads;

    public $attach;

    private $serviceUrl = "http://multistep-form-livewire.test/api/";

    public function upload()
    {
        $this->validate([
            'attach' => 'max:2000'
        ]);

	// here i put static tmp name but how to get it dynamically 

        $name = File::get(storage_path('app/livewire-tmp/XHsQgMvQEcGz17BOOad1TrTjGhLhJ0-metaU2NyZWVuc2hvdCAyMDIwLTEyLTAyIDE4Mjg1OS5qcGc=-.jpg'));

        $url = $this->serviceUrl . "upload-external-file";

        $response = Http::attach('attachment', $name, "testname")
                    ->post($url, [
                        'name' => 'Sara',
                        'role' => 'Privacy Consultant',
                    ]);


        dd($response->status());
    }

    public function render()
    {
        return view('livewire.request-service');
    }
}

what I want is to get the actual file from livewire temporary directory and send it to the API endpoint.

0 likes
3 replies
srasch's avatar
srasch
Best Answer
Level 14

Maybe there are better ways to handle it, but Caleb made a TemporaryUploadedFile class which gives you all information of your upload.

Try this:

<?php

namespace App\Http\Livewire;

use Illuminate\Support\Facades\Http;
use Livewire\Component;
use Livewire\WithFileUploads;
use Livewire\TemporaryUploadedFile;

class RequestService extends Component
{

    use WithFileUploads;

    public $attach;

    private $serviceUrl = "http://multistep-form-livewire.test/api/";

    public function upload()
    {
        $this->validate([
            'attach' => 'max:2000'
        ]);
          
	      $tempFile = TemporaryUploadedFile::createFromLivewire($this->attach->getFilename());

        $name = File::get($tempFile);

        $url = $this->serviceUrl . "upload-external-file";

        $response = Http::attach('attachment', $name, "testname")
                    ->post($url, [
                        'name' => 'Sara',
                        'role' => 'Privacy Consultant',
                    ]);


        dd($response->status());
    }

    public function render()
    {
        return view('livewire.request-service');
    }
}
2 likes
uniqueginun's avatar

I did this instead. what you think?

$name = File::get(storage_path("app/livewire-tmp/".$this->attach->getFilename()));
1 like
uniqueginun's avatar

your answer is working if I add this before pass it to to file facade

$tempFile->path();

Please or to participate in this conversation.