Progress not calculating correctly.

[jringeisen]

Hey 👋, I'm following your example and can't seem to get the progress to work correctly. Everything was working great until I got to the chunking piece. I couldn't figure out what was going on so I copied your code exactly and it's still giving me the same issue. I logged the data which you can see below:

[2023-03-14 16:30:08] local.INFO: data {"curSize":18500460,"fileSize":2583410,"progress":716.1255859503524} 
[2023-03-14 16:30:08] local.INFO: data {"curSize":19500460,"fileSize":2583410,"progress":754.83411460047} 
[2023-03-14 16:30:09] local.INFO: data {"curSize":20083870,"fileSize":2583410,"progress":777.4170573002349} 

It's incrementing in the correct chunk sizes, but for some reason the initial file size is way off. For instance, the first one should be 1000000, the 2nd one should be 1000000, and the 3rd one should be 583410.

Any ideas on why this is happening?

[KTanAug21]

Hi @jringeisen! 👋

Can you check your livewire-tmp folder and see if there is an existing file with the same name as the file you're uploading? If so that might be the cause of the issue!

As you've mentioned, the initial file size should be "1000000"( the chunkSize ), and yet we get the first curSize as more than that amount! This is because if an existing file exists in livewire-tmp with exactly the same name as a current file we're uploading, then our logic will merely merge the chunk with that existing file; hence instead of starting off from 0 size+chunkSize, we get (existing-size)+chunkSize for curSize

---

As a quick fix to really know if the above explanation is the issue, can you delete the livewire-tmp folder, then upload your file again, see if that gives the correct curSize ?

Then, for a permanent fix, please make sure that the $finalPath saved in the livewire-tmp folder is unique! I unfortunately did not add that specific logic in the repo/code, thanks for pointing this out--I'll add it soon!

[jringeisen]

@KTanAug21 I finally figured it out and this was it. I was uploading the same file set to test it and because they had the same name as files already in the tmp directory it was adding the data to those files. I went ahead and created a generateUniqueFileName(file) on the client side this way the fileName is always unique and that solved my issue.

[KTanAug21]

That's awesome to hear! 🌟 If you have any more findings/suggestions on any of the Livewire approach in this repo, please feel free to create more issues! Happy Livewire journey!

I'ma close this issue now

[KTanAug21]

Reopening! Will close once I add the logic for "generateUniqueFileName"!

[jringeisen]

@KTanAug21 here's the approach that I took:

function generateUUID()
{
    let d = new Date().getTime();
    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        const r = (d + Math.random()*16)%16 | 0;
        d = Math.floor(d/16);
        return (c=='x' ? r : (r&0x3|0x8)).toString(16);
    });
    return uuid;
}

function generateUniqueFileName(file)
{
    const fileExt = file.name.split('.').pop();
    const uniqueFileName = generateUUID() + '.' + fileExt;

    return uniqueFileName;
}

Then when setting the file name I used it like this:

@this.set('uploads.'+index+'.fileName', generateUniqueFileName(file) );

[KTanAug21]

Nice one @jringeisen!

This is great reference, thank you--You can make a PR of this code snippet if you'd like, that would be super cool!

Otherwise let me know, I'll add it in later, and mention you as a contributor in the Read me ⭐

[jringeisen]

@KTanAug21 I can do that. I'll do it later today.

[KTanAug21]

That would be great @jringeisen! No rush on this, take your time