We Keep Coding

How to call multiple Airtable bases and fields at the same time with the same script

Im making a script that will download images from an Airtable to a folder. this script calls a specific field where the images url are stored and download the images. i have managed to download the images from one base. how can i modify my code to download images from multiple bases
this is what i have so far
const download = require('image-downloader');
const fs = require('fs');
const path = require('path');
``
require('dotenv').config();
const api_key = process.env.AIRTABLE_APIKEY;
const base1_id = process.env.BASEID;
const base2_id = process.env.BASEID2
const base1_table = process.env.TABLE1;
const base2_table = process.env.TABLE2;
const base1_table_imagefield = process.env.FIELD1;
const base2_table_imagefield= process.env.FIELD2;
var base = new Airtable({ apiKey: api_key }).base(base1_id );
let table_names = [base1_table, base2_table];
let field_names = [base1_table_imagefield, base2_table_imagefield]
// this create an image folder in the app root directory
fs.mkdir(path.join(__dirname, 'images/'), { recursive: true }, (err) => {
if (err) {
return console.error(err);
}
console.log('Directory created successfully!');
});
// get records and download the images to the temp images folder created
const table = base( base1_table);
const getRecords = async() => {
// try {
table.select({
maxRecords: 10,
view: "Website Export",
}).eachPage(function page(records, fetchNextPage) {
// This function (`page`) will get called for each page of records.
records.forEach((record) => {
let data = (record.get(base1_table_imagefield));
let lnk = "";
if (data !== undefined) {
lnk = data.substring(data.indexOf('(h') + 1, data.length - 1);
} else {
return;
}
console.log(lnk);
//save images to thew folder we created
const newFolder = {
url: lnk,
dest: '../../images', // will be saved to /path/to/dest/image.jpg
};
download.image(newFolder)
.then(({ filename }) => {
console.log('Saved to', filename); // saved to /path/to/dest/image.jpg
})
.catch((err) => console.error(err))
});
// To fetch the next page of records, call `fetchNextPage`.
// If there are more records, `page` will get called again.
// If there are no more records, `done` will get called.
fetchNextPage();
}, function done(err) {
if (err) { console.error(err); return; }
});
};
getRecords();
this code works well and calls table1 prints the images from the image field into the newly created folder called "images". how can i make this code work for 2 or more bases and fields.

how can I store firebase storage image URL in Realtime database using JavaScript

This code is when uploading the image store in firebase storage.
I want this image URL store in the firebase real-time database.
const ref = firebase.storage().ref()
const date = new Date();
const name = date.toLocaleTimeString() + '-' + file.name
const metadata = {
contentType:file.type
}
const task = ref.child(name).put(file,metadata)
task
.then(snapshot => snapshot.ref.getDownloadURL())
.then(url => {
const image = document.querySelector('#imageff')
image.src = url
})

you can try executing the following function:
const ref = firebase.storage().ref()
const date = new Date();
const name = date.toLocaleTimeString() + '-' + file.name
const metadata = {
contentType:file.type
}
const task = ref.child(name).put(file,metadata)
task
.then(snapshot => snapshot.ref.getDownloadURL())
.then((url) => {
const image = document.querySelector('#imageff')
image.src = url
//Add this URL to Firebase Realtime Database
firebase.database().ref(`/path/to/location/in/db`).set({
imageUrl: url
}).then(() => {
console.log("URL added in database successfully.")
}).catch(e => console.log(e));
})
Make sure the path in .ref() is where you want the URL to be in. You can also add more fields along with imageUrl.
Please let me know if you need more assistance.

Images put to storage are saved as 'octet-stream' rather than image/jpeg (firebase and ReactNative)

I am using the camera(react-native-image-Picker) to take a pick and save it to storage.
Here is how I am doing it.
const saveImage = async () => {
const id = firebase.firestore().collection('food').doc().id
const storageRef = firebase.storage().ref()
const fileRef = storageRef.child(file.fileName) //name of image to store
await fileRef.put(file) //store image
firebase.firestore().collection("food").doc(id).update({
image: firebase.firestore.FieldValue.arrayUnion({
name: file.fileName,
url: await fileRef.getDownloadURL()
})
})
}
console.log(typeof file);
gives => "object"
console.log(file);
//gives =>
file = {height: 2322,
uri:"content://com.photodocumentation.imagepickerprovidlib_temp_7a0448df-1fac-4ac7-a47c-402c62ecce4c.jpg",
width: 4128,
fileName: "rn_image_picker_lib_temp_7a0448df-1fac-4ac7-a47c-402c62ecce4c.jpg",
type: "image/jpeg"}
Results:
In Firebase (storage) The image is being saved as application/octet-stream instead of image/jpeg.
The image is not shown, it says undefined when downloaded from storage.
Any help will be so appreciated.

This is how I was able to fix it:
const uploadImage = async () => {
const response = await fetch(file.uri)
const blob = await response.blob();
var ref = firebase.storage().ref().child("FolderName");
return ref.put(blob)
}

The Reference#put() method accepts a Blob, Uint8Array or ArrayBuffer. Your "file" object doesn't appear to be any of these.
Instead, we need to read the file into memory (using react-native-fs - referred to as RNFS) and then upload that data along with the required metadata. Because the file is read as base64 by RNFS, we will use Reference#putString instead as it accepts Base64 strings for uploads.
const rnfs = require('react-native-fs');
const saveImage = async () => {
const capture = /* this is your "file" object, renamed as it's not a `File` object */
const fileRef = firebase.storage().ref(capture.fileName);
const captureBase64Data = await rnfs.readFile(capture.uri, 'base64');
const uploadSnapshot = await fileRef.putString(captureBase64Data, 'base64', {
contentType: capture.type,
customMetadata: {
height: capture.height,
width: capture.width
}
});
// const id = colRef.doc().id and colRef.doc(id).update() can be replaced with just colRef.add() (colRef being a CollectionReference)
return await firebase.firestore().collection('food').add({
image: {
name: capture.fileName,
url: await fileRef.getDownloadURL()
}
});
};

Solution: Image reference in uploadBytesResumable() method
const storageRef = ref(storage,`product-images/${image.name}`);
uploadBytesResumable(storageRef,image);

Firebase cloud function storage trigger first thumbnail urls are fine then the next ones are all the same thumbnails urls as the first

I am trying to upload an image to firebase and then produce 2 thumbnails. I am able to do this with no problems. My current road block is when I write the urls to the realtime database, I am always getting the same url as the initial upload.
For example:
1st upload I get my uploaded image with the two proper thumbnails for the image
2nd upload I get my uploaded image with the two previous thumbnails (first image)
3rd upload I get my uploaded image with the first images thumbnails...
...this continues to reproduce the urls for the first upload
In my storage the correct thumbnails are being generated, but the urls are always for the first upload?
I don't know if this is a problem with the getSignedUrl() or not, really not sure whats going on here.
Here is my cloud function:
export const generateThumbs = functions.storage
.object()
.onFinalize(async object => {
const bucket = gcs.bucket(object.bucket); // The Storage object.
// console.log(object);
console.log(object.name);
const filePath = object.name; // File path in the bucket.
const fileName = filePath.split('/').pop();
const bucketDir = dirname(filePath);
const workingDir = join(tmpdir(), 'thumbs');
const tmpFilePath = join(workingDir, 'source.png');
if (fileName.includes('thumb#') || !object.contentType.includes('image')) {
console.log('exiting function');
return false;
}
// 1. ensure thumbnail dir exists
await fs.ensureDir(workingDir);
// 2. Download Sounrce fileName
await bucket.file(filePath).download({
destination: tmpFilePath
});
//3. resize the images and define an array of upload promises
const sizes = [64, 256];
const uploadPromises = sizes.map(async size => {
const thumbName = `thumb#${size}_${fileName}`;
const thumbPath = join(workingDir, thumbName);
//Resize source image
await sharp(tmpFilePath)
.resize(size, size)
.toFile(thumbPath);
//upload to gcs
return bucket.upload(thumbPath, {
destination: join(bucketDir, thumbName),
metadata: {
contentType: 'image/jpeg'
}
}).then((data) => {
const file = data[0]
// console.log(data)
file.getSignedUrl({
action: 'read',
expires: '03-17-2100'
}).then((response) => {
const url = response[0];
if (size === 64) {
// console.log('generated 64');
return admin.database().ref('profileThumbs').child(fileName).set({ thumb: url });
} else {
// console.log('generated 128');
return admin.database().ref('categories').child(fileName).child('thumb').set(url);
}
})
.catch(function (error) {
console.error(err);
return;
});
})
});
//4. Run the upload operations
await Promise.all(uploadPromises);
//5. Cleanup remove the tmp/thumbs from the filesystem
return fs.remove(workingDir);
})

Cleaned up my code and solved my problem, here is how I generated the urls and passed them to the proper URLs by accessing the users UID and postId in the file path:
export const generateThumbs = functions.storage
.object()
.onFinalize(async object => {
const fileBucket = object.bucket; // The Storage bucket that contains the file.
const filePath = object.name; // File path in the bucket.
const fileName = filePath.split('/').pop();
const userUid = filePath.split('/')[2];
const sizes = [64, 256];
const bucketDir = dirname(filePath);
console.log(userUid);
if (fileName.includes('thumb#') || !object.contentType.includes('image')) {
console.log('exiting function');
return false;
}
const bucket = gcs.bucket(fileBucket);
const tempFilePath = path.join(tmpdir(), fileName);
return bucket.file(filePath).download({
destination: tempFilePath
}).then(() => {
sizes.map(size => {
const newFileName = `thumb#${size}_${fileName}.png`
const newFileTemp = path.join(tmpdir(), newFileName);
const newFilePath = `thumbs/${newFileName}`
return sharp(tempFilePath)
.resize(size, size)
.toFile(newFileTemp, () => {
return bucket.upload(newFileTemp, {
destination: join(bucketDir, newFilePath),
metadata: {
contentType: 'image/jpeg'
}
}).then((data) => {
const file = data[0]
console.log(data)
file.getSignedUrl({
action: 'read',
expires: '03-17-2100'
}, function(err, url) {
console.log(url);
if (err) {
console.error(err);
return;
}
if (size === 64) {
return admin.database().ref('profileThumbs').child(userUid).child(fileName).set({ thumb: url });
} else {
return admin.database().ref('categories').child(fileName).child('thumb').set(url);
}
})
})
})
})
}).catch(error =>{
console.log(error);
});
})

Relation between storage and database - Firebase

I'm facing yet another issue.
I'm using firebase db to store text and firebase storage to store files. And here comes my issue.
Q: How to fetch a correct image from storage when fetching particular element from database?
Here's my attempt:
const storageRef = firebase.storage().ref('companyImages/companyImage' + 123);
^^^^^^^^^^^^ I dont have access to id yet :(
const task = storageRef.put(companyImage);
task.on('state_changed', () => {
const percentage = (snap.bytesTransferred / snap.totalBytes) * 100;
// ^^^^^^^^^^^^ not sure if i even need this
}, (err) => {
console.log(err);
}, () => {
firebase.database().ref('offers').push(values);
^^^^^^^^^^^^^^^ now I could retrieve id from it with .key but its too late
});
As you can see, first what Im doing is uploading the image and when it's succesful, Im starting to upload the data to database.
Still, it doesnt work as it is supposed to. When uploading image I have to name it with a correct id to retrieve it easily later, in components.
It may look a lil bit complex but will appreciate any kind of help. Any suggestion or hint.
Should I firstly upload data to DB and then image to the storage?

You can generate the push ID before you upload the file – you can also just save the download URL of the returned snapshot at task.snapshot.downloadURL so you don't have to retrieve the file from storage using the storage ref.
const offerRef = firebase.database().ref('offers').push();
const storageRef = firebase.storage().ref(`companyImages/${offerRef.key}`);
const task = storageRef.put(companyImage);
task.on('state_changed', (snap) => {
const percentage = (snap.bytesTransferred / snap.totalBytes) * 100;
}, (error) => {
console.log(err);
}, () => {
offerRef.set(values);
});

I would suggest using .getDownloadURL(). Then push all your uploadedfileDownloadURL's into an object or array and then store that into your database. So in the future you can access this object or array from, lets say your user/ProfilePHotos, and then in your app level code you can just use the DownloadURL as a uri links inside an image tag!
In this example I am using react-native, I upload multiple photos, save the download URL each time in an array, then set the array to firebase under the users account.
export const userVehiclePhotoUploadRequest = (photos, user, year) => dispatch => {
console.log('Inside vehiclePhotoUpload Actions', photos, user)
let referenceToUploadedPhotos = [];
return new Promise((resolve, reject) => {
photos.map(ele => {
let mime = 'application/octet-stream'
let uri = ele.uri
let uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri
let sessionId = new Date().getTime()
let uploadBlob = null
let imageRef = firebase.storage().ref('vehicleImages/' + `${user.account.uid}`).child(`${sessionId}`)
fs.readFile(uploadUri, 'base64')
.then((data) => {
return Blob.build(data, { type: `${mime};BASE64` })
})
.then((blob) => {
uploadBlob = blob
return imageRef.put(blob, { contentType: mime })
})
.then(() => {
uploadBlob.close()
return imageRef.getDownloadURL()
})
.then((url) => {
referenceToUploadedPhotos.push(url)
console.log('ARRAY OF URLS WHILE PUSHING', referenceToUploadedPhotos)
resolve(url)
})
.catch((error) => {
reject(error)
})
})
})
.then(() => {
//I did this to not go home until photos are done uploading.
let vehicles;
firebase.database().ref('users/' + user.account.uid + `/allVehicles/allVehiclesArray`).limitToFirst(1).once('value').then(function (snapshot) {
// ******** This method is straight from their docs ********
// ******** It returns whatever is found at the path xxxxx/users/user.uid ********
vehicles = snapshot.val();
}).then(() => {
console.log('ARRAY OF URLS BEFORE SETTING', referenceToUploadedPhotos)
// let lastVehicle = vehicles.length - 1;
firebase.database().ref('users/' + user.account.uid + `/allVehicles/allVehiclesArray/` + `${Object.keys(vehicles)[0]}` + `/photosReference`).set({
referenceToUploadedPhotos
}).then(() => {
dispatch(loginRequest(user.account))
})
})
})
};
And then in your code, lets say inside a map of the user's information...
{ ele.photosReference !== undefined ? dynamicAvatar = { uri: `${ele.photosReference.referenceToUploadedPhotos[0]}` } : undefined }