Ad:

JavaScript / DHTML / AJAX Discussion Thread
Marked Solved
Views: 1972

Page 1
2
Next

You are currently viewing page 1 of this multi-page discussion thread

Sep 17th, 2009

-1

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

Expand Post »

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/programmin...ile_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.

Last edited by Altairzq; Sep 17th, 2009 at 9:12 am.

Similar Threads

A little help with Help with ajax/php in JavaScript / DHTML / AJAX
how to upload images to mysql with a foreign key using php in PHP
File Upload Variables in PHP

Altairzq

Reputation Points: 10

Solved Threads: 0

Junior Poster in Training

Offline

52 posts
since Aug 2009

Permalink

Sep 18th, 2009

Re: How to synchronize a file upload with an insert in MySQL through Javascript-AJAX-

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.

Quote ...

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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
// inside iframe
window.parent.document.write('hi');
// 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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
// inside iframe
window.parent.uploadDone(true);
// 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:

php Syntax (Toggle Plain Text)

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

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

digital-ether

Moderator

Reputation Points: 457

Solved Threads: 101

Nearly a Posting Virtuoso

Offline

1,250 posts
since Sep 2005

Permalink

Sep 18th, 2009

Re: How to synchronize a file upload with an insert in MySQL through Javascript-AJAX-

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

eg:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
function uploadDone(status) {
 
if (status) alert('upload complete');
else alert('upload error');
 
}
function uploadDone(status) {

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

}

digital-ether

Moderator

Reputation Points: 457

Solved Threads: 101

Nearly a Posting Virtuoso

Offline

1,250 posts
since Sep 2005

Permalink

Sep 19th, 2009

Re: How to synchronize a file upload with an insert in MySQL through Javascript-AJAX-

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

Reputation Points: 10

Solved Threads: 0

Junior Poster in Training

Offline

52 posts
since Aug 2009

Permalink

Sep 24th, 2009

Re: How to synchronize a file upload with an insert in MySQL through Javascript-AJAX-

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?

Altairzq

Reputation Points: 10

Solved Threads: 0

Junior Poster in Training

Offline

52 posts
since Aug 2009

Permalink

Sep 25th, 2009

Re: How to synchronize a file upload with an insert in MySQL through Javascript-AJAX-

Click to Expand / Collapse Quote originally posted by 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?

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

Moderator

Reputation Points: 457

Solved Threads: 101

Nearly a Posting Virtuoso

Offline

1,250 posts
since Sep 2005

Permalink

Sep 25th, 2009

Re: How to synchronize a file upload with an insert in MySQL through Javascript-AJAX-

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/

digital-ether

Moderator

Reputation Points: 457

Solved Threads: 101

Nearly a Posting Virtuoso

Offline

1,250 posts
since Sep 2005

Permalink

Sep 28th, 2009

Re: How to synchronize a file upload with an insert in MySQL through Javascript-AJAX-

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

Reputation Points: 10

Solved Threads: 0

Junior Poster in Training

Offline

52 posts
since Aug 2009

Permalink

Sep 30th, 2009

Re: How to synchronize a file upload with an insert in MySQL through Javascript-AJAX-

Click to Expand / Collapse Quote originally posted by digital-ether ...

So when your PHP page finishes writing the upload file, you could send back a page with the JS:
php Syntax (Toggle Plain Text)
echo '<script>window.parent.uploadDone(true);</script>';
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?

Altairzq

Reputation Points: 10

Solved Threads: 0

Junior Poster in Training

Offline

52 posts
since Aug 2009

Permalink

Sep 30th, 2009

Re: How to synchronize a file upload with an insert in MySQL through Javascript-AJAX-

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.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
header('Content-Type: text/html');
header('Content-Type: text/html');

Is this the issue you're having?

digital-ether

Moderator

Reputation Points: 457

Solved Threads: 101

Nearly a Posting Virtuoso

Offline

1,250 posts
since Sep 2005

Page 1
2
Next

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Hiding a div if a variable is empty

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Change the name of a file getting downloaded

DaniWeb Message

Cancel Changes

User Name
Password