Question

Receive file in zapier webhook and transform it in attachment

  • 5 March 2024
  • 9 replies
  • 127 views

Userlevel 1

Hi, 

I need to read a file byte (or a base64 string file) from Zapier webhooks.
The file is a property of a json.
I need to transform it (or them) in a zapier file field for send it via gmail as attachment.

I read a lot of topics or comments in the web but there is not a clear workaround (here an example)



How can I create this complex zap?

Thank you
Andrea


This post has been closed for comments. Please create a new post if you need help or have a question about this topic.

9 replies

Userlevel 7
Badge +14

Hi @Andrea Brunetti 

In order for us to have context, post screenshots with how the steps are outlined and configured along with examples of the DATA OUT from the trigger step that you're trying to use.

Userlevel 1

Hi @Troy Tessalone , thank you for your answer.
So, here some context.

I have ha script js script in a website that collects some data in a json and send them to my Zapier Webhook Catch Raw.
This json is a little bit complex cause it has objects and array of objets inside.
Here an example of this json:

{
"nome_genitore": "vale",
"cognome_genitore": "occhi",
"data_nascita_genitore": "dat",
"cod_fiscale_genitore": "cod",
"num_telefono": "num",
"email": "mail",
"altro_contatto": "",
"prezzo_totale": 2575,
"prezzo_default": 2900,
"socio": false,
"figli": [
{
"nome": "andr",
"cognome": "brun",
"data_nascita": "data",
"luogo_nascita": "luogo",
"cod_fiscale": "codfis",
"residenza": "indirizzo",
"allergie": "allerg",
"taglia_kit": "XS",
"note": "note",
"classifica_fit": "",
"doc": "iVBORw0KGgoAAAANSUhEUgAAA/QAAAJtCAYAAACYOztdAAAYNGlDQ1BJQ0MgUHJvZmlsZQAAWIWVeQdUFE2zds9GdlmWnHNOkjNIzjlnBJacc0YliiRFEFAEVFBBUMFEEAEVQUQRQQUMiATJqKCCIiD/EPR97/ed899z+5yeeba6urq6qjrUDgCssqSwsCAEFQDBIVERVvpaXA6OTlz ...... ",
"settimane": [
{
"id": 23,
"tipo": " multisport",
"eta": "little",
"sport": "",
"week_code": "A",
"nome": "Settimana A - dal 10/06 al 14/06",
"descrizione": "SETTIMANA A (DAL 10.06 AL 14.06)",
"prezzo": 260
},
{
"id": 24,
"tipo": " multisport",
"eta": "little",
"sport": "",
"week_code": "B",
"nome": "Settimana B - dal 17/06 al 21/06",
"descrizione": "SETTIMANA B (DAL 17.06 AL 21.06)",
"prezzo": 260
},
{
"id": 25,
"tipo": " multisport",
"eta": "little",
"sport": "",
"week_code": "C",
"nome": "Settimana C - dal 24/06 al 28/06",
"descrizione": "SETTIMANA C (DAL 24.06 AL 28.06)",
"prezzo": 260
},
{
"id": 26,
"tipo": " multisport",
"eta": "little",
"sport": "",
"week_code": "D",
"nome": "Settimana D - dal 01/07 al 05/07",
"descrizione": "SETTIMANA D (DAL 01.07 AL 05.07)",
"prezzo": 260
},
{
"id": 59,
"tipo": "specialistico",
"eta": "",
"sport": "nuoto",
"week_code": "M",
"nome": "Settimana M - dal 26/08 al 30/08",
"descrizione": "SETTIMANA M (DAL 26.08 AL 30.08)",
"prezzo": 260
}
],
"extra_bus": [
{
"id": 2,
"nome": "Lega Lombarda",
"descrizione": "A - dal 10/06 al 14/07",
"prezzo": 80,
"week_code": "A"
},
{
"id": 10,
"nome": "Lega Lombarda",
"descrizione": "C - dal 24/06 al 28/06",
"prezzo": 80,
"week_code": "C"
}
],
"extra_inglese": [
{
"id": 1,
"nome": "B - dal 17/06 al 21/06",
"descrizione": "Descrizione settimana inglese",
"prezzo": 30,
"week_code": "B"
},
{
"id": 2,
"nome": "C - dal 24/06 al 28/06",
"descrizione": "Descrizione settimana inglese",
"prezzo": 30,
"week_code": "C"
}
],
"extra_compitiPRE": [
{
"id": 1,
"nome": "Compiti PRE",
"descrizione": "A - dal 10/06 al 14/06",
"prezzo": 30,
"week_code": "A"
},
{
"id": 2,
"nome": "Compiti PRE",
"descrizione": "B - dal 17/06 al 21/06",
"prezzo": 30,
"week_code": "B"
}
],
"extra_compitiPOST": [
{
"id": 1,
"nome": "Compiti POST",
"descrizione": "A - dal 10/06 al 14/06",
"prezzo": 30,
"week_code": "A"
},
{
"id": 2,
"nome": "Compiti POST",
"descrizione": "B - dal 17/06 al 21/06",
"prezzo": 30,
"week_code": "B"
}
],
"prezzo_default": 1640,
"prezzo_calcolato": 1419
},
{
"nome": "luca",
"cognome": "brun",
"data_nascita": "data",
"luogo_nascita": "luog",
"cod_fiscale": "cod",
"residenza": "indirizzo",
"allergie": "allerg",
"taglia_kit": "S",
"note": "note",
"classifica_fit": "4",
"doc": "iVBORw0KGgoAAAANSUhEUgAAA/QAAAJtCAYAAACYOztdAAAYNGlDQ1BJQ0MgUHJvZmlsZQAAWIWVeQdUFE2zds9GdlmWnHNOkjNIzjlnBJacc0YliiRFEFAEVFBBUMFEEAEVQUQRQQUMiATJqKCCIiD/EPR97/ed899z+5yeeba6urq6qjrUDgCssqSwsCAEFQDBIVERVvpaXA6OTlz ...... ",
"settimane": [
{
"id": 47,
"tipo": "specialistico",
"eta": "",
"sport": "tennis",
"week_code": "A",
"nome": "Settimana A - dal 10/06 al 14/06",
"descrizione": "SETTIMANA A (DAL 10.06 AL 14.06)",
"prezzo": 260
},
{
"id": 48,
"tipo": "specialistico",
"eta": "",
"sport": "tennis",
"week_code": "B",
"nome": "Settimana B - dal 17/06 al 21/06",
"descrizione": "SETTIMANA B (DAL 17.06 AL 21.06)",
"prezzo": 260
},
{
"id": 64,
"tipo": "specialistico",
"eta": "",
"sport": "intensivo tennis",
"week_code": "C",
"nome": "Settimana C - dal 24/06 al 28/06 (Full)",
"descrizione": "SETTIMANA C (DAL 24.06 AL 28.06) - Full",
"prezzo": 300
},
{
"id": 65,
"tipo": "specialistico",
"eta": "",
"sport": "intensivo tennis",
"week_code": "D",
"nome": "Settimana D - dal 01/07 al 05/07 (Full)",
"descrizione": "SETTIMANA D (DAL 01.07 AL 05.07) - Full",
"prezzo": 300
}
],
"extra_bus": [
{
"id": 7,
"nome": "Garibaldi",
"descrizione": "B - dal 17/06 al 21/06",
"prezzo": 80,
"week_code": "B"
}
],
"extra_inglese": [],
"extra_compitiPRE": [
{
"id": 1,
"nome": "Compiti PRE",
"descrizione": "A - dal 10/06 al 14/06",
"prezzo": 30,
"week_code": "A"
}
],
"extra_compitiPOST": [
{
"id": 1,
"nome": "Compiti POST",
"descrizione": "A - dal 10/06 al 14/06",
"prezzo": 30,
"week_code": "A"
}
],
"prezzo_default": 1260,
"prezzo_calcolato": 1156
}
]
}


With a “Code by Zapier” and Javascript I can read each properties of this json and create a data structure formatted that I use for write down in a gmail.

I need to grab the base64 file that you can see in the json object (data.figli[i].doc) and transform it in a file field that I can attach in the gmail (the last step of my zap).

So, the Zap is:
- webhook
- code
- gmail

How can I decode file from base64 and transform it in “Zapier File Field” and to be able to attach it in my gmail?
Can you help me?

 


Thank you
Andrea 

Userlevel 7
Badge +14

@Andrea Brunetti 

Have you tried asking ChatGPT for help about how to convert the doc to a file for possible guidance with the Code?

Userlevel 1

Yes, if I try to convert the file, Zapier not respond, it is very slow.
Here the code that I used for test the conversion:

//mapping oggetto json ricevuto
let data = JSON.parse(inputData.data);

//definizione oggetto output
const data_format = {
nome_genitore:"",
doc:[]
}

//estrazione dei dati
data_format.nome_genitore = data.nome_genitore;


// Decodifica il file Base64 in un buffer
const fileBuffer = Buffer.from(data.figli[0].doc, 'base64');

// Crea un oggetto di tipo File per Zapier
const file = {
name: 'file1.png', // Specifica il nome del file
file: fileBuffer // Passa il buffer del file
};


data_format.doc.push(file);


return data_format;


Every now and then Zapier manages to respond and creates an array of bytes, but by inserting these as attachments to the email, Zapier sends the attachment as if it were text. I think it is not transformed into the File Field type of zapier.
How can I convert it to this type?

Here a screen of the mail received:
 



How can I convert in File Field?
https://help.zapier.com/hc/en-us/articles/8496259603341-Different-field-types-in-Zaps#h_01H96NFYDFXACVBT2KW7977A83

Do you have any suggestions?
Thank you

​​​​​​​Andrea

Userlevel 7
Badge +14

@Andrea Brunetti 

TBD if these will help:

 

Userlevel 1

Hi @Troy Tessalone , thank you for sharing these articles.
I think that I need something like “How to Hydrate a Fiel with a GET Request”.
The output obtained is exactly what i need! Because in the next step I need to attach these files to my gmail.

The problem is that I don’t have an url to retrive the file, but I have the base64 file already in my json (in my POST webhook).

Perhaps the only way to build this backend process is to split data loading from file loading.
I could make a call to a webhook that saves the file to gdrive, get the url of the file and include it in my json for the next webhook post.

The problem at this point would be to retrive the url file in gdrive, because webhooks (if I'm not mistaken) does not give the possibility of replying with a custom http response.

Do you have other ideas? 😭

Thank you very much
Andrea

Userlevel 1

I have tried to create an async process (like described before).
I have create a zap that receive a multipart/form-data post with a single file and update it in gdrive.

Then I've tried to modify my first zap for accepting json data (without base64 file, but with the unique id that i used as part of filename in the previous zap). If I search the file in gdrive, i find it.
This works if I upload a single file, but if I upload 2 file with unique id in the filename, gdrive find only the last, then I can attach at the mail only one file. 

Probably, Zapier can't manage this particular process.
Multiple data and file, can't be managed in a single zap.

 

Userlevel 7
Badge +14

@Andrea Brunetti 

It would likely involve a Code step to handle the Base64 data conversion.

 

Or you can use the Looping app to handle 1+ items: https://zapier.com/apps/looping/help

 

Then you may need to aggregate the data:

 

Userlevel 1

Hi @Troy Tessalone , thanks for your suggetions.

I have changed my strategy.

Now my script sends each single document to a Zap that creates a folder in Gdrive and update the file.

Then my script call the second zap sending data and reference of the gdrive folder.

In the email now I send the link to that gdrive folder.

It works fine.

 

Thank you for your time

Have a nice day

 

Andrea