Support

Account

Register Login

Home › Forums › Front-end Issues › Front-end form with file / gallery uploaders

Solved

Front-end form with file / gallery uploaders

  • I’m trying to create a new form for front-end use and I have the form rendering on my site. The issue is that the buttons for file upload and gallery upload do not work. They do not bring up the dialogue for uploading anything.

    Ideally this would trigger the Plupload WordPress core functionality as that’s really what I’m trying to go after.

    I turned on the WordPress debug and fixed any errors that came up. This is a fresh install and I just installed the latest ACF with the gallery add-on.

    Is there a certain admin JS file I need to include to get Plupload working?

    On a separate but similar note, is there a way to make the file upload a drag-and-drop without triggering that modal popup (assuming I even get that to work) so that it’s just on the page as a drag-and-drop uploader?

  • I’ve disabled all of the JavaScript I was including in my functions.php file so now I’m not getting any errors on page load and it looks like the scripts are getting added properly when viewing the page source.

    However, when I click the “add file” button for my uploader, I get an error in my JavaScript console:
    Uncaught TypeError: Cannot read property 'post_id' of undefined | input.php:812

    I checked that $post->ID is giving me the post ID, so that’s not the issue. Looking into it further.

    The Gallery field however, does work, but I need to do this for files, not images.

  • Even more info!

    1. When the Library for the file is set to “Uploaded to post” the front-end form fails at line 50 of file.js: this.o.query.uploadedTo = acf.o.post_id; with the error Uncaught TypeError: Cannot read property 'post_id' of undefined | input.php:812
    2. When the Library is set to “All” that error is avoided but there is another error that occurs in file.js on line 138 title : acf.l10n.file.select, with the error Uncaught TypeError: Cannot read property 'file' of undefined | input.php: 900

    I’m not sure where to go from here

  • Hi Jaace,

    First of all, do you have acf_form_head in your page, as well as acf_form?

    I built a site around 2 months ago that has a mass of front-end fields, text, radios, selects, gallerys, repeaters, etc. All of these worked fine. I do however remember having a lot of trouble whilst messing around with the Gallery field, it took a while to get working.

    If you need some more help give me a shout, i’ll let you look at the dev site and the code used to create the forms. roartex at me dot com

  • Hi @Jaace

    I would look into checking that the ACF JS is being included on your page. You can check this in the HTML source and also by using firebug to test if ‘acf’ is a JS object

  • Hi all thanks for the responses!


    @rmdev    : I do have both of those fields, in fact I just copied the sample code from (http://www.advancedcustomfields.com/resources/tutorials/creating-a-front-end-form/) and it’s populating the page I put this code on with the correct fields. Do you have a file upload field working? That’s the only one I’m having trouble with, the Gallery field is indeed working for me now, just the file upload isn’t.


    @elliot    : I’ll look into that and report back. It looked like all the JS was there but perhaps I missed something. I’ll look into using firebug to test that acf is an object.

    I’ll try to report back later today with an update.

  • I’m looking into any differences with included scripts on the page but when I use typeof acf I get back "object" so it seems to be getting included properly.

    I’ll update with the scripts that are being included on the page.

    UPDATE: However, when I include jQuery myself (it looks automatically included from acf_form_head(); ) via a normal scrip tag, I get the Uncaught ReferenceError: acf is not defined.

    Very very strange

  • OK, I think I figured it out. Basically I needed to put the acf_form_head() function call before my DOCTYPE was even declared, so I did that on my header.php file and not in the custom page template I created.

    I figured this out after trying to use the form to create a new post type and getting a whole bunch of PHP warning: Cannot modify header information.

    Just tried the same method with the standard front-end form that doesn’t create a new post type and it’s also working when acf_form_head() is called before DOCTYPE (or anything else). Seems obvious to me now but wasn’t clear from the tutorial section that it needed to be outside of the custom page template.

  • Glad you worked it out Jaace. On the site I built with a mass of front-end files I simply had two headers and footers. I used get_header and get_footer for all the normal pages, and set up two new duplicates but with lots of amended scripts for acf_form, called dash-head and dash-foot. Then I use call these like get_template_part(‘dash-head’) instead of get_footer().

  • @rmdev that’s a good idea, I think I’ll go that route. I could also just use a conditional to test the page template and call the extra function if it’s true.

    If there are a lot of differences between the two headers, beyond just that one function call, your method is probably better. So far it’s only the function call for me.

    Thanks again guys! Thank you elliot for creating this plugin, it’s made web development so much more fun and streamlined.

  • Well the project I used it on is an Ebay like system that allows users to pay to add listings to a luxury camp site database, so there’s tonnes of extra scripts I needed for the acf_form pages; I also amended the experience of ACF a lot (had to), rewriting the HTML for repeater fields and so on.

    I second your final sentence!

  • Another quick somewhat related question. I try uploading files as a logged out user and get an uploading error:
    An error occurred in the upload. Please try again later.

    I’m looking in my PHP console and don’t see any issues and none in my JS console either. Do either of you happen to know what this is about?

    Thanks!

  • Haha, you’re experiencing basically everything I went through.

    This is because the user type isn’t allowed to access the WP uploader. Only admins are by default. I changed my site to allows editors to use the WP uploader. If you intend on logged out users being able to upload stuff through the WP uploader… well, be careful.

    Would like to hear Elliots opinion on allowing general public users access to image/file/gallery fields on front-end forms.

  • Yeah, that’s what I thought. Was going to try to avoid user accounts but I agree that could be dangerous.

    Originally I was using gravity forms to do this form (which allows non-logged in users to upload) but it unfortunately doesn’t integrate the Plupload functionality which I wanted.

    Time to rethink what I need to do. Thanks!

  • Hi rmdev
    Which are the exact roles you added for the user.

    I set ‘upload_files’ capability for ‘subscriber’ role but i’m not able to upload files (http error). When i log with an admin account everything works (front end form)

  • Hi @rmdev,

    I’m also intrested in which capabilities you set to the user role.
    Having the same problem as mountainthemes.

  • Hi,

    I’m joining @Jaace request, “is there a way to make the file upload a drag-and-drop without triggering that modal popup so that it’s just on the page as a drag-and-drop uploader?”

    Currently trying to integrate http://www.dropzonejs.com/ library with ACF. Has anyone had any experience with integrating dropzone or any other drag and drop js libraries with ACF?

    Thanks and p.s thank you @elliot for this amazing plugin, really took my development to the next level. purchased all add-ons and will continue to do so 🙂

  • WAIT !!!!

    1. acf_form_head() processing form after send it.
    2. IF your js error block your console before sent form you have still problem.

    try fix it that in your JS:

    acf.o = {};
    acf.screen = {};
    acf.o.post_id = 0;
    acf.screen.post_id = 0;

    Js console should by clear now. You could work in js and create fileuploader and gallery.

    Soon I’ll add code to frontend jquery uploader based on this library:
    http://blueimp.github.io/jQuery-File-Upload/

    Now I testing it.

  • Hello @dadmor,

    I’m looking to implement something like this with the plugin you mentioned.
    Did you manage to do it?

    If so, could you please share your steps with me?

    It would mean a lot.

  • Hello @dadmor,

    Thank you so much for your guide. This is really helpful for me…

    Regards
    PrasadAb https://appvalley.one/

Viewing 20 posts - 1 through 20 (of 20 total)

The topic ‘Front-end form with file / gallery uploaders’ is closed to new replies.