Asynchronous File Uploads

[K. T. Walrus]

It would be a nice feature for users if IPB (and the Gallery and any other product that uploads files) supported showing a progress bar for file uploads using AJAX.

I found this solution on the web http://tomas.epineer.se/tesupload/ which shows a technique to do this. I've more than once wondered when uploading a big attachment over a slow internet connection whether it was working or not. This solution uses a small Perl script to check the current size of the uploading file in order to show the progress bar.

[bfarber]

Perl is disabled on our servers, and hundreds of others, thus this sort of feature we wouldn't build in. It would be a nice modification - but unfortunately lack of consistent support makes this impossible.

PHP just doesn't support access the raw post data to do this sort of thing.

I saw a similar script which uses just php, and reads the .tmp file in the /tmp directory to get the upload status - but again, lack of permission support would make it useless to probably 70% or more of our customers (those on shared hosting).

[K. T. Walrus]

That is a shame. Some sort of feedback that the upload is in progress would be nice. Maybe just some AJAX like the Quick Edit code does to display a fake progress bar? At least, users would be reminded that an upload is in progress even if it was a fake bar.

Maybe just make a fake progress bar in AJAX be shown on all posts (even those without attachments) when submitted would do as well.

Another idea is to do the upload onchange of the file selection box meaning the user would wait for the upload as soon as they selected a file to upload. This upload process could be done in AJAX with a fake progress bar and when completed, the AJAX could retrieve a thumbnail for the uploaded file and show that along with another file selection box and a remove button for the uploaded file.

Attachments already work kind of like this, but you have to click on the add button to upload the attachment (and the resulting form reload only shows the filename and not a thumbnail).

So, maybe I'll change my feature suggestion. You add AJAX support to the file upload forms (like attachments) that upload the file as soon as selected and gives feedback during and after the upload without having to submit the entire form. Although it would be nice, the actual percentage of the upload in progress isn't so important as to providing some kind of user feedback. In addition, you would still add a fake "posting in progress" AJAX bar on form submit to all posts.

[Matt]

IPB 2.2 has a "spinning wheel" and "Uploading..." message when a file is being uploaded.

[K. T. Walrus]

Good to hear that. Did you also rework the add attachments part of the post form to use AJAX to show the uploaded attachment without submitting the entire form?

As I said, I'd also like to see thumbnails shown (like the attachments are shown in the post) as soon as the attachment has been uploaded. This gives visual feedback that the correct image file has been selected before submitting the entire post. Also, the Preview button could be implemented using AJAX to make it nicer (by inserting the formatted preview post right below the Preview button including thumbnails for any attachments).

Anyway, I guess I'm just hoping that you are working on more AJAX in the interface to give IPB a more interactive feel.

[Matt]

You can't actually upload anything with AJAX as it doesn't support file attachments.

I have made the upload process appear seamless with some nifty JS and iframe work.

http://blog.mattmecham.com/blogimages/ipb22-uploads.mov

[bfarber]

You can't actually upload anything with AJAX as it doesn't support file attachments.

I have made the upload process appear seamless with some nifty JS and iframe work.

http://blog.mattmecham.com/blogimages/ipb22-uploads.mov

Yeah, presently there is no way to upload a file with AJAX I'm afraid.

I saw a rather interesting discussion on how this could theoretically be done using some sort of javascript functionality to read the contents of a file on the user's local computer and base64 encode them, or something like that, and then submit that to a server via POST - instead of the file being in the _FILES array it would be a post key, and the server would base64 decode it, and process it.

Problem is, javascript permissions on a computer can be configured, and most people that know what they are doing configure them low enough this likely wouldn't work. Plus, I wasn't able to get it to work, even in the demo I saw.

Maybe someday in the future something is done to allow this to happen - as long as it doesn't compromise computer security (allowing javascript access directly to files on a computer could be dangerous...)