I'm trying to write a function that:
- Compresses an image on the local disk and puts it into a cache folder. (using sharp.js)
- Uploads the image to a location in firebase storage.
- Uploads the compressed thumbnail of the image to a different location in firebase storage.
The code for the function(s) that do this is below:
// appends a filename to the end of a storageReference
export function addFilename(filename: string, reference: StorageReference) {
return ref(storage, `${reference}/${path.basename(filename)}`);
}
// -- file uploading
export async function uploadFromDisk(
filePath: string,
destination: StorageReference,
metadata?: UploadMetadata,
) {
console.log("initiating upload - " + JSON.stringify(filePath));
const taskPromise: Promise<UploadTaskSnapshot> = new Promise(((resolve, reject) => {
const task = uploadBytesResumable(
addFilename(filePath, destination),
fs.readFileSync(filePath),
metadata
);
task.on("state_changed", (snapshot) => {
if (snapshot.state == "running") {
console.log(`File ${filePath} status: ${(snapshot.bytesTransferred / snapshot.totalBytes * 100).toPrecision(2)}%`);
}
if (snapshot.bytesTransferred >= snapshot.totalBytes ) {
printCyan(`File ${filePath} available @ ${snapshot.ref.bucket}/${snapshot.ref.fullPath}`);
resolve(snapshot);
}
if (snapshot.state == "error") {
reject(new Error("There was an error uploading file " + filePath));
}
});
}));
return taskPromise;
}
export async function uploadGalleryImage(
imagePath: string,
site: string,
gallery?: string,
) {
const metadata = {
name: path.basename(imagePath),
contentType: path.extname(imagePath) == ".jpg" ? "image/jpeg" : "image/png"
};
const imageFolder = `galleries/${gallery}/full`;
const thumbPath = (await compressImages([imagePath]))[0];
const thumbFolder = `galleries/${gallery}/thumbs`;
const results: UploadResult[] = [];
const imageResult = await uploadFromDisk(
imagePath,
getAssetFolder(site, imageFolder),
metadata,
);
const thumbResult = await uploadFromDisk(
thumbPath,
getAssetFolder(site, thumbFolder),
metadata,
);
results.push(imageResult);
results.push(thumbResult);
return results;
}
For some reason, step (1) and (2) work, but in every case the function hangs on step (3). As you can see above I've added a lot of console messages and .catch clauses to try to diagnose the problem, but firebase doesn't even throw an error for the images it refuses to upload. They simply stay at 0.0% - sample console output is included below.
File images/bulksplash-charleingracia--Ux5mdMJNEA.jpg status: 77%
// original image is uploading fine
...
File images/bulksplash-charleingracia--Ux5mdMJNEA.jpg status: 1.0e+2%
File images/bulksplash-charleingracia--Ux5mdMJNEA.jpg available ...
// fully uploaded original image
...
File thumbs/bulksplash-charleingracia--Ux5mdMJNEA.jpg status: 0.0%
// stuck at 0.0%
File images/bulksplash-davieees-uJDWga_IOck.jpg status: 35%
// the other, previously initiated image uploads are chugging along just fine
File images/bulksplash-ferminrp-a1dpvJv45To.jpg status: 79%
File images/bulksplash-aliciasteels-mrB45cHDsrM.jpg status: 55%
If firebase could at least throw an error or change the snapshot state to "error" for these files, I could get at the problem. Because it doesn't I really don't even know where to start troubleshooting. Some ideas or where to start - or pointing out that there is an obvious error that I just happened to miss - would be appreciated.