Jump to content

Pre-mages uploading GIF


phppup
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by phppup
Typos
Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.