How can InputfieldImage be used in an admin module with an existing field of an existing page?

[rastographics]

I create a simple Process module that retrieves specific pages and displays them one at a time on an "Edit" page.

The edit page contains a form like so:

    $form = modules()->get('InputfieldForm');

	$form->add($myPageToEdit->getInputfield('my_image_field')

	$form->add($aRelatedPage->getInputfield('my_text_field')

I also add a submit button and some other fields for editing that are not relevant.

`my_image_field` is an image field.

 

When this custom edit page is displayed (in the admin, a url like examplesite.com/admin/my-module/edit?id=2494), the form shows up fine. If the image field is populated, then the existing image displays correctly. Using the form to edit the text fields (or even repeater fields) works great. 

But the image field on this custom module has broken behavior.

First of all the Ajax Upload functionality is disabled. I figured out it is because of this code in InputfieldImage.js:

	/**
	 * Whether or not AJAX drag/drop upload is allowed?
	 * 
	 * @returns bool
	 */
	function useAjaxUpload() {
		var isFileReaderSupport = window.File && window.FileList && window.FileReader;
		var isAjaxUpload = $('.InputfieldAllowAjaxUpload').length > 0;
		var isPageIDIndicator = $("#PageIDIndicator").length > 0;   //THIS ELEMENT DOES NOT EXIST ON MY MODULE'S PAGE SO AJAX UPLOAD GETS DISABLED??!
		return (isFileReaderSupport && (isPageIDIndicator || isAjaxUpload));
	}

Because it is looking for #PageIDIndicator, which doesn't exist, then ajax gets disabled? So I have to work around by adding that element to my page like we find in ProcessPageEdit.module (Line 640)

$out .= "<div id='PageIDIndicator' class=''>{$this->page->id}</div>";

So on my module I add <div id='PageIDIndicator'>3423</div> where 3423 equals the page id. 

NOW Ajax Upload is enabled. But it is very broken. Because the functionality to process the ajax upload is in ProcessPageEdit only, and it is expecting a JSON response...but the form needs to postback to my custom module edit page, which doesn't know how to respond to AJAX and specifically process the InputfieldImage upload.

 

So it seems like the AJAX upload functionality is baked into ProcessPageEdit, and so the InputImageField was not designed to be used anywhere in the admin except on ProcessPageEdit?

Something tells me there has to be a way to configure the InputImageField in my form to work in a custom module for Ajax uploads?

 

By the way, Non-ajax uploads work with no problem from my custom module. But they are very unintuitive and limited to one photo at a time. Deletes also work. 

[rastographics]

Solved w/ Hacky Workaround:

By adding a line of code to InputfieldImage.js, I'm able to now specify a url to POST to when using AJAX upload for InputfieldImage.

//LINE 1635 of InputfieldImage.js
function initHTML5Item($this, i) {
  			//THIS CODE IS UNMODIFIED >>>
			var $form = $this.parents('form');
			var $repeaterItem = $this.closest('.InputfieldRepeaterItem');
			var postUrl = $repeaterItem.length ? $repeaterItem.attr('data-editUrl') : $form.attr('action');
			// <<<<<< THIS CODE IS UNMODIFIED
			
  /* 
			To get InputfieldImage to work on a page besides the ProcessEditPage
			We need to change the POST url for ajax uploading of images, to point to the EditUrl of the page that contains the image field.
			We can set the custom action url on the form html element. 
			But we need to grab that value here if it exists.
			*/

  			//THIS LINE WAS ADDED BY JOEL TO MAKE INPUTFIELDIMAGE WORK ON OTHER PAGES....
			if($form.attr("ajax_action")) postUrl = $form.attr("ajax_action");
  
  			//THIS CODE IS UNMODIFIED >>>
			postUrl += (postUrl.indexOf('?') > -1 ? '&' : '?') + 'InputfieldFileAjax=1';

 

And in my custom admin module, I add this attribute to the form that contains the image field...

    /* AJAX Image uploads. Set a custom ajax POST url here that will be used in the core InputfieldImage.js file to have the correct upload url for ajax images on the InputfieldImages.  */
    $form->attr("ajax_action",$mypage->editUrl);

 

Now it works flawlessly! 

(Don't forget to add "<div style='display:none' id='PageIDIndicator'>$mypage->id</div>" someone on the page too! as mentioned in previous post)