topic Re: Images collected by form convert to public url to show in page in CMS Development

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

CristianSabogal — Fri, 28 Oct 2022 17:10:29 GMT

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.

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

Jaycee_Lewis — Mon, 31 Oct 2022 15:39:39 GMT

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

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

Anton — Mon, 31 Oct 2022 15:53:28 GMT

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

files API documentation

After the upload you could show all images like this

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

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

CristianSabogal — Wed, 02 Nov 2022 00:05:21 GMT

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.

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

CristianSabogal — Thu, 17 Nov 2022 12:51:52 GMT

Hi again, some ideas to solve this.

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

MichaelGabu — Fri, 25 Nov 2022 16:54:57 GMT

Any solution on this issue?

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

KSmithIllumine8 — Mon, 06 May 2024 20:16:58 GMT

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.

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

CristianSabogal — Tue, 07 May 2024 14:07:02 GMT

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.

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

KSmithIllumine8 — Tue, 07 May 2024 22:11:56 GMT

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.