1.0.0 • Published 2 years ago
remix-firebase-storage-file-handler v1.0.0
remix-firebase-storage-file-handler
Store files on Firebase Storage with Remix.
Note: Uploaded files are made publicly readable.
Installation
npm i remix-firebase-storage-file-handler --save
If you haven't already done so, ensure you setup and configure your Firebase project with the Firebase Admin SDK.
npm install firebase-admin --save
import { initializeApp } from "firebase-admin/app";
initializeApp({
credential: cert(require("path/to/serviceAccountKey.json")),
storageBucket: "my-application.appspot.com",
});
Usage
First, ensure your page sends the multipart/form-data
encoding type:
<Form method="post" encType="multipart/form-data">
<input type="file" name="my-file-input" />
</Form>
Within your Action, provide the handler to the parseMultipartFormData
function with the
createFirebaseStorageFileHandler
function:
import { unstable_parseMultipartFormData as parseMultipartFormData } from "remix";
import { getStorage } from "firebase-admin/storage";
import createFirebaseStorageFileHandler from "remix-firebase-storage-file-handler";
export const action: ActionFunction = async ({ request }) => {
const formData = await parseMultipartFormData(
request,
createFirebaseStorageFileHandler({
// Required: provide a reference to a file
file({ filename }) {
return getStorage().bucket().file(filename);
},
})
);
const url = formData.get("my-file-input");
// Do something with the URL!
};
Filtering
You can optionally filter what files are uploaded by providing a filter
function:
createFirebaseStorageFileHandler({
filter({ name }) {
if (name !== 'my-file-input') {
return;
}
},
// ...
})
1.0.0
2 years ago