Jump to content

Desperate for help- File Upload in frontend Form


Robguy
 Share

Recommended Posts

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 by LostKobrakai
Added codeblock
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 ^_^

Link to comment
Share on other sites

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 ^_^

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by Robguy
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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);
  • Like 2
Link to comment
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
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By MarkE
      This fieldtype and inputfield bundle was built for storing measurement values within a field, rendering them in a variety of formats and converting them to other units or otherwise modifying them via the API.
      The API consists of a number of predefined functions, some of which include...
      render() for rendering the measurement object, valueAs() for converting the value to another unit value, convertTo() for converting the whole measurement object to different units, and add() and subtract() for creating a new measurement object from the sum or difference between two other objects. In the admin the inputfield includes a checkbox (which can be optionally disabled) for converting values on page save. For an example if a value was typed in as centimeters, the unit was changed to metres, and the page saved with this checkbox selected, said value would be automatically converted so that e.g. 170 cm becomes 1.7 m.
      A simple length field using Fieldtype Measurement and Inputfield Measurement.
      Combination units (e.g. feet and inches) are also supported.
      Please note that this module is 'proof of concept' at the moment - there are limited units available and quite a lot of code tidying to do. More units will be added shortly.
      See the GitHub at https://github.com/MetaTunes/FieldtypeMeasurement for full details and updates.
    • By tcnet
      File Manager for ProcessWire is a module to manager files and folders from the CMS backend. It supports creating, deleting, renaming, packing, unpacking, uploading, downloading and editing of files and folders. The integrated code editor ACE supports highlighting of all common programming languages.
      https://github.com/techcnet/ProcessFileManager

      Warning
      This module is probably the most powerful module. You might destroy your processwire installation if you don't exactly know what you doing. Be careful and use it at your own risk!
      ACE code editor
      This module uses ACE code editor available from: https://github.com/ajaxorg/ace

      Dragscroll
      This module uses the JavaScript dragscroll available from: http://github.com/asvd/dragscroll. Dragscroll adds the ability to drag the table horizontally with the mouse pointer.
      PHP File Manager
      This module uses a modified version of PHP File Manager available from: https://github.com/alexantr/filemanager
       
    • By tcnet
      This module implements the website live chat service from tawk.to. Actually the module doesn't have to do much. It just need to inserted a few lines of JavaScript just before the closing body tag </body> on each side. However, the module offers additional options to display the widget only on certain pages.
      Create an account
      Visit https://www.tawk.to and create an account. It's free! At some point you will reach a page where you can copy the required JavaScript-code.

      Open the module settings and paste the JavaScript-code into the field as shown below. Click "Submit" and that's all.

      Open the module settings
      The settings for this module are located int the menu Modules=>Configure=>LiveChatTawkTo.

       
    • By tcnet
      Session Viewer is a module for ProcessWire to list session files and display session data. This module is helpful to display the session data of a specific session or to kick out a logged in user by simply delete his session file. After installation the module is available in the Setup menu.

      The following conditions must be met for the module to work properly:
      Session files
      Session data must be stored in session files, which is the default way in ProcessWire. Sessions stored in the database are not supported by this module. The path to the directory where the session files are stored must be declared in the ProcessWire configuration which is by default: site/assets/sessions.
      Serialize handler
      In order to transform session data easier back to a PHP array, the session data is stored serialized. PHP offers a way to declare a custom serialize handler. This module supports only the default serialize handlers: php, php_binary and php_serialize. WDDX was dropped in PHP 7.4.0 and is therefore not supported by this module as well as any other custom serialize handler. Which serialize handler is actually used you can find out in the module configuration which is available under Modules=>Configure=>SessionViewer.

      Session data
      The session data can be displayed in two different ways. PHP's default output for arrays print_r() or by default for this module nice_r() offered on github: https://github.com/uuf6429/nice_r. There is a setting in the module configuration if someone prefers print_r(). Apart from the better handling and overview of the folded session data the output of nice_r() looks indeed nicer.

      Links
      ProcessWire module directory
      github.com
    • By Robin S
      Repeater Easy Sort
      Adds a compact "easy-sort" mode to Repeater and Repeater Matrix, making those fields easier to sort when there are a large number of items.
      The module also enhances Repeater Matrix by allowing a colour to be set for each matrix type. This colour is used in the item headers and in the "add new" links, to help visually distinguish different matrix types in the inputfield.
      Screencasts
      A Repeater field

      A Repeater Matrix field with custom header colours

      Easy-sort mode
      Each Repeater/Matrix item gets an double-arrow icon in the item header. Click this icon to enter easy-sort mode.
      While in easy-sort mode:
      The items will reduce in width so that more items can be shown on the screen at once. The minimum width is configurable in the field settings. Any items that were in an open state are collapsed, but when you exit easy-sort mode the previously open items will be reopened. You can drag an item left/right/up/down to sort it within the items. The item that you clicked the icon for is shown with a black background. This makes it easier to find the item you want to move in easy-sort mode. You can click an item header to open the item. An "Exit easy-sort mode" button appears at the bottom of the inputfield. Configuration
      In the field settings for Repeater and Repeater Matrix fields you can define a minimum width in pixels for items in easy-sort mode. While in easy-sort mode the items will be sized to neatly fill the available width on any screen size but will never be narrower than the width you set here.
      In the field settings for Repeater Matrix you can define a custom header colour for each matrix type using an HTML "color" type input. The default colour for this type of input is black, so when black is selected in the input it means that no custom colour will be applied to the header.
      Exclusions
      The easy-sort mode is only possible on Repeater/Matrix fields that do not use the "item depth" option.
       
      https://github.com/Toutouwai/RepeaterEasySort
      https://processwire.com/modules/repeater-easy-sort/
×
×
  • Create New...