Auto-populate video files on an LP from form submissions of another LP

[george_wedia]

Hi all,

I have the following case:

1. I have a form in a landing page that asks for a video file upload

2. A visitor uploads a video file to that form

3. I have another landing page where I want to auto-populate (show) videos that were uploaded in the form in step #2.

The videos will be auto-populated in a youtube style layout.

Is this possible?
Which API function do I need?

I'm thinking also maybe it will be better to just have access to the folder that videos are upload so I can read the folder contents with a JS library and auto-populate videos with that.

Thanks in advance,
George

[cbarley]

Sorry to hear @george_wedia, thanks for letting me know!

[george_wedia]

Unfortunately, the project won't continue, so I won't be able to report back on it's status.

Thanks for the help again.

[george_wedia]

Hi @Connor_Barley,

Thank you very much for your time and support.

I will start implementing your solution and report back if I need more help or if it works.

Thank you,

[cbarley · Accepted solution]

Hi @george_wedia, I actually looked into this a bit further and have some more concrete code for you. If the contact has uploaded multiple files on the form, what you'll get returned back is a semi-colon separated string of the URL's uploaded. What we can do is split out that string into an array by using the split filter with HubL. This will then give us an array we can loop through. Once we loop through that array, we can go ahead and print out an image by placing the values from our loop into the src attribute in an img tag. Here's the code I used in my own portal:

<div class="test">
  {% if contact.file_upload %}
  {% set files = contact.file_upload|split(";") %}
    {% for file in files %}
    <div class="file">
      <img src="{{ file }}">
    </div>
    {% endfor %}
  {% endif %}
</div>

You can see the images print for me here: http://prntscr.com/m53ich.

If you convert on the form on this page and select multiple files to upload and wait a bit, then return to the page, you should see your images printed out on the page.

[cbarley]

hi @george_wedia, happy to help. I don't think this would be possible with the API, as the contact's api doesn't support CORS/AJAX front-end requests. That said, if you're using the HubSpot CMS, you may be able to leverage a property on known contacts in order to print out known files (similar to this topic) with HubL.

For example, I have a field called file_upload. If I view the Developer Info on my CMS hosted page, I can print out the URL for the files that I was able to populate into that property via the form on that page.

I can put this code:

{% if contact.file_upload %}
   {{ contact.file_upload}}
{% endif %}

and I'll get this semicolon separated list on the page: http://prntscr.com/m53cn3

From there, I can then use some JS to separate the values into an array and use either HubL or JS to loop through those items and print them for known contacts