How to synchronize a file upload with an insert in MySQL through Javascript-AJAX-PHP?

[Altairzq]

Hello.

I'm using AJAX for all the updates to the web site I'm building and it works very well. But now I face the need to:

1) Upload a file (an image or video) to a folder in the server.
2) Insert a row in MySQL with the name of the file plus some other information (year and a comment).

The user would upload the file and fill in the information in the same window, and should have a single message (if possible) saying that the file was added or not (meaning both the upload and the insert).

I have been doing some googling and found information as how to simulate and AJAX upload, since it seems AJAX does not support file uploads (hope I'm wrong). This is what I found:

http://www.anyexample.com/programming/php/php_ajax_example__asynchronous_file_upload.xml

So following that example I could upload the file, and I'd have all the information from the form, in the PHP, and I could synchronize the upload and the insert, but then I can't figure out how to send the OK from the PHP to a Javascript (i guess) to update the html and display the message in the web site. And anyway, is this the right approach to do what I need?

I'm a rookie in Javascript and AJAX, so I'd really appreciate any hint.

[digital-ether]

Yes, unfortunatley you can't use XMLHttpRequest to upload a file fro the users computer.

The reason is that JavaScript does not have access to the file contents. It only has access to the file name, once the user has selected a file to upload. This is a security feature.

The actual upload of files, is completely done by the browser, and is not in the control of client side scripting.

Unfortunately PHP (without special extensions) cannot control the upload of the file into the sever either. This is why creating and upload progress monitor in PHP is difficult under default settings.

Taking that into account. Your choices in uploading files from browser to PHP without refreshing the page are:

1) Use an Iframe to upload the file
2) Use a client side plugin, such as Flash or Java

The first is probably the simplest, and more cross browser compatible.

So following that example I could upload the file, and I'd have all the information from the form, in the PHP, and I could synchronize the upload and the insert, but then I can't figure out how to send the OK from the PHP to a Javascript (i guess) to update the html and display the message in the web site. And anyway, is this the right approach to do what I need?

You'll need a way for the IFRAME to send a message to the parent page. From the Iframe you can reference the parent window's window object using: window.parent

A simple example is:

// inside iframe
window.parent.document.write('hi');

This will write "hi" in the parent window.

So you can use the same to invoke any other function. eg:

// inside iframe
window.parent.uploadDone(true);

So when your PHP page finishes writing the upload file, you could send back a page with the JS:

echo '<script>window.parent.uploadDone(true);</script>';

This will let the parent know the status of the upload.

[digital-ether]

BTW: in the parent, you'll have defined the function: uploadDone()

eg:

function uploadDone(status) {

if (status) alert('upload complete');
else alert('upload error');

}

[Altairzq]

Wow your reply is pure gold to me, thanks a lot! I'm working on it, I have the upload working with the iframe, now I need to set up the communication as you show, it's exactly what I need, much appreciated!

[Altairzq]

Made a small test and it's working beautifully, thanks again :)

One rookie question: why is it necessary to use an iframe to do this upload? Couldn't it be done in a simple div? Well I know it can't, I tried, but why?

Or where could I find information that would clarify this point to me?

[digital-ether]

Made a small test and it's working beautifully, thanks again :)

One rookie question: why is it necessary to use an iframe to do this upload? Couldn't it be done in a simple div? Well I know it can't, I tried, but why?

Or where could I find information that would clarify this point to me?

The Form has to be submitted by the browser, instead of programmatically via JavaScript, in order to send the file contents.

The Iframe does not belong to the same document. So the browser can submit the form within the Iframe without reloading the parent document. It only reloads the Iframe.

If it were a DIV, the browser would reload the parent.

[digital-ether]

Something that might interest you is that before you could do XMLHttpRequest, the basis of AJAX, you could create Iframes programmatically with client side scripting.

Back then it was called iframe remoting, and it worked well and achieved all that you can do now with current AJAX and more, such as sending files. It was also cross domain and had detailed load progress indication. So in a way, current AJAX was a step backwards functionality wise. (It is just easier to make it work cross browser)

The new specifications from W3C, WebSockets, will really go beyond any of this however, especially since it allows low level TCP instead of just HTTP.
http://dev.w3.org/html5/websockets/

[Altairzq]

Thank you this is really interesting to know. I should read about all this stuff to get a background of what I'm doing. I need more time ack!

Ah well.. I'm facing another problem now, related to this but will start a new thread.

[Altairzq]

So when your PHP page finishes writing the upload file, you could send back a page with the JS:

echo '<script>window.parent.uploadDone(true);</script>';

This will let the parent know the status of the upload.

This bit is not working for me. It writes the output in a new window as plain text and that's it.

So far I was using a small PHP script that called the JS function outside the <??> tags (at the end of the php code) and it worked fine. But now I'm inserting the upload inside a PHP program that controls all the web flow and I would need to pass control to a JS function from inside a function and then exit().

So it seems nothing is trying to interpret that code and it's just plain text written in a new document. What I'm doing wrong?

[digital-ether]

The new window must be interpreted as HTML. If you name the page with a php extension (.php) then the server should interpret it as HTML, and execute the JavaScript.

However, you can also send the content-type header.

header('Content-Type: text/html');

Is this the issue you're having?

[Altairzq]

Sorry just saw an error I had in my code! The example is indeed working from my website. I really hope you didn't see my unedited reply yet and spend any time on it!

[Altairzq]

The new window must be interpreted as HTML. If you name the page with a php extension (.php) then the server should interpret it as HTML, and execute the JavaScript.

However, you can also send the content-type header.

header('Content-Type: text/html');

Is this the issue you're having?

Yes this is exactly what was happening. I had this header:

header('Content-Type: text/plain; charset=UTF-8');

Changed to text/html and now I can call the JS function from everywhere in the script!

*takes off hat*
thankyou thankyou thankyou :)

[digital-ether]

:) You're welcome.