I'm facing with an issue that my files are not being uploaded to website, here is a code:
await mainPage.clickElement('locator for the element "Add logo"');
page.on('filechooser', async (fileChooser) => {
await fileChooser.setFiles('path to jpg file');
});
I'm using "#playwright/test": "^1.19.2",
why it is not working, what's wrong?
Here is a DOM:
https://i.stack.imgur.com/73Q48.png
UPD:
await mainPage.clickElement('locator for the element "Add logo"');
is a simple page.click(), just used from PageObject
You are having a race condition. I recommend using the waitForEvent function instead:
const [fileChooser] = await Promise.all([
page.waitForEvent('filechooser'),
page.click('locator for the element "Add logo"'),
]);
await fileChooser.setFiles('path to jpg file');
Related
I want to open progress dialog by the onclick event. When I click on the button, the dialog is not opened until all async methodes finished. So I want to open the dialog when it begin writing the file. someone any idea how to fix it?
Html
<buton onclick="writeFile"></button>
TS
public async writeFile() {
const dialogRef = this.dialog.open(ProgressComponent);
await this.writePage1()
await this.writePage2()
await this.writePage3()
await this.writePage4()
}
For somone that has the same issue here How I fixed it. you can use afterOpened() from the dialog to let first the dialog open and run the async methodes.
this.dialog.open(ProgressComponent).afterOpened().subscribe(() => {
await this.writePage1()
await this.writePage2()
await this.writePage3()
await this.writePage4()
});
Sample image
I'm creating a project that needs an http URL instead firebase gave me a gs URL, how can I get the HTTP URL for my uploaded PDF files?
In that image, you should see the Name of the file on the right-hand side as a hyperlink.
So long as a valid access token (bottom of that same side menu) exists, you can access it. Just make sure the URL link includes the access token on the end.
Example: ?alt=media&token=53063556-5482-4c09-bd6f-732533b3bfdb
If you wanna access the link manually, just click on the hyperlink of document name on right sidebar.(Ang-katipunan.pdf)
But, if you want to automatically pass that link into a a db doc for example,
You should try make use of getDownloadURL and pass that as a field in the firestore document(if using firestore).
Here's an example of passing a URL of a photo as a "imageURL" field.
const imageUpload = async () => {
const uri = img;
const childPath = `imgs/${Math.random().toString(36)}`; // This math random is not very imp, just to make sure its generating a random link
const resp = await fetch(uri);
const blob = await resp.blob();
const task = firebase
.storage()
.ref()
.child(childPath)
.put(blob);
const onTaskCompleted = () => {
task.snapshot.ref.getDownloadURL().then((snapshot) =>{ // this is imp
saveImage(snapshot);
})
};
const onTaskError = snapshot => {
console.log(snapshot);
};
task.on("state_changed", onTaskError, onTaskCompleted );
};
then
const saveImage = (downloadURL) => {
firebase.firestore()
.collection('allImages')
.add({
downloadURL, //this is the link
name,
})
}
Change according to your docs
Sometimes the app working well.
but I dont know why, sometimes the data from firebase give me blank screen instead of the data.
after I reopen the app it work.
for example,
one of my pages:
useEffect( () => {
const subscriber = firestore()
.collection('Trails')
.onSnapshot(querySnapshot => { //const querySnapshot = await firebase.firestore().collection('users').get();
const trails = [];
console.log('subscribe')
if (querySnapshot)
querySnapshot.forEach(async documentSnapshot => {
trails.push({
...documentSnapshot.data(),
key: documentSnapshot.id,
});
console.log("trails test", trails)
});
setTrails(trails);
setLoading(false);
});
return () => {subscriber()};
}, []);
I made useEffect to get the data from DB then show it, and same - sometimes give me blank and sometimes works well.
I want to publish the app but im not satisfying with this bug?
sorry for my English, I dont even know how to describe this problem better.
Please can anyone guide me through? maybe my useEffect not doing well?
I think you should use debugging.
React native documentation
Stackoverflow question
I think there's issue with the return in useEffect return is called when componeent unmounts. here's an example how i handle async data fetching:
...
const [data, setData] = useState([]);
const isCurrentView = useRef(true);
useEffect(() => {
if (isCurrentView.current === true) {
const asyncFetch = async () => {
const response = await fetch(...something) //here some Asynchronous Call Like(axios, fetch)
setData([...response]);
};
asyncFetch();
}
return () => {
isCurrentView.current = false;
};
}, []);
...
im not 100% sure if this is the VERY best approach, but i have seen similar code in places so i addopted this.
problem was solved:
the setTrails was under scope and it kept refreshing with empty data.
querySnapshot.forEach(async documentSnapshot => {
trails.push({
...documentSnapshot.data(),
key: documentSnapshot.id,
});
setTrails(trails); // <<<~~~~ put the set in this scope.
});
setLoading(false);
});
I am new to React Native and Firebase (Firestore) and I'm developing an app where I have to retrieve posts to my feed.
I can retrieve all data I need, but I don't know how to display the image in the frontend. The post document has a field image which is saved as an URL and stored in the Firebase storage.
Does anyone know how can I get the image displayed? I am using a to sort the data.
This is my retrieveData() and it prints the correct URL:
retrieveData() {
var that = this;
let postRef = firebase
.firestore()
.collection("posts")
.orderBy("timestamp", "desc")
.limit(10);
let allPosts = postRef
.get()
.then((snapshot) => {
snapshot.forEach((doc) => {
var post = that.state.posts;
const data = (doc.id, "=>", doc.data());
that.setState({ posts: post });
console.log(data.image);
post.push({
id: data.id,
title: data.title,
description: data.description,
expireDate: data.expireDate,
timestamp: data.timestamp,
image: data.image,
});
});
})
.catch((err) => {
console.log("Error getting documents", err);
});
}
And this is how I am calling the image in the flatlist:
<Image
source={post.image}
style={styles.postImage}
/>
Can anyone help me with that?
Thanks in advance.
Can you share the image url ? And preferred way is to store image on the firebase storage and get the downloadUrl then store that url in the firestore document.
fileref.put(file)
.then(snapshot => {
return snapshot.ref.getDownloadURL(); // Will return a promise with the download
link
})
.then(downloadURL => {
console.log(`Successfully uploaded file and got download link - ${downloadURL}`);
return downloadURL;
})
.catch(error => {
// Use to signal error if something goes wrong.
console.log(`Failed to upload file and get link - ${error}`);
});
I have two image paths in my component state
I try to upload one of the images inside of a function but get an error:
Firebase Storage: Invalid argument in 'put' at index 0: Expected Blob or file
and my function
submitImages = () => {
// Upload images to Firebase storage
let user = firebaseAuth.currentUser;
let imagesRef = storageRef.child('productImages/' + user.uid);
imagesRef.put(this.state.imageFront).then(snapshot => {
console.log('Uploaded ' + this.state.imageFront);
});
}
What should I be doing instead to get these images up to Firebase. Thanks!
What the error says is that you need to use a blob. You can use react-native-fetch-blob: https://github.com/wkh237/react-native-fetch-blob
Check out this example: https://github.com/dailydrip/react-native-firebase-storage/blob/master/src/App.js#L43-L69
I am posting my code since this was a bit frustrating for me:
To upload images to firebase.storage you need to upload the images as Blobs. If you don't know what Blobs are, don't worry: BLOB stands for Binary Large OBject.
Step 1.
npm install --save react-native-fetch-blob
Step 2.
// copy and paste this code where you will handle the file upload
import RNFetchBlob from 'react-native-fetch-blob'
const Blob = RNFetchBlob.polyfill.Blob;
const fs = RNFetchBlob.fs;
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest;
window.Blob = Blob;
Step 3.
// The uploadImage function that you are going to use:
function uploadImage(uri, mime = 'image/jpeg', name) {
return new Promise((resolve, reject) => {
let imgUri = uri; let uploadBlob = null;
const uploadUri = Platform.OS === 'ios' ? imgUri.replace('file://', '') : imgUri;
const { currentUser } = firebase.auth();
const imageRef = firebase.storage().ref(`/jobs/${currentUser.uid}`)
fs.readFile(uploadUri, 'base64')
.then(data => {
return Blob.build(data, { type: `${mime};BASE64` });
})
.then(blob => {
uploadBlob = blob;
return imageRef.put(blob, { contentType: mime, name: name });
})
.then(() => {
uploadBlob.close()
return imageRef.getDownloadURL();
})
.then(url => {
resolve(url);
})
.catch(error => {
reject(error)
})
})
}
So how do you call this function?
Pass the URI of the image as the first argument. In my case img1, img2, img3 where variables that pointed to the URIs of the images, that I wanted to upload which were on my phone. They looked something like '/Phone/Pics/imageToUpload.jpeg', etc.
As the second argument you can pass 'image/jpeg' and the last argument is the name that you want to give the image. Chose the name that you like.
But what if I have several images and want to upload them and want to handle the upload correctly. What if one upload succeeds and the other does not?
Do this then:
let imgPromises = [];
imgPromises.push(uploadImage(img1, 'image/jpeg', 'imageOne'));
imgPromises.push(uploadImage(img2, 'image/jpeg', 'imageTwo'));
imgPromises.push(uploadImage(img3, 'image/jpeg', 'imageOne'));
Promise.all(imgPromises).then(urls => {
// ALL IMAGES SUCCEEDED and you will get an array of URIS that you can save to your database for later use!
}).catch(error => {
// One OR many images failed the upload. Give feedback to someone.
})
You can use react-native-firebase to upload image to storge https://rnfirebase.io/
const storage = firebase.storage();
const sessionId = new Date().getTime();
const imageRef = storage.ref('images').child(`${sessionId}`);
return imageRef.putFile(uri);
So far this is the best method I found to upload a file/image to a Firebase Storage with React Native. This method does not use any third party libraries except for the Expo SDK.
Get the File URI of the image to upload. To do this we will need to use Expo ImagePicker. The best place to include this code block is on to a button with an onPress handler.
ImagePicker.launchImageLibraryAsync({
mediaTypes: "Images"
}).then((result)=>{
if (!result.cancelled) {
// User picked an image
const {height, width, type, uri} = result;
return uriToBlob(uri); // will follow later
}
})
Generate a BLOB from the image URI. There are a lot of third party libraries to help do this. But if you don't want to install a library, then you can use XMLHttpRequest. The React Native docs recommends we use the Fetch API, but right now we can't use it because it will throw an error that we can only fetch https:// urls, but our URI is a file://. There is a way to get pass this, but using XMLHttpRequest will make things a lot simpler.
uriToBlob = (uri) => {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onload = function() {
// return the blob
resolve(xhr.response);
};
xhr.onerror = function() {
// something went wrong
reject(new Error('uriToBlob failed'));
};
// this helps us get a blob
xhr.responseType = 'blob';
xhr.open('GET', uri, true);
xhr.send(null);
});
}
We have our BLOB, let's upload it to Firebase. This part is pretty straightforward as explained in the Firebase Docs.
uploadToFirebase = (blob) => {
return new Promise((resolve, reject)=>{
var storageRef = firebase.storage().ref();
storageRef.child('uploads/photo.jpg').put(blob, {
contentType: 'image/jpeg'
}).then((snapshot)=>{
blob.close(); // let's free up the blob
resolve(snapshot);
}).catch((error)=>{
reject(error);
});
});
}
That's it, you can now upload a file to Firebase Storage. The key part to this is getting a File URI and converting it to a BLOB. You can read more about this method here.
For some time I used the Firebase JS SDK with React Native. Using this library, as referred in this thread you need to use a library like rn-fetch-blob (react-native-fetch-blob is not maintained anymore) in order to provide a blob to Firebase Storage put() method.
Recently I started using React Native Firebase. As they say in their website "Using the native Firebase SDKs with React Native Firebase allows you to consume device SDKs which don't exist on the Firebase JS SDK".
Using React-Native-Firebase you don't need any extra library to upload images to Firebase Storage, and your code gets much cleaner:
export const uploadImage = (path, mime = 'application/octet-stream') => {
return new Promise((resolve, reject) => {
const imageRef = firebase.storage().ref('images').child('filename.jpg');
return imageRef.put(path, { contentType: mime })
.then(() => {
return imageRef.getDownloadURL();
})
.then(url => {
resolve(url);
})
.catch(error => {
reject(error);
console.log('Error uploading image: ', error);
});
});
};
if you don’t mind using cloudinary, I show how to upload and then get the uploaded url to save to firebase
https://medium.com/#ifeoluwaking24/how-to-upload-an-image-in-expo-react-native-to-firebase-using-cloudinary-24aac981c87
Also you can try it snack but make sure you add your cloud_name and upload_preset
https://snack.expo.io/#ifeking/upload-to-cloudinary