Fix for AJAX loaded file upload fields in process modules

[BernhardBaumrock]

Short description of the issue

When using AJAX collapsed file upload fields in a process module they will be initialized with the InitHTML5() method and therefore selected files will be instantly uploaded. The upload will fail because the field is intended to work only for connected pages (and the process module has no page connected).

Expected behavior

The field should work just like a non-ajax file field works: Select a file, do NOT upload the file instantly and wait for the upload until the form is submitted, so the upload can be processed via WireUpload afterwards.

Actual behavior

Selected files are instantly uploaded and fail.

Optional: Screenshots/Links that demonstrate the issue

Please see a screencast and screenshots here: https://processwire.com/talk/topic/21602-solved-help-with-ajax-loaded-inputfieldfile-in-processmodule/

Optional: Suggestion for a possible fix

Add a check on top of InitHTML5 to prevent the HTML5 init:

	function InitHTML5($inputfield) {
		// early exit when page was already initialized oldschool
		// this happens when file upload fields are collapsedYesAjax
		if($("body").hasClass("ie-no-drop")) return;

Steps to reproduce the issue

Create a processmodule and see the effect:

public function executeDemo() {
    $form = $this->modules->get('InputfieldForm'); /** @var InputfieldForm $form */
    $tmpDir = $this->files->tempDir('upload_csv');

    $f = $this->modules->get('InputfieldFile');
    $f->attr('id+name', 'upload_csv');
    $f->extensions = 'csv';
    $f->maxFiles = 1; 
    $f->descriptionRows = 0;
    $f->overwrite = true;
    $f->label = 'Upload CSV yyy';
    $f->icon = 'download';
    $f->destinationPath = $tmpDir;
    $f->collapsed = Inputfield::collapsedYesAjax;
    $form->add($f);

    return $form->render();
}

[ryancramerdesign]

@BernhardBaumrock I have a few Process modules that use InputfieldFile, but have not observed the issue here. See ProcessDatabaseBackups as an example. What seems different in your case is that you are ajax loading the Inputfield using that collapsedYesAjax state. The thing is, that's intended for the page editor only, so I'm surprised it would work outside of it. The simplest solution would be just not to use it, as it really wasn't intended for this use case and is a surprise it even works. But if you need it for some reason and find it is otherwise working, you can do a $f->noAjax = true; to tell the InputfieldFile not to allow the ajax upload option.

[BernhardBaumrock]

Thx Ryan, I'm developing a module for the community where this functionality would be needed. I'm loading several grid actions in a fieldset that is ajax collapsed for performance (and because the screen flickers when it is not ajax collapsed because it loads all inputfields at first and THEN hides them): See the screencast here to get an impression: https://processwire.com/talk/topic/19539-rockgrid-powerful-performant-and-beautiful-data-listing-tool/?do=findComment&comment=185786

Even if it was not meant to work - what would be bad in making it work with ajax loaded inputfields? I think that uploading files to custom directories should also be done via PW itself and not via any hacky php implementations.

[ryancramerdesign]

The ajax-loaded collapsed states were intended for the page editor, and that's where some supporting code is also located, so I really can't speak to much for use cases outside of that. But if you find it still works for your case, that's great, but you may have to code around it to some extent. In the case of the file Inputfield, at minimum you'll definitely need to use that $f->noAjax option I mentioned earlier. If you want to upload files to custom directories, then no "hacky" things are necessary, you just need to tell the Inputfield what custom directory you want to upload to by setting the $f->destinationPath for the files.

[matjazpotocnik]

@BernhardBaumrock how do you find Ryan's answer? Can we close this issue? BTW, video on the forum is not available any more.

[BernhardBaumrock]

Thx @matjazpotocnik I've not had that issue any more since 2019 so I'll close it.