Journal 5

Creating and editing a file upload form.

The next step was being able to create a plugin that allowed for file submission. It took a while to find a plugin that was open sourced and free to use. I ended up choosing a plugin called ‘Frontend Loader’  this file was available in its full PHP version and also provided WordPress short-code.

The most simple version of short-code was: -fu-upload-form- this created a really basic form on the website however had some flaws in functionality, such as: when a user writes an article they are unable to submit a text file without uploading media. The biggest issue with this was there was no prompted error message, so the user could write an article and submit it and a prompt would come up saying ‘file submission successful’ (as seen below) however no file was submitted in the WP Admin section and the admin would be none-the-wiser as to whether a file had been uploaded or not.

Please note: I have had to use – in replacement of [ as short-code is programmed to create the file on WordPress pages. 


file successful

With the following code I’ve been able to create an error message by using the following short code, unfortunately I still can’t get the form to work by submitting with out a media attachment and I am still unable to work out the short-code to (at the very least) change the title….

Here’s the code that has allowed an error message. I’m not sure what ‘security check failed’ refers to. However you are still able to successfully submit a form with an attachment with the below short code – as long as it is an image file which isn’t ideal.

-fu-upload-form input type=”file” name=”my-file” id=”your-media-files” class=”validate”-

Screen Shot 2018-10-20 at 8.19.35 pm

I have just realised that my short-code has now corrupted all of my previous short-code which means I can’t revert back to the original short-code (even if it had minor flaws).

I am going to try to see if fiddling with the short-code makes a difference.

…After a ridiculous amount of scrolling through the comments section of the plugin page, I was able to figure out the reason why I was getting this security error. Every time I changed the code (thinking it would work) I’d get this error message. Apparently it is a problem with something called a cache?? And apparently I need to delete a ‘cache’ to make it work again..and clearing the cache hasn’t worked.

I’ve also found through my research how to edit the title name using this short-code so I can warn people that they need to upload a file. It was a bit fiddly as I had to edit someone else large short-code file to suit my needs but this one works now!

-fu-upload-form class=”html-wrapper-class”

form_layout=”media” title=”Upload your media – please note we will not be able to receive an article from you without an uploaded media file.”-

I’ve now also worked out how to create an entirely new form that allows different file types. Hopefully this will let me change the default settings to allow all file types.

-fu-upload-form suppress_default_fields=”true” form_layout=”post_media” title=””] [input type=”text” name=”name” class=”required” description=”Your Name*”] [input type=”text” name=”contact-phone” description=”Phone number”] [input type=”text” name=”contact-email” class=”required” description=”Email address*”] [checkboxes class=”checkboxes” name=”exhibition-interest” description=”Would you like us to contact you about showing this piece in a future exhibition?” values=”Yes,No”] [input type=”text” name=”post_title” class=”required” description=”What is the title of the artwork?* (Note: Use ‘Untitled’ if there is no given title.)”] [textarea type=”text” name=”description” description=”Are there any special notes you want us to know about the piece? Or the story of how you came to own it?”] [input type=”text” name=”date” description=”What date was the artwork created?”] [checkboxes name=”date-validation” class=”checkboxes” description=”Is the date approximate or exact?” values=”Approximate,Exact”] [input type=”text” name=”medium” description=”What medium(s) did Magu use for this piece?”] [input type=”text” name=”width” description=”Width”] [input type=”text” name=”height” description=”Height”] [input type=”text” name=”depth” description=”Depth”] [checkboxes name=”signed-validation” class=”checkboxes” description=”Is the artwork signed?” values=”Yes,No”] [input type=”file” name=”photo” multiple=”true” description=”If the work has writing or any markings on the back, please include an image of the back as well.”] [input type=”submit” class=”btn” value=”Submit”] [/fu-upload-form- 


I broke my short-code, had to remove the plugin, clear the caches and reinstall the program.

I was able to create an adapted version of the short-code to allow a different title to appear and thankfully the form will now accept PDF, Docs and Jpeg files after some fiddling.

I had a big issue with trying to edit the title on the form to show a better style of text as well as a few other stylistic bloopers. I tried multiple times to create a short-code that would differentiate between the two text or create a new title and it kept breaking the code… These are some examples of my attempt.

-input type=”text” name=”post_title” id=”title” class=”required” description=”please note we will not be able to receive an article from you without an uploaded media file.”-

-fu-upload-form class=”html-wrapper-class” form_layout=”media” title=”Upload your media” 

class=”html-wrapper-class” form_layout=”media” title=”please note we will not be able to receive an article from you without an uploaded media file” 


I ended up using this CSS to both change the colour and size of the two titles, move the widget on the right hand side a little higher to accomodate for the chat box bubble and remove an ugly blue line that was appearing with the widget.


/* Add note to frontend uploader form below form title */
.ugc-inner-wrapper h2::after {
content: ‘Please note we will not be able to receive an article from you without an uploaded media file. PDF/DOCS/JPEG’;
color: grey;
font-size: 0.7em;

/*— move sidebar text higher up —*/
.main .sidebar.overlap {
margin-top: 0rem;


/*— remove blue line from sidebar widgets / 1505174-zen JS —*/
.sidebar-main .widget:before {
border: none;

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.