0

I'm developing an Angular & Firebase app and I want to avoid having any backend outside of Firebase. Documents don't recommend storing images in Firebase, so I wanted to use Trasnloadit to save images. Is there a way to use Transloadit securely to send images directly from my Angular app or Firebase instance?

ajbraus
  • 2,909
  • 3
  • 31
  • 45
  • 1
    It looks like transloadit has a jQuery plugin: https://transloadit.com/docs/#our-jquery-plugin. If you can get the URL from that upload, you could store it in Firebase. – Frank van Puffelen Sep 17 '15 at 21:42
  • I'm doing something similar with both Firebase and looking into Transloadit. Yes, it appears you can process images and video with Transloadit without a backend, however if you're going to be completely secure you need to use https://transloadit.com/docs/api-docs/#signature-authentication which requires a signature. I'm curious as to how one might get this signature client-side as well. – Cameron Nov 24 '15 at 19:51
  • Just a comment the jquery plugin has been deprecated. For client side integration with Transloadit the recommended tool is Uppy with the Transloadit plugin or Robodog. https://uppy.io/docs/robodog/ – Set of Theseus Mar 02 '21 at 14:26

1 Answers1

0

While, this is an old question it is still worth exploring a possible solution to your question. If you're looking to send data securely with Transloadit you may want to look into creating a signature. Signature authentication works both ways - so you can double-check with Firebase that the source of the file is authenticated, however you need to make sure that you perform this server side. Luckily, Transloadit makes it simple to generate a signature:

  1. You want to make an object to replace the params field in your assembly
{
  "auth": {
    "key": "23c96d084c744219a2ce156772ec3211",
    "expires": "2021/01/31 16:53:14+00:00",
    // This could also contain your template ID if you're not defining your steps here
  },
  "steps": { ... }
}
  1. Next, you need to convert this into JSON, for this you can use JSON.stringify()|
  2. Now, to make this a RFC 2104-compliant HMAC hex signature - you can use a library such as CryptoJS
signature = CryptoJS.HmacSHA256(message, auth_secret).toString(CryptoJS.enc.HEX);

Next, for sending the file to a GCS - you can use the /google/store robot. So for example, you could add this snippet to your template:

"exported": {
  "use": [
    ":original",
    ...
  ],
  "robot": "/google/store",
  "credentials": "YOUR_GOOGLE_CREDENTIALS"
}

This robot also has the property acl - which determines the permissions that the file has. By default it's public-read but you have several options including: authenticated-read, bucket-owner-full-control, private, project-private.

MSSNG
  • 36
  • 4