InputfieldFile in Frontend use (injecting in a custom processed Formbuilder Form)

[update AG]

Hi Guys

I have an Formbuilder Form which I am rendering on the frontend and also processing myself (I have checked the option "Submit to another URL (bypassing Form Builder processing)".

I am also injecting a InputfieldFile Field "manually" with the form api to the fieldset object. The code looks like this:

<?php namespace ProcessWire;

$form = $forms->load("schaden-melden");

$inputfieldsform = $form->processor()->getInputfieldsForm();

$fieldsetSachverhalt = $inputfieldsform->find("name=sachverhalt");

$tempDir = wire()->files->tempDir('userUploads')->get();

$field = $modules->get("InputfieldFile");
$field->label = "Dateien hochladen";
$field->notes = "Maximal 10 Dateien, maximal 20 MB";
$field->required = 1;
$field->attr("name+id", 'dateien');
$field->noCollapseItem = 1;
$field->destinationPath = $tempDir;
$field->extensions = "jpg jpeg gif png tif pdf";
$field->maxFiles = 10;
$field->maxFilesize = 20*1024*1024; // 20mb

foreach($fieldsetSachverhalt as $f) {
    $f->append($field);
}

$formFormBuilder = $forms->render($form);

if($form->processor()->isSubmitted()){
    $values = $form->processor()->getValues();

	if($values['s_email'] == ""){

        $p = new Page();
        $p->template = 'damage-report-data';
        $p->parent = $pages->get(1159);
        $p->name = session_id()."_".date("d-m-Y-H-i-s");
        $p->sessionid = session_id();

        $p->pd_anrede = $sanitizer->text($values['anrede']);
        $p->pd_vorname = $sanitizer->text($values['vorname']);
        $p->pd_nachname = $sanitizer->text($values['nachname']);
        $p->pd_strasse = $sanitizer->text($values['strasse']);
        $p->pd_hausnummer = $sanitizer->text($values['hausnummer']);
        $p->pd_plz = $sanitizer->int($values['plz']);
        $p->pd_ort = $sanitizer->text($values['ort']);
        $p->pd_telefon = $sanitizer->text($values['telefon']);
        $p->pd_policenummer = $sanitizer->text($values['policen_nr']);
        $p->pd_email = $sanitizer->email($values['e_mail']);
        $p->pd_eintrittsdatum = $sanitizer->text($values['eintrittsdatum_beginn_der_streitigkeit']);
        $p->pd_sachverhalt = $sanitizer->textarea($values['schadenmeldung_sachverhalt']);
        $p->pd_gegenpartei_adresse = $sanitizer->textarea($values['informationen_name_adresse_tel_etc']);
        $p->pd_reachable = $sanitizer->textarea($values['am_besten_erreichbar']);
        $p->contract_accepted = 1;
        $p->save();

        $files = explode("|",$values['dateien']);
        foreach($files as $file){
            if($file && file_exists($tempDir . $file)){
                $currentSessionData->pd_files->add($tempDir . $file);
            }
        }
        $p->save();

        session_regenerate_id();
        
        $session->redirect($page->child("template=basic-page")->url);

	}else{
        $out .= "Thank you, your form has been submitted.";
		$log->save("spams", json_encode(print_r($values, true)));
    }
    
} else {
    $section = new \Sections($page);
    $section->injectForm($formFormBuilder);
    $out .= $section->renderSections();
}

The Form itself is working and the files are also added to the pages I am creating. But the file field is not really user friendly at the moment.

For example:

1. There is no option to delete the files when you have selected them from the disk:

 

2. When I select multiple files at once it only shows the first filename:

 

3. Lets say I send the form now and there are still errors in some other fields.
The File Field is the rendered like in the processwire backend and the images are also lost (the files are linking to the page where the form/code itself is residing):

 

4. The valid extension property of the InputfieldFile is only working server side (means when form is send the files with the wrong filetype are just removed, but on the client side you can still upload for exmaple .doc files etc...

When uploading file with false type nothing happens:

When sending it removes the file:

 

How can I adjust the File Field, that I can make the stuff above working just to my needs? I already needed to duplicate the InputfieldFile Module to the site folder because of some js error I was getting.
I needed to make a change inside the InputfieldFile.js:

 

I also must say that I don't know if the change above is also affecting the processwire backend in some way...

I hope you can help me here out.

 

PS: I know that the Formbuilder has it's own File Fieldtype but that File Fieldtype only works when the processing of the form is handled by the Formbuilder.