Cant get it to work with Wordpress

[rsynnot]

Hi there

I have implemented this library correctly, and have files uploading well.

However, the XHR request is incompatible with Wordpress' "wp handle upload" function.

It needs the classic POST $_FILES['file'] array to work.

How can I 'turn off' the XHR capability so that all requests from Simple-Ajax-Uploader are fired as classic old school PHP Post requests?

Is this something I can configure in the init code, or in the browser before the init?

Any help would be greatly appreciated.

Thanks,

Rick

[2Fwebd]

Hi Rick,

Same issue here, I'm working on it since a few days. Idea would be to implement it in Wordpress (frontend), that'd be awesome !!

@rsynnot, how have you hooked the script to the Wordpress Ajax process ? Because I'm stuck on how we can make it communicate with the Ajax process from WP. As we need an "action" to hook the functions in the theme files...

Keep me updated, I'm really interested in that too!

Regards,

2F

[rsynnot]

Hi 2F

I haven't hooked it up as such, what I have is a custom members area that is in a subfolder of the main Wordpress install.

I bring in the WP blog header, but that's about it, I don't use the theme or wp_header / wp_footer etc.

The members area simply updates existing posts, allows members to add up to 9 photos.

Previously working with single files, but now I want to upgrade to include a progress bar and Ajax live updating.

I just wish I could 'disable' the XHR capability, or trick this plugin into ALWAYS thinking it's an older browser.

But that needs to happen in the first page load, it's not something that can be done in Uploader.php because the browser devices which method by which to send the file.

So to your point, I'm not using actions or hooks or anything in functions.php, it's a custom build.

Anyone!?!?

Cheers,

Rick

On Sunday, 20 September 2015, 2Fwebd notifications@github.com wrote:

Hi Rick,

Same issue here, I'm working on it since a few days. Idea would be to implement it in Wordpress (frontend), that'd be awesome !!

@rsynnot https://github.com/rsynnot, how have you hooked the script to the Wordpress Ajax process ? Because I'm stuck on how we can make it communicate with the Ajax process from WP. As we need an "action" to hook the functions in the theme files...

Keep me updated, I'm really interested in that too!

Regards,

2F

— Reply to this email directly or view it on GitHub https://github.com/LPology/Simple-Ajax-Uploader/issues/121#issuecomment-141768612 .

Best,

Ricky Synnot

m. 0439 791 209 w. itsricky.com

Read the disclaimer http://itsricky.com/email-disclaimer/ that governs

this email.

[2Fwebd]

Hi Rick,

I've made it works with Wordpress :

• icon to upload an image
• image is processing with the progress bar
• on success the file is uploaded in a custom sub directory in uploads/covers/
• all without reloading the page

I think, you're missing the :

multipart: true,

It's really important to get the file from _$FILES

In order to make it works with AJAX and Wordpress (for others with the same issues) :

url: '".get_site_url()."/wp-admin/admin-ajax.php',
data: {'action':'wofficeAjaxCoverUpload'},

The action data is used by our function in the theme/plugin files, so it's really important.

Let me know if you need more details, I can share my code.

Cheers,

2F

[LPology]

@rsynnot

Yes, @2Fwebd is correct, you need to set the multipart option to true.

[rsynnot]

Thanks guys, you're both right, that was the option I was looking for! @lpology I'm surprised this wasn't up on the read me, but I guess I went off your git read me rather than reading the full docs.

While that option does prevent the XHR transmit, I have actually got my integration working with Wordpress.

It took a while, but I have a great combination of functions which handle the upload.

Will post back here in a day or so once the update is ready :)

[2Fwebd]

Good job @rsynnot ! :)

@LPology, THANK YOU SO MUCH !! Your plugin is freaking awesome ! The options are perfect, we can use for everything. If anyone need something like that : https://vimeo.com/140111000 I'm ready to share the code behind ;)

[LPology]

@rsynnot Thanks for the update, glad it's working. I'm actually thinking about setting multipart: true as a default. I try to avoid making API changes as much as possible -- I think I've only ever made two to the plugin -- but this one might make sense.

@2Fwebd Thank you very much for the kind words. I'm glad you found it useful.

[rsynnot]

@LPology you could do that if you felt it best, but arent there advantages in using the HTML5 XHR protocol over traditional form submission?

It took me a while to understand how to integrate the code with wordpress, but essentially I found a way that handles things efficiently.

I basically use your code to 'get the image up into an uploads dir' as quickly as possible.

Then, before I 'return:true;', I call a bunch of wordpress functions to process the upload and insert it into the media library, then attach it to the post I am updating:

1. Firstly, let the '$this->save($this->savedFile)' run as normal.
2. Next, include Wordpress dependencies: require_once(ABSPATH . "wp-admin" . '/includes/image.php'); require_once(ABSPATH . "wp-admin" . '/includes/file.php'); require_once(ABSPATH . "wp-admin" . '/includes/media.php');
3. run wp_handle_sideload( $file, $overrides ); This function 'pretends' that the file is located on an external server, takes a full copy, and has authority to insert it into the WP uploads folder (your code does not).
4. Using that new file path, I run: wp_insert_attachment( $attachment, $filename ); This creates the post object in the media library and links up the new WP uploads folder.
5. I then run: wp_generate_attachment_metadata( $attach_id, $filename );
6. wp_update_attachment_metadata( $attach_id, $attach_data ); these make all the thumbnails and small sizes, titles and specs for the image in the WP database
7. Then I finally grab that attachment ID, and pop it into a custom field inside my post: update_field( $photo_keys[$i], $attach_id, $editMe );
8. After all that, I return:true;

So in effect, I've uploaded the file, then processed it as a wordpress sideload. Everything else after that concerns adding it into my media library.

Not sure why, but one of those functions above is deleting the original file your app is uploading, so Im cool with that! Saves me another step.

If you set multipart to true, I guess this code would only work one way. The Save function would only work on the $_FILES[] arrray.

Have you had a lot of feedback from people about the Multipart issue?

[LPology]

@rsynnot Yeah, people ask about it all the time. Especially people who don't use the included Uploader.php class, or who use server-side languages other than PHP.

Which is understandable, because in order to support IE9 and older, your server-side code needs to detect which method is being used and handle it accordingly. It's not really difficult, but it's sort of unexpected to some people.