Images collected by form convert to public url to show in page

[CristianSabogal]

Hi there,

I've a problem in this moment with the visualization of my project images. I explain the details the issue.

Work context:

• We created a custom object with several types of properties, between them (image_proyect). From those properties we created forms to catch specific information.
• All forms were inject in pages with (Private - Registration) active. Therefore they are protectet by login.
• We created some kind of frontend to show the information collected in form of pages listing cards and detail for each card.

Issue/Problem:

• We detect that the moment to see the cards in the listing the images don't loading properly, because when that images be storage in the system by default HubSpot assign a Private Url to each one. In consecuense the users cannot see them.
• Note: The images loading fine when I'm logged as administrator but our customers are the ones who finally need to see them.

Question:

• How can I do to automatically define that all images collected by forms stored with Public Url and that url stored in the corresponding property of the custom object?

I wait for you advise.

[KSmithIllumine8]

Replying for visibility as I'm also running into the same issue.

I'm trying to display images uploaded via a form on a separate webpage, using the Forms API to pull the response data and then applying the image url's to html img tags, but you can only see the images if you are logged in as a HubSpot user for the account.

I need to figure out a way to convert the provided url (https://api-na1.hubspot.com/form-integrations/v1/uploaded-files/signed-url-redirect/.....) into a publicly-visible version, or somehow set the form to make the uploaded images publicly-visible, or maybe some other solution.

[CristianSabogal · Accepted solution]

Hi @KSmithIllumine8, We soved this issue with alternative way. I hope that this help you. 

Summary

Me and my team tried to explore many ways to address this issue, keeping in mind that Hubspot for security covers all sent multimedia content with an authentication layer. This poses a problem when we want to expose multimedia publicly. Here we found a way to solve this, but this solution implies certain conditions:

• (Serverless code requiring Content Hub - Enterprise).
• Manipulation onSubmitForm.

Implemented solution

• We created an API connection to upload files to (File Manager - Hubspot Account) in parallel for each submit. All this media uploaded via API and tagged as public, then we save that public URL in a cloned property for later consumption.

[KSmithIllumine8]

Thanks for the reply @CristianSabogal ! That's what I'm attempting to do now. I just need to figure out how to properly authenticate my call to upload the images and it should be good.

[MichaelGabu]

Any solution on this issue?

[Anton]

Hi @CristianSabogal, 

could you please share some code of the displaying module?

Also I think the best way to go with a custom module and a modified form embed code. So everytime somebody uploads an image it will be uploaded directly to the file-manager into a specific folder like "uploaded-images". 

Could think of something like this

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "{{ hub_id }}",
    formId: "{{ module.form.form_id }}",
onFormSubmitted: {
{# trigger the files API here #}
}
  });
</script>

files API documentation

After the upload you could show all images like this

<img src="YOUR-DOMAIN/uploaded-images/some-name.png">

Or you could even completly overengineer it by putting everything into the file-manager, grab the URL and place it into a HubDB(if you have it) as a row. Then you could write a second module or template to display the HubDB rows like this

{# just a schematical idea - not a real HubDB code #}
{% for entry in hubDB_row %}
<img src="{{ event.image_url }}" alt="{{ event.name }}">
{% endfor %}

best, 

Anton

[CristianSabogal]

Hi Anton,

Here the code and some screenshots of problem:

Code listing Projects:

{# Get projets #}
{% set projects = crm_objects("proyecto", "limit=100&order=-hs_createdate"+query, "hs_object_id,hs_pipeline_stage,project_name,hs_pipeline,departamento__ubicacion_,departamento__ubicacion_,valor_de_los_aportes_objeto_del_beneficio_tributario____,departamento__1_,departamento__2_,imagen_del_proyecto, modalidad_de_participacion") %}

{# LOOP PROYECTOS - CARDS #}
{% for project in projects.results %} 
    <div class="col-12 col-lg-3 col-sm-12">
        <div class="project-card">
            <a href="{{ request.path }}/{{ project.hs_object_id }}">
                <div class="image-card">
                {# Validate if the project does not have an image and we set a default #}
                {% if not project.imagen_del_proyecto or ".pdf" in project.imagen_del_proyecto %}
                    <img src="https://8431354.fs1.hubspotusercontent-na1.net/hubfs/8431354/default%20Images/default-photo-project.png" alt="Default-image">
                {# Otherwise we put uploaded image #}
                {% else %}  
                    <img src="{{project.imagen_del_proyecto}}" >
                {% endif %} 

                {# STATE LABEL #}
                {# ... More code ...#}
            </a>
            </div>
    </div>    
{% endfor %}

This is the code that we use to iterate projects.

How does it show on screen:

- Don't show the images, now inspect element.

- Let's see this url

- Apply redirection url to login.

How does It stored in HubSpot:

- By default is stored as "Private". This is the reason because apply the redirection show above.

- Each image is collected by property "imagen_del_proyecto" (Custom Object's property) in HubSpot form.

I hope that this details provide more context to you. Thanks.

[CristianSabogal]

Hi again, some ideas to solve this.

[Jaycee_Lewis]

Hey, @CristianSabogal, Thanks for reaching out. Let's see if we can get the conversation started. @Anton @miljkovicmisa @piersg, do you have any thoughts on workarounds or other opinions on dealing with the default behaviour @CristianSabogal is describing?

Thank you very much!  — Jaycee