Jump to content
update AG

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

Recommended Posts

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:

1299330364_Bildschirmfoto2019-05-21um08_31_16.png.8e2f994b17b1f5bf4a8901faa15b1c59.png

 

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

107999712_Bildschirmfoto2019-05-21um08_34_07.png.7f70b31885afc1ccaff5ffbe01ca2f1e.png

 

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):

1804010108_Bildschirmfoto2019-05-21um08_34_48.png.cd5729939e3b51c26465105a36e3aa3b.png

 

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:

431294481_Bildschirmfoto2019-05-21um08_38_38.png.708a99c2d2c638f8df236228380a3d27.png

When sending it removes the file:

1600844098_Bildschirmfoto2019-05-21um08_38_49.png.2625d38c68d03888e038d114cb30ec28.png

 

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:

756164358_Bildschirmfoto2019-05-21um08_42_26.thumb.png.58d32f27ab20df50e679e2a59db7f4a7.png

 

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.

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Robguy
      Hey guys,
      I'm really really desperate for help at this stage, for my own sanity mostly.
      I've been trying to set up a form that requires several fields one of which is a file upload, the user can upload max 10 files with extension jpg/png/jpeg and these are sent to the admin email as attachments.
      Currently this i am using the InputfieldFile module, I have moved it over to /site/modules because hooking the return html wasn't enough for my needs.
      So basically I have this.
      $images = $modules->get("InputfieldFileCustom"); $images->attr('label', "Upload your images"); $images->required = 0; $images->maxFiles = 10; $images->attr('id+images','image'); $images->attr('placeholder','no file selected'); $images->attr('extensions','jpg'); $form->append($images);   I expected output that would allow me to upload and delete files. Except right now my biggest issue is the fact that the remove button isn't being displayed because the ___renderItem method isn't being run and I have no idea how to make this work.   I'm going to have to do a lot of fun stuff with the markup for the majority of the render methods but I can't do anything until I get the remove button to display.   I also made a inputfieldfilecustom.js which is imported on the page.   I've renamed all instances of InputFieldFile to InputFIeldFileCustom (in both js and module)    Begging for help around now. it would be incredibly appreciated if someone can give me any direction.
×
×
  • Create New...