Chaeril's avatar

Processing uploaded file in livewire

Hi, im using jetstream livewire stack, i have uploaded the file. now i want to decrypt it. then show back the result to user. the problem is my browser always crash while processing it. is there a way to make sure it wont crash the browser?, maybe something like promise await

            // read the data
            $data = file_get_contents($this->csv->getRealPath());

            $helper = new \App\Helper\CryptoHelper();

            $this->dispatch('refresh-datatable', $helper->decrypt($data))->to('decrypt-list');

thanks

0 likes
7 replies
Snapey's avatar

my browser always crash while processing it

you mean your browser gives up waiting? How long does this decrypt function take?

2 likes
Chaeril's avatar

@Snapey it gave me script is slowing down browser, and gives option to stop or debug script. my test file is 3.5mb. after looking at the response, it seems the decrypt is quite fast. since i already seen the decrypted data inside "component" => "snapshot".

so it might be printing a lot of data to browser that crash it.

1 like
Chaeril's avatar

i print the data to browser using foreach

#[On('refresh-datatable')]
    public function refreshDatatable($csv)
    {
        $temp = collect(explode('\r\n', $csv))->filter()->toArray();
        $i = 0;

        foreach ($temp as $line) {
            if ($i == 0) {
                $this->headings = str_getcsv($line, '|');
                $i++;

                continue;
            }
            $this->csvData[] = str_getcsv($line, '|');
        }
        $this->cols = count($this->headings);
    }

view


    <table class="w-full table-auto whitespace-nowrap text-gray-800 dark:text-gray-200" wire:model='csvData'>
      <thead>
        <tr>
          @forelse ($headings as $heading)
            <th class="px-4 py-2">{{ $heading }}</th>
          @empty
          @endforelse
        </tr>
      </thead>
      <tbody>

        @forelse ($csvData ?? [] as $csv)
          <tr>
            @for ($i = 0; $i < $cols; $i++)
              <td>{{ $csv[$i] }}</td>
            @endfor
          </tr>
        @empty
          <tr>
            <td colspan="{{ $cols }}">No data found</td>
          </tr>
        @endforelse
      </tbody>
    </table>
1 like
Snapey's avatar

how many rows of data?

have you tried paginating the data?

2 likes
Chaeril's avatar

@Snapey i tried, using paginate collection function i found online. but i kept getting error ->links() on array so i gave up middle way. for now i'll just reduce the rows shown only top 20. if in the future they wanted full file. i'll just make download decrypted file button.

thanks

Please or to participate in this conversation.