Skip To Content

How to Organize Your Client Uploads Using the Gravity Forms Dropbox Add-On

Development

Marek Grabowiecki Client Success Manager

Gravity Forms has tons of add-ons to help extend the functionality of their forms. One add-on that we’ve come to love is the Gravity Forms Dropbox Add-on. We use this add-on as part of our on-boarding process to help organize our client uploads. I’ll explain the process in detail below.

The Content-First Approach

At nvision, we have a content-first approach that we apply to each of our projects. We believe that the content serves as the foundation for the project and is essential to have while coming up with a successful design. We call this stage of the project the content acquisition phase.

One step in our content acquisition phase is to collect any assets from the client that would be relevant to display on the website. These assets could be anything from logos, to product shots, to team member photos, etc. One problem that we started to experience during this step was that clients would email us a handful of assets in one email, a few days would go by, some more assets would be sent in another email, a few more days would go by, and this would continue on. There isn’t anything wrong with collecting your content in separate chunks, the problem lies within trying to organize all of these files while keeping everyone aware of the new uploads as they come in in these bursts.

What we decided to do to address this problem was to allow our clients to self-manage their uploads (to a certain degree). We figured since we’re already organizing our content by client-specific directories, why not allow the client to continually add their assets to their specific directory.

The Logic

An example of nvision's Client Uploads form which contains fields to provide a name, company name, and uploads
The logic behind this method is to guide the client to a page on our website that houses a Client Uploads form. This form is super-simple; only containing a field for the client’s name, company name, and uploads.

  • Name – is used in our email notification to help personalize the notification message
  • Company name – the directory which the assets will be uploaded to
  • Uploads – the client’s assets

Step 1 – Install and Activate the Dropbox Add-On

The Gravity Forms Dropbox Add-On can be found under the Forms Add-Ons submenu item
To Install the Dropbox add-on, simply navigate to the Forms > Add-Ons submenu item and scroll down until you hit the Dropbox Add-On. Click Install. When prompted, click the Activate Plugin button.

Step 2 – Create an app in your Dropbox account

Screenshot of the Dropbox view when creating a new app
Gravity Forms has an instructional guide on how to create a custom Dropbox app, found here: Creating a Custom Dropbox App. The instructions from the guide are shown below:

  1. Visit the Dropbox App Console.
  2. Click the Create app button.
  3. For the Choose an API section select Dropbox API.
  4. For the Choose the type of access you need section select Full Dropbox.
  5. Enter a name for your custom app.
  6. If you have a personal and a business account which are linked you will be asked to select which account you want to own the app. Once you make a selection you will be asked to sign in to that account.
  7. Click the Create app button.
  8. You will then be redirected to the control panel for your app.
  9. If you will be using the Dropbox Upload Field, which uses the Dropbox file chooser feature, enter the site domain and then click Add. We will not be using the Dropbox Upload Field field for this exercise
  10. Keep this page open, you will be needing the App Key and App Secret.

Step 3 – Configure the Dropbox Add-On

Screenshot of the fields present when configuring the dropbox add-on: Enable Custom Dropbox App, App Key, App Secret

Gravity Forms has an instructional guide on what to do for this step, found here: Configuring the Dropbox Add-On. The instructions from the guide are shown below:

  1. In a different tab go to the Forms > Settings > Dropbox page of your sites WordPress admin.
  2. Enter the App Key from the Dropbox control panel for your app.
  3. Enter the App Secret from the Dropbox control panel for your app.
  4. Click the Click here to authenticate with Dropbox. button.

Step 4 – Create Your Form

Add the required name, company name, and uploads fields to the Client Uploads form in Gravity Forms
When you create your form, give it a relevant name so that it’s easy to manage. I suggest naming the form Client Uploads.

Next, you’ll need to add a field for the name, company name, and uploads.

  • Use a single line text field for the name and company name
    Gravity Forms Single Line Text field is found under the Standard Fields widget
  • Use a file upload field for the uploads
    Gravity Forms File Upload field is found under the Advanced Fields widget
  • Make all of the fields required
    The Gravity Forms field setting to make a field required is found under the Rules section of the field
  • Check the Enable Multi-File Upload option on the file upload field
    The Gravity Forms setting to control whether a File Upload field accepts multiple files is found under the Multiple Files section on the field

Step 5 – Add and configure a Dropbox feed on the form

Add Dropbox feeds to Gravity Forms forms by going to the form settings and choosing Dropbox. an Add New button will be present at the top of the table

First, we’ll want to add a Dropbox feed to the form. To do this simply navigate to the form’s settings, click the Dropbox link, and press the Add New button.

 

Configure the Dropbox feed by providing a Feed Name, File Upload Field, and Destination Folder

Now that the feed has been created, you’ll need to configure it. Start by naming the feed something relevant (I chose Dropbox Client Uploads). Then choose the correct File Upload Field (I gave my field an Admin Field Label of Uploads). Finally, choose a Destination Folder. This is the folder that will contain all of the separate client directories. The next step handles the actual organization of the uploads to the appropriate client directory.

Step 6 – Add the following code snippet to your functions file

Insert the following snippet into your functions.php file. Note that the only variables that might require modification are the $uploads_field_id and $uploads_form_id variables.

// Organize the uploads in our uploads directory by client_name
function upload_to_client_dir( $folder_path, $form, $field_id, $entry, $feed ) {

    // ID of the field used to collect the client name
    $uploads_field_id = '2';

    // Replace spaces with a hyphen and remove all non-alphanumerics
    $client_dir = str_replace( ' ', '-', rgar( $entry, $uploads_field_id ) );
    $client_dir = preg_replace( '/[^A-Za-z0-9-]/', '', $client_dir );

    // Create a folder for the client to add their uploads to
    return $folder_path . '/' . $client_dir;

}

// Update the dropbox upload path on a specific form (uploads form)
$uploads_form_id = '9';
add_filter( 'gform_dropbox_folder_path_' . $uploads_form_id, 'upload_to_client_dir', 10, 5 );

A quick summary of what is happening in the snippet:

  • The added filter will only affect the uploads form that we created by appending an underscore and the form ID to the gform_dropbox_folder_path hook.
  • All spaces in the client name are replaced with hyphens. Anything that is not a letter, number, or hyphen is removed from the client name. This will ensure that we’re creating a valid folder name.
  • Finally, we’re returning the folder path that was specified in the Dropbox feed along with the appended client name. The client name directory will be created if it doesn’t already exist.

The End Result – Organized client uploads

Example of the Gravity Forms Dropbox Add-On automatically organizing client uploads

If you’re having issues getting this to work on your site or were able to get it to work and are excited about the amount of time you’re now saving, please leave a comment below!

24 Replies to “How to Organize Your Client Uploads Using the Gravity Forms Dropbox Add-On”

  1. Thanks for the comment, Kyle! I’m glad that you found this post useful.

    Our team has written a number of useful articles that talk about creative ways to use and integrate with a number of platforms/tools including ACF, Bitly, and Webflow. Check them out when you have sometime: https://nvision.co/category/development/

    Cheers!

  2. Nice and perfect for a project am working on, i would love to know if this also stores the uploaded files on my server too and also on the Dropbox account too? Because I would only love to have them stored on Dropbox without leaving a copy on my website… Pls notify me of your response.
    Thanks

    1. Awesome! I’m happy to hear that you’ve found this article useful.

      We’ve switched our setup to the G-Suite so we’re no longer connecting our Gravity Forms to DropBox (Google Drive now) but from what I recall, the files were NOT uploaded to your website and instead only uploaded to DropBox (which it sounds like what you’re after).

      Give it a shot and let me know how you make out. Thanks!

  3. The dynamic directory not created in my case. it seems like gform_dropbox_folder_path filter are not working. could you help into it

    1. Thanks for your comment Srikant! I’m sorry to hear that this isn’t working for you.

      If the hook isn’t firing for you then I’d recommend ensuring that the $uploads_field_id and $uploads_form_id variables are matching your setup correctly. In my example, my form had an ID of 9 and the Field had an ID of 2.

      This blog post was also written a couple of years ago so it’s possible that something changed within the plugin’s code (or on Dropbox’s end) that would prevent this from working. But I’d start with ensuring that your variables are pointing to the correct IDs.

      I hope this helps!

      Cheers,
      Marek

  4. So i noticed that this is using just input field (company name). what if i wanted to use someone full name and use the gravity form Name input which comes with First and Last night? how would i adjust to using that field?

    1. Thanks for your question Jason!

      If wanted to leverage the Name field rather than the Single Line Text field then you would need to modify the snippet in the area that is identified as “// Replace spaces with a hyphen and remove all non-alphanumerics”. Rather than referencing the Company Name input within the snippet, you’d run the same type of logic but instead of just using the value provided into the Company Name input, you’d want to combine the values from the First and Last name inputs.

      The updated code would look something like this:

      // Organize the uploads in our uploads directory by client_name
      function upload_to_client_dir( $folder_path, $form, $field_id, $entry, $feed ) {
      
          // ID of the field used to collect the client name
          $first_name = '1.3';
          $last_name = '1.6';
      
          // Replace spaces with a hyphen and remove all non-alphanumerics
          $client_dir_first = str_replace( ' ', '-', rgar( $entry, $first_name ) );
          $client_dir_last = str_replace( ' ', '-', rgar( $entry, $last_name ) );
          $client_dir = $client_dir_first . '-' . $client_dir_last;
          $client_dir = preg_replace( '/[^A-Za-z0-9-]/', '', $client_dir );
      
          // Create a folder for the client to add their uploads to
          return $folder_path . '/' . $client_dir;
      
      }
      
      // Update the dropbox upload path on a specific form (uploads form)
      $uploads_form_id = '9';
      add_filter( 'gform_dropbox_folder_path_' . $uploads_form_id, 'upload_to_client_dir', 10, 5 );
      

      I believe the way that Gravity Forms assigns IDs to the inputs within a complex field (like the Name field) is to split the ID into decimals – meaning the First Name would have an ID of 1.3 and the Last Name would have an ID of 1.6. I’d recommend reviewing their documentation on the Name field for full accuracy of which ID to use, which can be found here: https://docs.gravityforms.com/name/

      If you end up giving this a shot, let me know how it all works out. Cheers!

  5. I just tried this modification to use the First Name/Last Name and it works! Now I’m trying to figure out how to add a date in the beginning of the folder name to keep things extra organized.

    1. Thanks for your comment, Julie! I’m really happy to hear that this snippet worked out for you.

      Including the date in the folder name is a great suggestion! Adding this will certainly help with keeping things extra organized.

      I’ve modified the snippet from the post to include the date, shown below.

      Note! – one thing to keep in mind is that the original snippet will continue to organize the uploads by the client name. If you add the “Date” to the folder name then that means that if the client uploads their items on 2 different days, then 2 different folders will be created for them. Just a bit of a heads up before implementing this on your site!

      // Organize the uploads in our uploads directory by client_name
      function upload_to_client_dir( $folder_path, $form, $field_id, $entry, $feed ) {
      
          // ID of the field used to collect the client name
          $uploads_field_id = '2';
      
          // Replace spaces with a hyphen and remove all non-alphanumerics
          $client_dir = str_replace( ' ', '-', rgar( $entry, $uploads_field_id ) );
          $client_dir = preg_replace( '/[^A-Za-z0-9-]/', '', $client_dir );
      
          // Julie - Add the date to the start of the folder name to keep items extra organized
          $client_dir =  date('Y-m-d') . '-' . $client_dir;
      
          // Create a folder for the client to add their uploads to
          return $folder_path . '/' . $client_dir;
      
      }
      
      // Update the dropbox upload path on a specific form (uploads form)
      $uploads_form_id = '9';
      add_filter( 'gform_dropbox_folder_path_' . $uploads_form_id, 'upload_to_client_dir', 10, 5 );
      

      Give this code a shot and let me know if it works for you!

      Marek

  6. Great article. I caught in the comments that you said you switched from Gravity Forms uploading to Dropbox and instead have it upload to Google Docs. Could you tell me why you made that decision? I’m currently struggling to find the troubleshooting answer with a recent Gravity forms set up that is connect to dropbox, but all the files that our clients upload are corrupted by the time they get to Dropbox.

    1. Hi Brynn, thanks for your comment!

      We completely switched over to Google as an organization which also meant dropping Dropbox for Google Drive. (I’m a big fan of Google, so I was really happy about the switch!)

      Hmm, that’s very strange. I never ran into the issue that you’ve described. Is it possible that the corruption is within the files themselves (and not necessarily your feed)? Is this happening with any random jpg or png files that you’re testing with?

      I’m interested in hearing more!

  7. This is a great article, Been searching for this information, I’m glad i found this.

    I saw a comment about adding a date to the form which works perfectly. However i was trying to modify this so suit my form

    I have an Option Product Field with field type checkbox

    How can create a multiple folder based on those Options

    Example

    Option A
    Option B
    Option C

    If a user submits a form selecting option A,B or any of the options

    i want to have different folders like this:
    Date-CompanyName-Option-A
    Dtae-CompanyName-Option-B

    And if this isn’t possible. Can we achieve Date-CompanyName-Option-A-Option-B

    Looking forward to your response. Thank you

    1. Hi Samuel!

      Thank you for your comment. I’m happy to hear that this is working well for you!

      You should be able to achieve what you’re looking for by configuring the dropdown value into the folder name much like we’re doing with the company name field. Gravity Forms might treat dropdown IDs slightly different from standard fields (so you might need to play around with this a bit), but I believe that something along these lines will help getting the dropdown value into the folder name:

      // Organize the uploads in our uploads directory by client_name
      function upload_to_client_dir( $folder_path, $form, $field_id, $entry, $feed ) {
      
          // ID of the field used to collect the client name
          $uploads_field_id = '2';
          $dropdown_id = 'ID_of_your_dropdown_field';
      
          // Replace spaces with a hyphen and remove all non-alphanumerics
          $client_dir = str_replace( ' ', '-', rgar( $entry, $uploads_field_id ) );
          $client_dir = preg_replace( '/[^A-Za-z0-9-]/', '', $client_dir );
      
          // Add the Dropdown value to the folder name
          $dropdown_value = str_replace( ' ', '-', rgar( $entry, $dropdown_id ) );
          $dropdown_value = preg_replace( '/[^A-Za-z0-9-]/', '', $dropdown_value );
      
          // Add the date to the start of the folder name and the dropdown value to the end
          $client_dir =  date('Y-m-d') . '-' . $client_dir . '-' . $dropdown_value;
      
          // Create a folder for the client to add their uploads to
          return $folder_path . '/' . $client_dir;
      
      }
      
      // Update the dropbox upload path on a specific form (uploads form)
      $uploads_form_id = '9';
      add_filter( 'gform_dropbox_folder_path_' . $uploads_form_id, 'upload_to_client_dir', 10, 5 );
      

      Give this a shot and let me know how things work out!

  8. Thank you very much this works well, However, when i checked files on Dropbox they had zero bytes. What could be the issue?

    1. Great! Thanks for the update, Samuel. It’s awesome to hear that this is working well for you.

      When it comes to some of your files having zero bytes, I suspect that there are a couple of reasons why this might be happening:

      1. Specific file types: you may want to experiment to see if this is happening for all types of files (or) if this is happening only on specific file types.
      2. Issue with the test file: you may want to experiment with other files to see if there is an issue with the file that you’re using to test this integration.

      I hope this helps! Let me know if there are any other updates on your end.

  9. Hello Marek,
    First of all, I would like to thank you for such a detailed tutorial. It’s really helped me. I was wondering if there is a way to have a few upload fields in one form and each field will have its own folder name on Dropbox (for example Client Name-Folder 1, Client Name-Folder 2)? I have different options for customers and each file upload should be separated based on option. Thank you!

    1. Thank you for your comment, Eugene. I’m happy to hear that the tutorial helped you with your setup 🙂

      As far as I’m aware, you can only return one folder path within the function. I’m afraid this means that if you are trying to separate the assets into multiple folders within a single submission, it may not be possible.

      But if you are trying to separate the files based on the type of client (or expected assets) you can achieve this by providing a dropdown field above the upload fields and making them appear based on conditional logic.

      For example, you could create a dropdown with options for FILE-TYPE-A, FILE-TYPE-B, ETC and each of these would have a separate upload field that would only appear once their respective dropdown option is selected. With that in mind, you would need to update the logic in the function to something similar to this:

      // Organize the uploads in our uploads directory by client_name
      function upload_to_client_dir( $folder_path, $form, $field_id, $entry, $feed ) {
      
          // ID of the field used to collect the client name
          $client_field_id = '1';
      
          // IDs of the various upload fields
          $uploads_field_id_FILETYPE_A = '2';
          $uploads_field_id_FILETYPE_B = '3';
          $uploads_field_id_FILETYPE_C = '4';
      
          // Store the values submitted for each of the various upload fields
          $uploads_A_value = rgar( $entry, $uploads_field_id_FILETYPE_A );
          $uploads_B_value = rgar( $entry, $uploads_field_id_FILETYPE_B );
          $uploads_C_value = rgar( $entry, $uploads_field_id_FILETYPE_C );
      
          // Determine the uploads folder type based on which upload field had attachments
          if ( ! ($uploads_A_value === null || empty($uploads_A_value)) ) {
              $upload_type_path = 'FOLDER-A';
          } elseif ( ! ($uploads_B_value === null || empty($uploads_B_value) ) ) {
              $upload_type_path = 'FOLDER-B';
          }  elseif ( ! ($uploads_C_value === null || empty($uploads_C_value) ) ) {
              $upload_type_path = 'FOLDER-C';
          }
      
          // Replace spaces with a hyphen and remove all non-alphanumerics
          $client_dir = str_replace( ' ', '-', rgar( $entry, $client_field_id ) );
          $client_dir = preg_replace( '/[^A-Za-z0-9-]/', '', $client_dir );
      
          // Add the sub-folder to the end of the path
          $client_dir = $client_dir . '-' . $upload_type_path;
      
          // Create a folder for the client to add their uploads to
          return $folder_path . '/' . $client_dir;
      
      }
      
      // Update the dropbox upload path on a specific form (uploads form)
      $uploads_form_id = '9';
      add_filter( 'gform_dropbox_folder_path_' . $uploads_form_id, 'upload_to_client_dir', 10, 5 );
      

      I haven’t personally tested the code above so I’m not sure if it will 100% work (you might need to play with the logic that checks for the empty field values) but I’m hoping that this helps in some way.

      Best of luck!

  10. I want the URL and name of the files uploaded to dropbox via gravity form in the notification email. can you help me?

    1. Great question!

      Unfortunately, I don’t think that you’ll be able to include the link to the Dropbox folder within the email notification as the folder is likely created after the notification is sent. However, it sounds like this would be very useful feature and worth experimenting with!

      At the least, you can leverage the Dropbox notifications to be notified when your new folder is created. If you don’t have notifications turned on, the following article explains how to turn on Dropbox Email Notifications: https://help.dropbox.com/accounts-billing/settings-sign-in/email-settings

      If you end up experimenting with getting the Dropbox link to appear in the email notification, feel free to respond back with your findings!

  11. Hello, very useful this article, but I want to know if there is the possibility of creating several folders, ie one inside another, for example I want to organize the folders, the first with the name of my client, the second folder to be created with another value of another field, for example the name of your pet, but I want the first folder is created only once, the second folders that go inside to be created when new entries are sent.

    1. That’s a great question, Sam! And I see this use case being helpful for others.

      I haven’t personally tested creating nested folders using this method but I imagine that it should work! I know that when you upload to an existing directory the code won’t create a duplicate of the folder and will instead use the existing folder. So this should, in theory, be possible using the code below:

      // Organize the uploads in our uploads directory by client_name - MODIFIED FOR SUBFOLDERS
      function upload_to_client_dir( $folder_path, $form, $field_id, $entry, $feed ) {
      // ID of the field used to collect the client name - SUBFOLDER FIELD ADDED
      $uploads_field_id_top = '2';
      $uploads_field_id_subfolder = '3';
      // Replace spaces with a hyphen and remove all non-alphanumerics - CLIENT
      $client_dir_top = str_replace( ' ', '-', rgar( $entry, $uploads_field_id_top ) );
      $client_dir_top = preg_replace( '/[^A-Za-z0-9-]/', '', $client_dir_top );
      // Replace spaces with a hyphen and remove all non-alphanumerics - SUBFOLDER
      $client_dir_subfolder = str_replace( ' ', '-', rgar( $entry, $uploads_field_id_subfolder ) );
      $client_dir_subfolder = preg_replace( '/[^A-Za-z0-9-]/', '', $client_dir_subfolder );
      // Combine the TOP and SUBFOLDER
      $client_dir = $client_dir_top . '/' . $client_dir_subfolder;
      // Create a folder for the client to add their uploads to
      return $folder_path . '/' . $client_dir;
      }
      // Update the dropbox upload path on a specific form (uploads form)
      $uploads_form_id = '9';
      add_filter( 'gform_dropbox_folder_path_' . $uploads_form_id, 'upload_to_client_dir', 10, 5 );

      Give this a shot and let me know if you’re able to successfully upload the Gravity Forms upload files to client-defined Dropbox Subfolders.

      Thanks!

Leave a Reply to Chris Cancel reply

Your email address will not be published. Required fields are marked *

Request a Quote

If you’re ready to change the trajectory of your business and
excited to partner with the right team to get the job done.

UP

© 2024 NVISION. All Rights Reserved.