Pre-mages uploading GIF

[phppup]

I suppose one advantage to having a slow internet connection is that it allows me to see potential issues from a unique perspective.

With that in mind, I've noticed that selecting images to upload is nearly instantaneous, regardless of size or quantity.

However, these factors become enormous after clicking the upload button.

There seems to be a gap between the clicking of the button and the actual start of the upload process.

(Is the server actually organizing the files and preparing the selected files in the array?)

The question is, how do I access the beginning and end of this gap (in order to add a loading GIF?

Essentially, the page is already loaded. It's the file processing/compilation that I'm trying to intercept (or piggy-back).

Also, can I control which files are uploaded first, second, etc.?

I know I can change file names, but can I control the order of the actual upload.

Ex: uploading IMG01, IMG23, IMG62.

Desired renaming my01, my02, my03, respectively.

I've tried beginning my PHP script with:

if(!empty(natcasesort($_FILES['files']['name'])))

But the actual uploading seems to be random.

[kicken]

17 minutes ago, phppup said:

There seems to be a gap between the clicking of the button and the actual start of the upload process.

I'm guessing the gap you're referring to is the upload process.   When you upload files PHP handles receiving the incoming data and saving it into temporary files on the server.  That all happens internally before your code runs.  Only after that upload process is complete does your script run and then have an opportunity to do something with the uploaded files.

19 minutes ago, phppup said:

Also, can I control which files are uploaded first, second, etc.?

The files should be uploaded in the order of your file input elements. If you're using a single input element with the multiple attribute then I don't believe there is anyway to control the order.

Not that any of that should matter anyway.  By the time your code can do anything all the files will be uploaded and available so you can just do what you will with them.

[phppup]

Thanks for the explanation. That would so seem to make sense.

So back to the question:  how do I access the beginning and end of this gap (in order to add a loading GIF?

 

[If I'm understand correctly, if I select IMG62, and then IMG01, and then IMG23, my end result (while named sequentially) will be mismatched because of the order they were selected]

Edited February 16, 2021 by phppup
Typos

[kicken]

The beginning would be when you click the submit button to start the upload.  You can use Javascript to make your loading GIF visible at that point, it will remain visible while the browser upload the files to the server.

Once the upload is complete and your script returns a response then it'll replace the current page and loading gif.

document.getElementById('upload-form').addEventListener('submit', function(){
    document.getElementById('loading-gif').style.display='block';
});

<img id="loading-gif" src="loading.gif" style="display:none;">
<form id="upload-form">
</form>

 

[phppup]

Thanks.

After some thought, I kinda realized that the starting point coincided with the submittal click. I guess it was too obvious to see initially. LOL

In playing a bit, I did find that the GIF vanishes of its own, but I thought it was a flaw of some sort, so thanks for the extra info.