2 Instances on 1 page

Hi, if you have two instances on the same page, they need to have different uploadid parameter. You can set the first to be 1 and the second to be 2 using the visual editor of the plugin.

Regards

Nickolas

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.

so now it works?

Thanks. Could you please give me an example? Sorry this is all new to me.

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>

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.

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.

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.

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.

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

Thanks for the info guys. Much appreciated. All working now.