Creating a smart remote upload script with jQuery AJAX and PHP

Question

I'm currently creating an image hosting script and so far so good. I've used several plugins to create the local uploading process with drag & drog + AJAX which works totally fine. Now I've moved to the part where I need to create the remote uploading process with jQuery AJAX and a PHP script to handle the whole thing.

How it's gonna work

My thought are like this: There is a big box in the middle of the page that accepts the URLs to be remote uploaded. Once valid URL(s) are passed into the text area, they will be immediately sent to the server side script via jQuery AJAX. It's bound with a keyup event.

This is how it looks like: http://i.imgur.com/NhkLKii.png.
The "HERE COME THE URLS" part is already a text area - So that part's already done.

Where I need help

The issue with this whole situation is: Once there are valid URLs pasted into the text area, those must be immediately be converted to some sort of box which also includes an uploading progress. Something that looks like this (copied from the local uploading part): http://i.imgur.com/q7RyDmb.png

It was easy implement the progress indicator for the local uploading, since it was a feature offered by the plugin I've used, but I don't know how to indicate the progress of remote uploading, which is totally being made from scratch.

So this is how I've imagined the logic to flow:

User pastes some URLs into the text area
There is a client-side check to validate the pasted URLs
Validated URLs are send to upload.php on keyup ~~(?)~~
URLs are being processed
While the upload goes on, we show the users the progress in the knob (?)
PHP script finishes the process and returns back the uploaded URLs
I update the page in the AJAX success callback to display the uploaded files

So, the two process flows marked with (?) are unclear to me - I don't know how to achieve those...

What I have tried

Well, I didn't just come here and ask you to do everything for me, but I've come across a dead end and I don't know how to continue. What I've done so far is collect the URLs from the text area, and if there are multiple URLs separated by a line break (), I simply use split to get an array of pasted text and then use another function inside the loop to validate if they are URLs. If there is no line break detected inside the text area value, then I simply check the one line that was provided. On each case, I send the whole text area to the PHP script, because I don't know how to get rid of the invalid URLs in jQuery. I've created a function called debug() in PHP which stores anything into a debug.log file and this is what I'm getting (in one try) when I paste something into the text area:

https://www.google.com/https://www.google.com/

I paste https://www.google.com/ once in the text area, but it gets logged twice in the PHP side and I can't determine why.

This is how my jQuery looks like:

// Remote upload
    var char_start  = 10;
    var index       = 0;
    var urls        = $('.remote-area');
    var val_ary     = [];

    urls.keyup(function(){      
        if (urls.val().length >= char_start)
        {           
            var has_lbrs = /
|
/i.test(urls.val());
            val_ary = urls.val().split('
');

            if (has_lbrs)
            {
                for (var i = 0; i < val_ary.length; i++)
                {
                    if (!validate_url(val_ary[i]))
                    {
                        val_ary.splice(i, 1);
                        continue;   
                    }       
                }

                $.ajax({
                    type: 'POST',
                    url: 'upload.php',
                    data: {
                        upload_type: 'remote', // Used to determine the upload type in PHP
                        urls: val_ary, // Sending the whole array here
                    },
                });
            }
            else
            {
                if (!validate_url(urls.val()))
                {
                    // Display an error here
                    return; 
                }

                $.ajax({
                    type: 'POST',
                    url: 'upload.php',
                    data: {
                        upload_type: 'remote', // Used to determine the upload type in PHP
                        urls: urls.val(), // Sending what's in the text area
                    },
                });
            }
        }
    });

The questions

So the final questions are:

~~How do I send my information correctly to the PHP script, only valid URLs and have them kind of "process-able" in my PHP script~~.
How do I indicate the progress of the upload?

If I was somewhere unclear during my question, please let me know, I'll try to reexplain.

Thank you.

Updates

09/12/2013

I think I have managed to solve the double-sending issue where my AJAX would send the same information twice to the PHP script. What I did was code in a delay anonymous function that sends the text area content to the PHP script after an user stops typing for 2 seconds. Once the user stops typing again, the timer resets and a new AJAX request will be made. So, I'm assuming that this issue has been solved. I'll come back to it if anything strange occurs.

Now I'm still left with the progress indicators part. I'd appreciate your thoughts on that one.

My new code: http://pastebin.com/SaFSLeE9