jlarysz

Note that the WordPress shortcode [wordpress_file_upload] creates a form.

The process is now a standard PHP form submission that is handled by a PHP function. All the data from all three forms is held in hidden fields and so is available to the PHP code. Checks are made yet again that all the files are where they should be and appropriate database records can be created.

That’s my solution in crude summary. It’s more complicated that I expected it to be, but the asynchronous AJAX threw me. The coders of wp-file-upload did a good job of providing facilities to manage file uploads, and once the issue of synchronicity was understood it wasn’t hard to work out.

• This reply was modified 8 years ago by jlarysz.

When the File 2 upload is done control again passes though filter wfu_after_upload_handler($changable_data, $additional_data); as for File 1, checks are made that all is well, then finally form 3 is triggered with:
$changable_data['js_script'] = "console.log('Icon file upload successful.'); var propForm = document.getElementById('rsi_add_media_form'); propForm.submit();";

Element ID ‘rsi_add_media_form’ is the ID I gave in my HTML code to the third form.

• This reply was modified 8 years ago by jlarysz.

wp-file-upload employs asynchronous AJAX methods, so there is no way outside of the wp-file-upload plugin to know when the upload has finished and whether it worked OK. Happily, the programmers gave us a WordPress filter that executes on comp;letion of the upload – function wfu_after_upload_handler($changable_data, $additional_data); even better, the prohrammers gave aus a way of executing a javaScript code sequence from the PHP code (I would LOVE to know how they did this!). My coding of this functions checks the status of the upload of file 1; all being well it then triggers upkload of file 2 with the code:
$changable_data['js_script'] = "console.log('PDF file upload successful.'); var elem = document.getElementById('upload_2');if (typeof elem.onclick == 'function') { elem.onclick.apply(elem); }";

“upload_2” is the name of the upload button for file 2 set by wp-file-upload. Note that the JavaScript defined in variable $changable_data[‘js_script’] must be all on one line with no carriage returns.

I am using the plugin wp-file-upload, and I have made the “Upload” button on the two wp-file-upload forms invisible with css “opacity:0”. Clicking the only visible submit button on the third form executes java script rsi_add_media_form_submit(). This script checks all the forms data, copies data from all three forms into hidden fields in form 3, then executes the first form, a wp-file-upload form, with the instruction

var elem = document.getElementById("upload_1");
	   if (typeof elem.onclick == "function") { elem.onclick.apply(elem);} 

“upload_1” is the id given to the upload button on form 1 by wp-file-upload.

This might take a while. There will be several replies in sequence.
To recap, the problem is to upload a pdf file and an associated icon file, plus a couple of attributes. It is important that the whole transaction fail if either file doesn’t go up.
Here is the basic ‘form’ – 3 forms altogether.

<div class="rsi_upload_title_row"><h3><span class="rsi_cell_title">PDF File</span> </h3></div>
   
      <div class="rsi_upload_cell"> <?php echo do_shortcode('[wordpress_file_upload uploadid=1 uploadpath="uploads/ASNYjournals"  uploadtitle="Locate Journal in PDF Format" uploadpatterns="*.pdf, *.PDF" userdata="true" userdatalabel="Media Date in YYY-MM-DD format|t:text|s:left|r:1|a:0|p:inline|d:/Media Title|t:text|s:left|r:1|a:0|p:right|d:" forcefilename="true"]' ); ?> </div>

      <div class="rsi_upload_title_row"><h3><span class="rsi_cell_title">Meridians Media Icon File</span> </h3></div>
   
      <div class="rsi_upload_cell"> <?php echo do_shortcode('[wordpress_file_upload uploadid=2 uploadpath="uploads/ASNYjournals"  uploadtitle="Locate Journal Icon in JPEG Format (200px width X 260px height)" uploadpatterns="*.jpg, *.jpeg, *.JPG, *.JPEG" forcefilename="true"] '); ?> </div>

   <form action="<?php admin_url( 'options-general.php?page=asny_media_management' )?>" method="post" id="rsi_add_media_form" onClick="rsi_add_media_form_submit(); return true;" onsubmit="this.submit; window.onbeforeunload = null; this.reset; return false;" enctype='multipart/form-data' ">  
      
     <input type="hidden" name="media_file_name" id="media_file_name_id" value="">
     <input type="hidden" name="media_icon_name" id="media_icon_name_id" value="">
     <input type="hidden" name="media_date" id="media_date_id" value="">
     <input type="hidden" name="media_title" id="media_title_id" value="">
     <input type="hidden" name="upload status" id="upload_status_id" value="1">
     <input type="hidden" name="upload_error_message" id="upload_error_message_id" value="">

      <div style="clear:both; width:20%; padding-top:4em;">
              <input type="submit" name="SubmitUpload"  id="SubmitUploadID" class="button-primary" value="Upload Media" /></div>
      
      </form>

Hi Nick:

Thanks for the hint. I did know this from your documentation and I made it all work. The first upload is submitted in JavaScript, and the second upload is submitted in your after-upload filter, which also submits the third and final form. All the tools were there to d the job; the requirements to tie two specific files together made it a little complicated.

• This reply was modified 8 years ago by jlarysz.

I’m still struggling; I think it’s ignorance. I have installed the filter mentioned above, but I can’t figure out how to get to the data in $changed_data returned by the filter.

The first wfu form is instantiated with this code:

<?php echo do_shortcode('[wordpress_file_upload uploadid=1 uploadpath="uploads/ASNYjournals" uploadtitle="Locate Journal in PDF Format" uploadpatterns="*.pdf, *.PDF" userdata="true" userdatalabel="Media Date in YYY-MM-DD format|t:text|s:left|r:1|a:0|p:inline|d:/Media Title|t:text|s:left|r:1|a:0|p:right|d:" ]'); ?>

The submit button set up by this code has id=upload_1, so the upload is triggered with this:

var elem = document.getElementById("upload_1");
	   if (typeof elem.onclick == "function") { ret = elem.onclick.apply(elem); console.log(ret);}

The return object “ret” does not exists, no matter what I try. This is driving me nuts!

• This reply was modified 8 years, 1 month ago by jlarysz.

I have worked around the problem by using user attributes in wfu form 1, leaving only the submit button in form 3. It’s good enough, but I would like to understand the problem better.

Thanks. I will try this.

OK, I cracked it. Random coding worked this time.

If I give the form no action at all, it returns to itself on Submit.

I figured it out just after posting this.

I had a validation callback specified in add_settings_field function call, but the callback function was just a stub with no return value. By removing this callback the code automatically adds a bypass in function sanitize_option for the option name.

It’s a little obscure and the huge volume of documentation and examples didn’t help – all I could do was walk the code.

Thanks for getting back to me.