Desperate for help- File Upload in frontend Form

[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.

Edited October 30, 2015 by LostKobrakai
Added codeblock

[kongondo]

Hi Robguy,

Welcome to PW and the forums...

Although you could make it work in the frontend, a core module like that is really meant for the backend, where all their dependencies are present. I would suggest you use your own HTML form for uploads but make use of ProcessWire API to validate and sanitize uploads + use CSRF. Here's an excellent thread to show you how:

https://processwire.com/talk/topic/3105-create-pages-with-file-upload-field-via-api/

Adapt the code to suit your needs. What you are after is really the bit about wireUpload class...

[Robguy]

Hi Kongo,

Thanks for the response. 

I didn't actually realise that this wasn't the purpose of the module. Surprisingly that is a huge relief for me.

I hugely appreciate the response, I looked at that post previously but was a bit confused.

If I figure it out and fix it up i'll post my results over here

[pwFoo]

Hi Robguy,

do you try to save it as PW page? Upload images with InputfieldFile / InputfieldImage needs a saved page to work.

Maybe FormHelper module works for you? It pre-save a new page before the image is uploaded.

[Robguy]

Damn pwFoo this looks amazing.

I don't know how I didn't find this because I've been looking for this type of module for 3 days now.

I'm going to try it out, the most important thing for me is to be able to customize output markup and add/remove files which are then submitted as attachments via email.

Will definitely keep in touch, seems easy to use so I hope I won't have too many problems

[pwFoo]

If you find any bugs just report it here in the forum.

https://processwire.com/talk/topic/7860-module-formhelper/

[diogo]

I'm going to try it out, the most important thing for me is to be able to customize output markup and add/remove files which are then submitted as attachments via email.

Via email? Have you seen this? http://modules.processwire.com/modules/process-email-to-page/

[Robguy]

Hi Diogo,

I'm not sure but I don't think that module suits what I need to do.

What I'm (still) (frustratingly) trying to build is a form which let's a user submit a 'story'. So there is a textfield that contains the users text and an image upload button which allows the user to upload images.

The images are then sent to [admistrator]@[domain].com as attachments and the 'story' as plain text.

These are the two relevant components. The form is super lengthy and everything works 100% except I can't get the uploading/email combo to work.

I've gone through all previous links posted here and still can't make sense of it. Note that I am quite a rookie in the whole pw/php field.

At the moment I've come to the ends of my sanity and will remove fields using custom js (another thing I couldn't get right with the other links), do the same thing for adding fields.

I'm also just going to use InputfieldFile to render the fun stuff then use some of the code over at https://processwire.com/talk/topic/3105-create-pages-with-file-upload-field-via-api to TRY and upload the images.

The whole creating/deleting a page still seriously confuses me but I need this to work within the next 2 hours so I kind of just have to make it work.

I would still appreciate any help because I'm deeply confused with a lot of stuff that has been posted.

[diogo]

I'm still not completely sure of what you're trying to do, can you please post here a step-by-step description of the whole process? For what I'm understanding now, you don't even need pages at all, only to send the email. If I'm understanding well, you don't even need to use the processwire resources for this, just build the HTML form, collect everything with PHP and send the email.

Have a look here https://gist.github.com/webrf/ae5ebceade909fc760d0

Hope it helps

[Robguy]

Hi Diogo,

Thanks for being willing to help me man <3

Here we go....

*after writing this out I realised how basic this might be.... anyway

This is purely a form that is filled out by the user and then all the information is emailed through to a preset adminstration email address.

The form has required fields and some js word limits.

And then there is a file upload input where the user can upload images and these images are attached to the email sent to the administrator.

The reason I'm afraid of moving away from PW Modules is because I use the InputfieldForm as follows...

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

$form->processInput($input->post)

$form->getErrors()

$form->render();

The biggest one there is form->render because it keeps it maintainable, currently there are 16 fields of which 15 are required (images are not a required field).

So if there is any possibility for using the inputfieldform without the inputfieldfile breaking everything I would dig that. 

It would be great if I could just append markup onto the $form but ->append() requires a inputfield type module..

Again I can't stress enough how much i appreciate the help.

Gist: https://gist.github.com/robguy21/9947eb05378a83946e85

The view just echos $form

If you want me to cut down the controller to just the necessary bits I can do so, wasn't sure if I should give the full picture of just the smaller bits.

Edited October 30, 2015 by Robguy

[Martijn Geerts]

Without looking much into this I do think the file input expect there to be a Page with a folder to store that image. 

[pwFoo]

Yes, one of the problems to ship around with the FormHelper module

Added a hidden admin page as "file storage" and a page pre-save.

[Robguy]

Without looking much into this I do think the file input expect there to be a Page with a folder to store that image. 

I doubt that as the majority of references i've been looking at don't send a $page through simply instantiates it as a variable $field 

Unless I misunderstood where you meant the expectation comes into play?

Reference: https://gist.github.com/jacmaes/6691946 (assuming jac knows what he's doing)

pwFoo I tried that formhelper but couldn't get it to display at all. Not sure why or what ended up happening today has been a blur of trying a thousand different ways to attempt to upload an image (nevermind that the other problem is I need to let the user remove images before the submit as well...)

Also, I don't know why but it doesn't look like the module is reacting the right way. There are methods there such as ___renderList and ___renderItem that are being ignored because the value of ($this->value) passed to ___render()  seems to not be anything so the other two render methods don't do anything and you're left with just a ___renderUpload() method.

[Martijn Geerts]

He's using a page

https://gist.github.com/jacmaes/6691946#file-form-php-L74

And it is saving the page (that creates folder) then adds the image and saves again.

https://gist.github.com/jacmaes/6691946#file-form-php-L91

[Robguy]

Thank you Martijn for the help.
 
I've got it working!!! Woop. Did end up creating a page as in my opinion the client will be able to manage the content a lot easier.
 
I'll post the full solution once I solve the final problem...
 
This sounds extremely trivial but- the delete button isn't rendering at all. No idea why since I am using the core module.
 
If anyone can suggest why that would be great.
 
This is how I'm calling it, I am also including the JS file (inputfieldfile.js) on the page.

    $form_images = $modules->get("InputfieldFile");
		$form_images->label = "Images";
		$form_images->description = "Upload your images maximal 3 files.";
		$form_images->required = 0;
		$form_images->attr("name+id",'images');
		$form_images->destinationPath = $upload_path;
		$form_images->extensions = "jpg jpeg gif png";
		$form_images->maxFiles = 10;
		$form_images->maxFilesize = 2;
    $form->append($form_images);