Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

AJAX image upload plugin WordPress

Hi,
I have a very crude plugin with an image uploader in it here:
http://demo.pixopoint.com/static/ajax-image-upload.zip

It adds an admin page which allows the user to upload images into a specific folder in the uploads directory.


<strong>I would like a version which does the upload process in a far more elegant manner, via AJAX</strong>. I've prepared a demo video showing how the Nivo Slider plugin does the effect I'm looking for:
http://www.youtube.com/watch?v=PVH8dqnbrfo


EDIT: Utilizing a similar method to wp-admin/media-new.php page would be ideal. The only difference required is that it needs to upload to a specific folder. It also needs to work on the front-end of the site too (albeit I didn't mention that in the original question, oops).


Feel free to modify the existing plugin or just scrap it and write something from scratch if that's easier. Just so long as it uses the regular WordPress API's and is secure.




Background info:
The code for this will later be incorporated into a larger, more extensive plugin, but I've extrapolated out the uploader bits to make it a easier to work with.

Answers (2)

2011-09-02

Gabriel Reguly answers:

Hi Ryan,

Why not use the native WordPress option?

Regards,
Gabriel


Ryan Hellyer comments:

What native WordPress option?


Gabriel Reguly comments:

Well, the one for uploading thumbnails, for instance.

That only requires a link like this:

<a id="upload-link" class="thickbox" href="http://example/wp-admin/media-upload.php?type=image&TB_iframe=1&width=768">Upload image</a>

Regards,
Gabriel


Ryan Hellyer comments:

Oh, you mean like on the wp-admin/media-new.php page.

Actually, that would be a very sensible way to do it.

If you are able to replicate that, but have the images only upload into a specific directory (not following the uploads folder settings in WP) that would be perfect. I'll change the question to suggest that.


Gabriel Reguly comments:

Ok, I am on it.

Please bear with me ;-)


Ryan Hellyer comments:

I had replied before I'd seen your response.

The uploader at the URL you suggested only uploads to the folder set within the WP setttings. Whereas I need the images to upload into a very specific folder. I also need to do it within the page and not via a lightbox.


Ryan Hellyer comments:

Awesome. If you can make it work on the front-end, that would be really handy too. Although if necessary I can make another question relating to getting it working on the front-end if I need to since I forgot to mention that originally.


Gabriel Reguly comments:

Sure, I understand what you mean.

It uses thickbox (similar to lightbox) but you want it to be done like shown in the video.

Let me propose you this, can I code it for both back-end and front-end using the thickbox and then you ask another question for getting it done without the thickbox?

How does it sound to you?




Ryan Hellyer comments:

If you think it will work without the thickbox, then sure, that sounds perfect :)


Ryan Hellyer comments:

In case that was ambiguous ... I meant if you think you can answer a question about how to remove the thickbox then that sounds perfect.

But I do need it to be done minus the thickbox unfortunately. i have a very specific use case for this functionality.


Gabriel Reguly comments:

Ok, but sorry I do not have the time to make it without the thickbox.

Anyway Utkarsh Kukreti surely can do it for you, he is very competent.

Follows some code to speed up his answer:


add_filter( 'upload_dir', 'my_custom_upload_dir' );

function my_custom_upload_dir( $default_dir ){
/*
* On success, the returned array will have many indices:
* 'path' - base directory and sub directory or full path to upload directory.
* 'url' - base url and sub directory or absolute URL to upload directory.
* 'subdir' - sub directory if uploads use year/month folders option is on.
* 'basedir' - path without subdir.
* 'baseurl' - URL path without subdir.
* 'error' - set to false.
*/

// Adjust your settings here
$dir = '';
$url = '';
$subdir = '';
$bdir = '';
$burl = '';

$custom_dir = array(
'path' => $dir,
'url' => $url,
'subdir' => $subdir,
'basedir' => $bdir,
'baseurl' => $burl );
return shortcode_atts( $custom_dir, $default_dir );
}




Gabriel Reguly comments:

Hmm, just contacted Utkarsh and he told me that he also does not have the time right now.

Can you wait for next week? Then surely I can code a solution just like you want.



Ryan Hellyer comments:

I was intending to have this sorted earlier, but I can wait a week if necessary. Best to get it done right rather than me hacking some frankencode solution into place :)


Gabriel Reguly comments:

Ok, thanks.


Gabriel Reguly comments:

Hi Ryan,

Sent you a PM.

Regards,
Gabriel

2011-09-02

Utkarsh Kukreti answers:

Which Nivo Slider plugin is this?


Ryan Hellyer comments:

The paid WordPress plugin here ... http://nivo.dev7studios.com/pricing/