As mentioned in the previous post, one of the problems that comes with importing CSV files into WordPress – specifically large files – is giving the user feedback that something is happening while waiting for the process to complete.
But when your’e doing this within the context of a web application, it takes a little bit more work because everything happens in a single process. If you don’t show your users any feedback, then it looks as if the page is just sitting there.
Then again, because the process can take so long, you need to let the user know that something is happening.
Giving Visual Cues in Importing CSV Files into WordPress
In the previous post, I walked through some pseudo-code for how to setup the server-side to store info on the progress of the import process, but – as mentioned – that’s only half of it. That is, we need to be able to have the browser asking for the an update from the server, then update an indicator (whatever type it is that you might chose) whenever the response is received.
For this post, I’m assuming the following:
- You have a file called `request.js`
- The file is being enqueued via your theme or plugin
2. Create The Files
Recall in the previous function, I provided a high level function hooked to an Ajax action called
import_files. In short, the code is responsible for:
- Reading the most recent file that hasn’t been read
- Inserting information into the database
- Deleting the file that was just read
- Updating the number of processed files
One of the major components to this function the final step – that it updates the number of processed files – because, without that, we have no way of tracking the progress.
$.post alone is responsible for kicking off the import file process. When the request completes, it will receive the
response value from the server after which we’re free to update the display however we see fit.
In this case, I’ve opted to set my progress bar to 100% and display a message on the screen that reads “Import Complete!”
3. Checking Progress
Of course, there’s activity happening from the time we kick off the
import_files routine until the function has completed, right? And this is where the code responsible for updating the progress bar and actually giving visual cues comes into play.
The main idea behind all of this this:
- Every so many milliseconds (I’ll say 1000 for 1 second, just to make it easier to read), check the server for the status of the import
- Update the progress bar to the value returned from the server. Multiply it by 100 to get a percentage.
- If the progress has completed, then move the progress bar to 100% and display the success message.
Remember in the previous post, I shared a small function called
If the option responsible for saving the parsed file has been deleted, then it means the job is done. In this case, I’ll send a
-1 back to the browser (since anything over 0 is indicative of progress).
Notice that I’ve opted to use
$.get here. This doesn’t really matter that much but since I’m simply polling to, you know, get a value, it makes sense.
Note also that I store the value of the timer. This is so that it can be cleared whenever the progress is complete.
4. All Together Now
Notice that it includes both the timer code for polling the server and the code responsible for kicking off the import.
Permitting that you’ve implemented everything correctly on the server-side, then you should see some type of indication that work is being completed.
At this point, the basic functionality is complete and you should have everything that you need in order to kick off an import process and track it’s progress.
The last thing that needs to happen is that any residual files and records that we’ve written to disk and/or to the database need to be cleaned up. In the final post, I’ll cover how to do that.