I have an app that allows you to upload images. The images are stored using Firebase Storage. Then, once uploaded I have a Firebase Cloud Function that can turn that into a thumbnail. The problem with this is that it takes a long time to wake up the cloud function, the first time, and generating that thumbnail. Not to mention the download of the thumbnail payload for the client. It's not unrealistic that the whole thumbnail generation plus download can take multiple (single digit) seconds. But you don't want to have the user sit and wait that long. My solution is to display the uploaded file in a <img> tag using URL.createObjectURL().
The following code is most pseudo-code but should look familiar if you're used to how Firebase and React/Preact works. Here's the FileUpload component:
interface Props {
onUploaded: ({ file, filePath }: { file: File; filePath: string }) => void;
onSaved?: () => void;
}
function FileUpload({
onSaved,
onUploaded,
}: Props) => {
const [file, setFile] = useState<File | null>(null);
useEffect(() => {
if (file) {
const metadata = {
contentType: file.type,
};
const filePath = getImageFullPath(prefix, item ? item.id : list.id, file);
const storageRef = storage.ref();
uploadTask = storageRef.child(filePath).put(file, metadata);
uploadTask.on(
"state_changed",
(snapshot) => {
},
(error) => {
setUploadError(error);
},
() => {
onUploaded({ file, filePath });
db.collection("pictures")
.add({ filePath })
.then(() => { onSaved() })
}
}
}, [file])
return (
<input
type="file"
accept="image/jpeg, image/png"
onInput={(event) => {
if (event.target.files) {
const file = event.target.files[0];
validateFile(file);
setFile(file);
}
}}
/>
);
}
The important "trick" is that we call back after the storage is complete by sending the filePath and the file back to whatever component triggered this component. Now, you can know, in the parent component, that there's going to soon be an image reference with a file path (filePath) that refers to that File object.
Here's a rough version of how I use this <FileUpload> component:
function Images() {
const [uploadedFiles, setUploadedFiles] = useState<Map<string, File>>(
new Map()
);
return (<div>
<FileUpload
onUploaded={({ file, filePath }: { file: File; filePath: string }) => {
const newMap: Map<string, File> = new Map(uploadedFiles);
newMap.set(filePath, file);
setUploadedFiles(newMap);
}}
/>
<ListUploadedPictures uploadedFiles={uploadedFiles}/>
</div>
);
}
function ListUploadedPictures({ uploadedFiles}: {uploadedFiles: Map<string, File>}) {
// Imagine some Firebase Firestore subscriber here
// that watches for uploaded pictures.
return <div>
{pictures.map(picture => (
<Picture picture={picture} uploadedFiles={uploadedFiles} />
))}
</div>
}
function Picture({
uploadedFiles,
picture,
}: {
uploadedFiles: Map<string, File>;
picture: {
filePath: string;
}
}) {
const thumbnailURL = getThumbnailURL(filePath, 500);
const [loaded, setLoaded] = useState(false);
useEffect(() => {
const preloadImg = new Image();
preloadImg.src = thumbnailURL;
const callback = () => {
if (mounted) {
setLoaded(true);
}
};
if (preloadImg.decode) {
preloadImg.decode().then(callback, callback);
} else {
preloadImg.onload = callback;
}
return () => {
mounted = false;
};
}, [thumbnailURL]);
return <img
style={{
width: 500,
height: 500,
"object-fit": "cover",
}}
src={
loaded
? thumbnailURL
: file
? URL.createObjectURL(file)
: PLACEHOLDER_IMAGE
}
/>
}
Phew! That was a lot of code. Sorry about that. But still, this is just a summary of the real application code.
The point is that; I send the File object back to the parent component immediately after having uploaded it to Firebase Cloud Storage. Then, having access to that as a File object, I can use that as the thumbnail while I wait for the real thumbnail to come in. Now, it doesn't matter that it takes 1-2 seconds to wake up the cloud function and 1-2 seconds to perform the thumbnail creation, and then 0.1-2 seconds to download the thumbnail. All the while this is happening you're looking at the File object that was uploaded. Visually, the user doesn't even notice the difference. If you refresh the page, that temporary in-memory uploadedFiles (Map instance) is empty so you're now relying on the loading of the thumbnail which should hopefully, at this point, be stored in the browser's native HTTP cache.
The other important part of the trick is that we're using const preloadImg = new Image() for loading the thumbnail. And by relying on preloadImage.decode ? preloadImage.decode().then(...) : preload.onload = ... we can be informed only when the thumbnail has been successfully created and successfully downloaded to make the swap.
