import { data } from 'react-router';
import type { ActionFunction } from 'rea';
import crypto from 'crypto';
function utcDateString(ms: number): string {
return new Date(ms)
.toISOString()
.replace(/-/g, '/')
.replace(/T/, ' ')
.replace(/\.\d+Z$/, '+00:00');
}
export const action: ActionFunction = async ({ request }) => {
// expire 1 hour from now (this must be milliseconds)
const expires = utcDateString(Date.now() + 1 * 60 * 60 * 1000);
const authKey = process.env.TRANSLOADIT_KEY;
const authSecret = process.env.TRANSLOADIT_SECRET;
const templateId = process.env.TRANSLOADIT_TEMPLATE_ID;
if (!authKey || !authSecret || !templateId) {
throw data({ error: 'Missing Transloadit credentials' }, { status: 500 });
}
const body = await request.json();
const params = JSON.stringify({
auth: {
key: authKey,
expires,
},
template_id: templateId,
fields: {
// You can use this in your template.
customValue: body.customValue,
},
// your other params like notify_url, etc.
});
const signatureBytes = crypto
.createHmac('sha384', authSecret)
.update(Buffer.from(params, 'utf-8'));
// The final signature needs the hash name in front, so
// the hashing algorithm can be updated in a backwards-compatible
// way when old algorithms become insecure.
const signature = `sha384:${signatureBytes.digest('hex')}`;
return data({ expires, signature, params });
};
import { data } from 'react-router';
import type { ActionFunction } from 'react-router';
import crypto from 'crypto';
function utcDateString(ms: number): string {
return new Date(ms)
.toISOString()
.replace(/-/g, '/')
.replace(/T/, ' ')
.replace(/\.\d+Z$/, '+00:00');
}
export const action: ActionFunction = async ({ request }) => {
// expire 1 hour from now (this must be milliseconds)
const expires = utcDateString(Date.now() + 1 * 60 * 60 * 1000);
const authKey = process.env.TRANSLOADIT_KEY;
const authSecret = process.env.TRANSLOADIT_SECRET;
const templateId = process.env.TRANSLOADIT_TEMPLATE_ID;
if (!authKey || !authSecret || !templateId) {
throw data({ error: 'Missing Transloadit credentials' }, { status: 500 });
}
const body = await request.json();
const params = JSON.stringify({
auth: {
key: authKey,
expires,
},
template_id: templateId,
fields: {
// You can use this in your template.
customValue: body.customValue,
},
// your other params like notify_url, etc.
});
const signatureBytes = crypto
.createHmac('sha384', authSecret)
.update(Buffer.from(params, 'utf-8'));
// The final signature needs the hash name in front, so
// the hashing algorithm can be updated in a backwards-compatible
// way when old algorithms become insecure.
const signature = `sha384:${signatureBytes.digest('hex')}`;
return data({ expires, signature, params });
};
On the client we want to fetch the signature and params from the server. You may
want to send values from React state along to your endpoint, for instance to add
fields which you
diff --git a/docs/remote-sources/index.html b/docs/remote-sources/index.html
index a3ecfd97f..a15e14f62 100644
--- a/docs/remote-sources/index.html
+++ b/docs/remote-sources/index.html
@@ -13,7 +13,7 @@
-
+