AJAX image uploader WordPress

Romel Apuya answers:

i think there is a tutorial about that..

[[LINK href="http://goldenapplesdesign.com/2010/07/03/front-end-file-uploads-in-wordpress/"]]http://goldenapplesdesign.com/2010/07/03/front-end-file-uploads-in-wordpress/[[/LINK]]

Ryan Hellyer comments:

No. That's just a regular upload form for WordPress. I can already do that. It's the AJAX side of things I can't do.

Peter Michael answers:

Check out [[LINK href="http://www.uploadify.com/"]]Uploadify[[/LINK]]

Ryan Hellyer comments:

That has a bunch of Flash stuff in it. I'm just wanting a simple raw jQuery/AJAX solution. Nothing fancy, just the nuts and bolts.

John Cotton answers:

Hi Ryan

Presumably you appreciate that it's not possible to upload a file via AJAX? Ajax is text based and so - unless you UUencoded the file at the client end - you can't send the bits!

So "ajax file uploaders" split into two camps:

1/ Flash based ones (much better looking and working IMHO) but clearly the downside of having Flash on the page. The one Peter mentions is by far the best and I've used it several times on WP projects. However, WP is distributed with SWFUpload which is pretty good too.

2/ jQuery/Script ones which create an iFrame which contain a form that POSTs the image. [[LINK href="http://plugins.jquery.com/project/iframe-post-form"]]This link[[/LINK]] shows you a jQuery plugin that fits that mould, but there are others.

My advice? If you (/your client) wants a wholly WordPress solution, go with SWFUpload or, if you're happy with Flash, go with Uploadify (remember, even WordPress uses Flash by default to upload). My 3rd choice would be the scripted version, but that probably comes from an aversion to frames from too long ago :)

JC

Ryan Hellyer comments:

JS file uploader I guess is the term I should have used.

I assumed this sort of thing was straight forward, but have just been chatting with Dion Hulse who has been explaining how what I want isn't really possible. Damn.

Guess I'm stuck doing some horridly overly complex system.

John Cotton comments:

"AJAX" uploads can be like a swan - graceful on the surface but energetic underneath.

Sure, the script based ones do ugly things to make the process work, but does your user care? Probably not.

[[LINK href="http://www.jainaewen.com/files/javascript/jquery/iframe-post-form.html"]]That jQuery one[[/LINK]] I linked to works well and is nicely made; your own code needn't be messy in order to incorporate it.

Jeremy Herve answers:

Since you are looking for a simple solution, I am going to propose something that is already implemented in another theme, with a full WordPress method.

The P2 theme includes a frontend editor, in which the media upload buttons are included. Of course, these buttons are shown only to users who are allowed to upload files in WordPress (contributors and the roles above), but that's just an if to remove.

Here is the function (from the [[LINK href="http://themes.svn.wordpress.org/p2/1.3.2/inc/template-tags.php"]]P2 theme SVN[[/LINK]]):


<?php
function p2_media_buttons() {
// If we're using http and the admin is forced to https, bail.
if ( ! is_ssl() && ( force_ssl_admin() || get_user_option( 'use_ssl' ) ) ) {
return;
}

include_once( ABSPATH . '/wp-admin/includes/media.php' );
ob_start();
do_action( 'media_buttons' );

// Replace any relative paths to media-upload.php
echo preg_replace( '/([\'"])media-upload.php/', '${1}' . admin_url( 'media-upload.php' ), ob_get_clean() );
}
?>


And then integrating the buttons themeselves:


<?php if ( current_user_can( 'upload_files' ) ): ?>
<div id="media-buttons" class="hide-if-no-js">
<?php p2_media_buttons(); ?>
</div>
<?php endif; ?>


If you remove the if, the buttons should appear to everyone, shouldn't they? Would that solve your trick?

That might not be what you are looking for, but if that can help...

Otto answers:

Uploading a file via JS only can be done, but it's slightly complicated and subject to browser compatibility problems.

Basically, you can use a FileReader to read a file in via JS: [[LINK href="https://developer.mozilla.org/en/DOM/FileReader"]]https://developer.mozilla.org/en/DOM/FileReader[[/LINK]]

You can use a FormData object to serialize a file and send it via XML: [[LINK href="https://developer.mozilla.org/en/XMLHttpRequest/FormData"]]https://developer.mozilla.org/en/XMLHttpRequest/FormData[[/LINK]]

There is an example of doing a file upload using AJAX here (near the bottom of the page): [[LINK href="https://developer.mozilla.org/en/Using_files_from_web_applications"]]https://developer.mozilla.org/en/Using_files_from_web_applications[[/LINK]]

Cosmin Popovici answers:

Ok, so...

I'm working on a project that required just this.

I've created a ZIP file for you, with page-upload.php and upload-image.php.
[[LINK href="http://dl.dropbox.com/u/5196984/wpanswers-upload-image.zip"]]Download here[[/LINK]].

<strong>WHAT IT DOES:</strong>

Uses Valum's jQuery Upload to upload the file with PHP and jQuery.
It validates file size and type.
It sends an AJAX request to a PHP file. That PHP uses WP functions to determine the current month's upload path, then validates on server-side the file size, then uploads with unique filename (prefix snp_).
Then it returns a JSON response to your page, and you can show the user the file they just uploaded (no refresh) or return errors if, for ex., file was too big.

Open the archive, read the instructions, make a page template out of page-upload.php (or use the code from it where you need), but make sure both files are in the same folder as your index.php (of course you can alter that structure, but first make sure it works ;) )

Now, as I cannot publicly disclose the link to the stage version of my project, please <strong>send me a message if you would like to see it in action</strong>.

Hope this helps :)