Currently I am able to fetch a specific picture knowing its title and location in the storage, but I want to be able to show all pictures in one folder inside my storage knowing the location of that storage folder but not the content titles.
I have tried using the below code (projectID is the folder which I need to show all the elements of) but it doesn't seem to work. I am new to javascript so I apologize for the wrong function call of .once.
const childRef = storageRefer.child(`${projectID}`);
childRef.once("value", function(snapshot) {
snapshot.forEach(function(child) {
child.getDownloadURL().then(function(url) {
console.log(url);
});
});
});
this code should be able to log the url of all the images but all I get is an error about the .once function. If anyone knows what I am doing wrong or a better method in getting all the images in one folder inside my storage that would be super helpful, thanks!
Edit:
Looking back at this I realized I could store the location of the images into a database for them as I can easily iterate through a database without knowing what is inside and call to storage to get the image, but that seems sloppy?
There currently is no API call in Firebase Storage to list all files in a folder. If you need such functionality, you should store the metadata of the files (such as the download URLs) in a place where you can list them. The Firebase Firestore is perfect for this and allows you to also easily share the URLs with others.
var listRef = firebase.storage().ref().child('profiles/');
listRef.listAll().then(function(res){
res.items.forEach(function(itemRef){
itemRef.getDownloadURL().then(function (link) {
console.log(link);
})
})
})
}
This function brings all photos saved in the storage "Profile"
I hope it works for you.
#Shodmoth Check out this new firebase link (https://firebase.google.com/docs/storage/web/list-files) for how to list all the files in a folder.
// Create a reference under which you want to list
var listRef = storageRef.child('files/uid');
// Find all the prefixes and items.
listRef.listAll().then(function(res) {
res.prefixes.forEach(function(folderRef) {
console.log(folderRef)
});
res.items.forEach(function(itemRef) {
console.log(itemRef) //can call .getDownloadURL() on each itemRef
});
}).catch(function(error) {
// Uh-oh, an error occurred!
});
Related
I have a bulk amount of data in CSV format. I am able to upload that data with python by converting them to the dictionary (dict) with loop. the whole data is getting uploaded.
but now I want to upload bulk data to firebase and images to storage and I want to link between each document and image because i am working on e-commerce react app. so that I can retrieve documents along with images.
which is a good way to do this? should I do this with javascript or python?
I uploaded data manually to firebase by importing from there but again I am unable to upload bulk images to storage and also unable to create references between them. please give me a source where I can find this solution
This is tough, because it's hard to fully understand how exactly your images and CSV's are linked, but generally if you need to link something to items stored in Firebase, you can get a link either manually (go into storage, click and item, and the 'Name' Field on the right hand side is a link), or you can get it when you upload it. So for example, I have my images stored in firebase, and a postgres database with a table storing the locations. In my API (Express), when I post the image to blob storage, I create the URL of the item, and post that as an entry in my table, as well as setting it to be the blobs name. I'll put the code here, but obviously it's a completely different architecture to your problem, so i'll try and highlight the important bits (it's also JS, not Python, sorry!):
const uploadFile = async () => {
var filename = "" + v4.v4() + ".png"; //uses the uuid library to create a unique value
const options = {
destination: filename,
resumable: true,
validation: "crc32c",
metadata: {
metadata: {
firebaseStorageDownloadTokens: v4.v4(),
},
},
};
storage
.bucket(bucketName)
.upload(localFilename, options, function (err, file) {});
pg.connect(connectionString, function (err, client, done) {
client.query(
`INSERT INTO table (image_location) VALUES ('${filename}')`, //inserts the filename we set earlier into the postgres table
function (err, result) {
done();
if (err) return console.error(err);
console.log(result.rows.length);
}
);
});
console.log(`${filename} uploaded to ${bucketName}.`);
};
Once you have a reference between the two like this, you can just get the one in the table first, then use that to pull in the other one using the location you have stored.
there is way to see the content of the FileSystem and also delete content from there?
i have data inside the expo FileSystem and i need :
look inside FileSystem because i dont know how to find this file because i work with the expo client sdk with the qr code scan and i dont understand how can i find this file there .
i want to know how to delete contents from the file system .
how can i see the sqlite database as a real table ?
this is my examle :
saveDbData = async () => {
const { data, isLoaded } = this.state;
for (let i = 0; i < data.length; i++) {
const mediaData = data[i];
const dbResult = await insertPlace(
mediaData.artist,
mediaData.image,
mediaData.title,
mediaData.url
);
console.log("SQL", `${FileSystem.documentDirectory}/SQLite/places.db`);
}
const fetchawesome = await fetchPlaces();
console.log(fetchawesome)
};
Since there are three questions from your part, I'll try to answer them one by one and provide a possible solution.
look inside FileSystem because i dont know how to find this file
because i work with the expo client sdk with the qr code scan and i
dont understand how can i find this file there .
You can access the file system using the FileSystem package from expo. Here's how you can do it. Import the package first.
import * as FileSystem from "expo-file-system";
Then you can find the URI of the file like this.
const { uri } = await FileSystem.getInfoAsync(
`${FileSystem.documentDirectory}SQLite/${"yourDB.db"}`
);
I want to know how to delete contents from the file system.
You can delete a file if you have access to its location or URI. This is how you can delete it. It returns a promise.
FileSystem.deleteAsync(fileUri)
how can I see the SQLite database as a real table?
This is a tricky part because since you're using your android phone to run the application via expo, you won't have direct access to your db. One thing you can do is to move the db to someplace else where you have access to and using the Sharing API from expo to save or send the db to yourself via email or any other way.
import * as Sharing from "expo-sharing";
let documenturi = `${FileSystem.documentDirectory}/yourDB.db`;
await FileSystem.copyAsync({
from: uri,
to: documenturi,
});
Sharing.shareAsync(documenturi);
You can make this as a function which fire's on a Button press on you can even put this in useEffect or lifecycle methods to fire up when the screen loads.
I've got a simple axios GET request that is working with Azure directline 3.0. The GET request pulls back data and shows it in the console (as seen in the picture).
The data I want to save into a variable is the conversationId. I then want to use this variable with Axios Post in another JS file to post as part of the link e.g. let URL = "https://directline.botframework.com/v3/directline/conversations/"+convID"/activities". With convID being the variable I wish to create. Right now I am manually changing the convID with the new conversation ID, but I want to create a variable so I can place it in the post javascript file so it is automatic.enter image description here
There are various ways you can solve this problem. Easiest one being, exposing the data on a shared object window.convID = convID and then accessing it wherever required.
You could also look to make singleton objects, which can be instantiated only once and hence will share it's variables across the lifespan of the application.
axios.get(/* URL */).then(res => {
window.convID = res.data.conversationId;
});
You can save that variable value in LocalStorage. Something like this:
let routeToYourApi = '/api/conversations'; // or something like this...
axios.get(routeToYourApi).then((response) => {
let conversationId = response.data.conversationId; // not sure if data object from your image is directly nested inside response that you get from server, but you get the idea...
window.localStorage.setItem("convId", conversationId);
}) // here you can fetch your conversation id
Than you can access it anywhere in your app:
let conversationId = window.localStorage.getItem("convId");
... and eventually remove it from local storage:
window.localStorage.removeItem("convId")
Hope this will help you!
I'm sort of new at Firebase and I was wondering if anyone knows how to upload multiple images to firebase at once? I am creating a website where I want to have several upload file buttons and use Javascript to have all of those images be uploaded at once to Firebase Storage under the same ID. Thank you in advance!
First, look at js FileList for an example snippet of how to allow user to select multiple images (files) for upload.
Then have a look at the firebase storage upload files documentation for an example of how to upload.
I imagine a promise.all / race condition would be the best way to handle multiple images...
Something like this should do the trick:
// set it up
firebase.storage().ref().constructor.prototype.putFiles = function(files) {
var ref = this;
return Promise.all(files.map(function(file) {
return ref.child(file.name).put(file);
}));
}
// use it!
firebase.storage().ref().putFiles(files).then(function(metadatas) {
// Get an array of file metadata
}).catch(function(error) {
// If any task fails, handle this
});
So I've been using Firebase as a database for my website (this is a web based project, using HTML, CSS and JS) and I'm running into a problem retrieving data from it.
Basically this site allows users to create a profile for a character (they can fill in the name, the characters stats etc...) and when they click submit, it'll save the values they filled out to the database.
The values are saved perfectly fine, but when I go to retrieve the data the command doesn't seem to do anything.
So in order to get the profiles, I've been trying to use this bit of code to get whatever is stored at the specified .ref(path):
var uid = firebase.auth().currentUser.uid;
var getChar = firebase.database().ref('/users/' + uid + '/chars/').orderByKey();
Which according to the Firebase docs should return a list of keys at the path that I specified in .ref(). However whenever I try to access whatever is in the var, it just gives me the string that contains a link to the database that looks like this:
https://#mydatabaseurlhere.firebaseio.com/users/uid/chars
Where #mydatabaseurlhere is the url I created on the Firebase app, and the uid is the authenticated user's ID.
I've been reading the docs, and its telling me that the above code should return a list of whatever is at the path that I specified, but so far it just gives me a link. Is there something I've been missing from the Docs that'll allow me to access whatever data is currently in the database? Because I've tried to take a snapshot using .once() to no avail either. I've also set the rules on /users/ to allow anyone to read/write to the database but I'm still not able to access the data (or maybe I am accessing, I'm just missing how to retrieve it).
Either way, I'm wondering how one can go about accessing this data, as I'm extremely confused as to why I can't seem to retrieve the data that has been successfully written to the database.
You're defining a query. But that doesn't yet retrieve the data.
To retrieve the data, you need to attach a listener. For example:
var uid = firebase.auth().currentUser.uid;
var getChar = firebase.database().ref('/users/' + uid + '/chars/').orderByKey();
getChar.on('value', function(snapshot) {
snapshot.forEach(function(child) {
console.log(child.key, child.val());
});
});