We Keep Coding

How to update page after fetch POST request

I am creating a simple chat room and am expecting the page to update when I enter a message into a text box and press enter.
The room is receiving messages from a URL, but I have to reload the page to see my new message whenever I post it.
How do I display these messages without having to reload the page?
fetch GET:
fetch('https://curriculum-api.codesmith.io/messages', { 'method': 'GET' })
.then(response => response.json())
.then(data => addText(data))
fetch POST:
textBox.addEventListener('keydown', (e) => {
if (e.code === 'Enter') {
const func = async function postReply() {
const currentDate = new Date()
const message = textBox.value;
textBox.value = ''
return await fetch('https://curriculum-api.codesmith.io/messages',
{
method: 'POST',
body: JSON.stringify({
'message': message,
'created_at': currentDate.toUTCString(),
'created_by': 'Nate & Dewey'
})
})
.then(response => response.json())
// .then(json => addText(json.message))
}
func()
// $('#result').load('https://curriculum-api.codesmith.io/messages');
}
})
addText() function (used by GET)
function addText(data) {
let messageNum = 0
let current = data[messageNum]
while (current) {
const text = document.createElement('div');
border.appendChild(text);
text.innerText = current.message + ' (' + current.created_by + ')'
messageNum++
current = data[messageNum]
}
}

Firebase multiple image upload then call function

I am successfully batch uploading images to firebase, but for some reason, my data is not being uploaded afterwards.
I can confirm though, it does work perfectly ONLY on a fresh build for the first time? Super weird.
I am not sure what is going wrong as I am able to receive the urls fine after the fact.
Here is my function:
onUploadImages = () => {
let photo =
Platform.OS === 'ios'
? this.state.images.map(img => img.uri.replace('file://', ''))
: this.state.images.map(img => img.uri);
Promise.all(
photo.map((image, index) => {
const sessionId = new Date().getTime();
const Blob = RNFetchBlob.polyfill.Blob;
const fs = RNFetchBlob.fs;
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest;
window.Blob = Blob;
let uploadBlob = null;
let mime = 'image/jpg';
const imageRef = firebase
.storage()
.ref('brandProducts/')
.child(`${this.props.userData.uid}`)
.child(`${sessionId}-${index}`);
return fs
.readFile(image, '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(results => {
//results is, here, [ urlFromFirst, urlFronSecond, ...]
const urls = {...this.state.urls};
results.forEach((r, i) => (urls[i] = r));
const postObj = {
...this.state.postObj,
urls,
};
//THIS WONT RUN (BUT I AM ABLE TO LOG PROPER postObj) here
return firebase
.firestore()
.collection('brandProducts')
.add(postObj);
})
.then(docRef => {
Actions.categories();
console.log('Document written with ID: ', docRef.id);
})
.catch(error => {
console.error(error);
});
};
Here is my postObj:
postObj: {
title: 'A Title',
price: 20,
description: 'Some text here',
webLink: 'a url as a string',
user: 'Username',
urls: {
'0': 'downloadUrl1',
'1': 'downloadUrl2',
'2': 'downloadUrl3',
}
},
I would appreciate any help i can get figuring out where this is going wrong. Cheers!

Firebase Firestore writes only working on the first attempt of a fresh build

I've been building an app with Firebase & React Native primarily using Firestore. I started to use Firestore and its been great, but for some reason when writing to Firestore, it is only working on the first attempt (when i remove the app, rebuild, and perform my write).
I tried to do the exact same thing except write to Firestore and everything works as expected.
I am also receiving no error!
Here is what I am doing:
export const addBrandProduct = (postObj) => {
return () => {
firebase
.firestore()
.collection('brandProducts')
.add(postObj)
.then((docRef) => {
console.log("Document written with ID: ", docRef.id);
Actions.categories();
})
.catch(error => {
console.error("Error adding document: ", error);
});
};
};
For more of a reference, here is my component code that calls addBrandProduct()
onUploadImages = () => {
let photo =
Platform.OS === 'ios'
? this.state.images.map(img => img.uri.replace('file://', ''))
: this.state.images.map(img => img.uri);
photo.forEach((image, i) => {
const sessionId = new Date().getTime();
const Blob = RNFetchBlob.polyfill.Blob;
const fs = RNFetchBlob.fs;
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest;
window.Blob = Blob;
let uploadBlob = null;
let mime = 'image/jpg';
const imageRef = firebase
.storage()
.ref('brandProducts/')
.child(`${this.props.userData.uid}`)
.child(`${sessionId}-${i}`);
fs.readFile(image, '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 => {
//if this is the last uploaded image, post data to db
if (i === this.state.images.length - 1) {
const urls = {
...this.state.urls,
[i]: url,
};
const postObj = {
...this.state.postObj,
urls: urls,
};
this.props.addBrandProduct(postObj);
} else {
this.setState({
urls: {
...this.state.urls,
[i]: url,
},
});
}
})
.catch(error => {
console.log(error);
});
});
};
Basically, I am uploading a maximum of 3 images along with some data for it. In order to ensure I am uploading them all prior to adding the post data (writing to firestore) I am using a forEach and on the last upload, when it completes, I am calling the action to write the post data.

Edition
Hum addBrandProduct is a function that create another function.
So when you call this.props.addBrandProduct(postObj) nothing is sent to firestore, you just create a new function that should be called.
Maybe you can go out this stuff and call firebase directly, ensuring that everything works and then go back to the redux way if you still want to use it. I also make it parallelized instead of sequentials. Hope it help, hard to find the real problem when it can come from anywhere.
onUploadImages = () => {
let photo = Platform.OS === 'ios'
? this.state.images.map(img => img.uri.replace('file://', ''))
: this.state.images.map(img => img.uri);
Promise.all( photo.map( image => {
const sessionId = new Date().getTime();
const Blob = RNFetchBlob.polyfill.Blob;
//This is kind useless
//const fs = RNFetchBlob.fs;
//This is not used
//window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest;
//This is not adviced
//window.Blob = Blob;
let uploadBlob = null;
let mime = 'image/jpg';
const imageRef = firebase
.storage()
.ref('brandProducts/')
.child(`${this.props.userData.uid}`)
.child(`${sessionId}-${i}`);
return fs.readFile(image, 'base64')
.then(data => {
return RNFetchBlob.polyfill.Blob.build(data, {type: `${mime};BASE64`});
})
.then(blob => {
uploadBlob = blob;
return imageRef.put(blob, {contentType: mime});
})
.then(() => {
uploadBlob.close();
return imageRef.getDownloadURL();
});
))
.then( results => {
//results is, here, [ urlFromFirst, urlFronSecond, ...]
const urls = { ...this.state.urls};
results.forEach( (r, i) => urls[i] = r );
const postObj = {
...this.state.postObj,
urls
};
return firebase
.firestore()
.collection('brandProducts')
.add(postObj)
})
.then( docRef => {
console.log("Document written with ID: ", docRef.id);
})
.catch(error => {
console.error(error);
});
};

Take user image as argument, then send message with same image with Discord.JS

Let's just get this started off with.
I've been looking around Google trying to find a guide on how to take images as arguments and then sending that same image with the message the user provided.
I'm making an announcement command.
Right now, my command only takes text as input, not files/images.
Here's my announce command:
module.exports = {
name: "afv!announce",
description: "announce something",
execute(msg, args, bot) {
if (msg.member.roles.cache.find((r) => r.name === "Bot Perms")) {
const prevmsg = msg;
const text = args.join().replace(/,/g, " ");
msg
.reply(
"Would you like to do `#here` :shushing_face: or `#everyone` :loudspeaker:?\nIf you would like to ping something else, react with :person_shrugging:. (you will have to ping it yourself, sorry)\n*react with :x: to cancel*"
)
.then((msg) => {
const areusure = msg;
msg
.react("🤫")
.then(() => msg.react("📢"))
.then(() => msg.react("🤷"))
.then(() => msg.react("❌"));
const filter = (reaction, user) => {
return (
["🤫", "📢", "🤷", "❌"].includes(reaction.emoji.name) &&
user.id === prevmsg.author.id
);
};
msg
.awaitReactions(filter, { max: 1, time: 60000, errors: ["time"] })
.then((collected) => {
const reaction = collected.first();
if (reaction.emoji.name === "🤫") {
areusure.delete();
prevmsg
.reply("<a:AFVloading:748218375909539923> Give me a sec...")
.then((msg) => {
bot.channels.cache
.get("696135322240548874")
.send("#here\n\n" + text);
msg.edit("<a:AFVdone:748218438551601233> Done!");
});
} else if (reaction.emoji.name === "📢") {
areusure.delete();
prevmsg
.reply("<a:AFVloading:748218375909539923> Give me a sec...")
.then((msg) => {
bot.channels.cache
.get("696135322240548874")
.send("#everyone\n\n" + text);
msg.edit("<a:AFVdone:748218438551601233> Done!");
});
} else if (reaction.emoji.name === "🤷") {
areusure.delete();
prevmsg
.reply("<a:AFVloading:748218375909539923> Give me a sec...")
.then((msg) => {
bot.channels.cache
.get("696135322240548874")
.send(
"Important: https://afv.page.link/announcement\n\n" +
text
);
msg.edit("<a:AFVdone:748218438551601233> Done!");
});
} else if (reaction.emoji.name === "❌") {
areusure.delete();
prevmsg.reply("Cancelled.");
}
})
.catch((collected) => {
msg.delete();
prevmsg.reply("you didn't react with any of the emojis above.");
});
});
}
},
};

Message has a property called attachments, which contains all of the attachments in the message. (A image uploaded by the user is counted as an attachment, however, a URL to an image, is not.)
Here's an example:
client.on('message', (message) => {
if (message.author.bot) return false;
if (message.attachments.size == 0)
return message.channel.send('No attachments in this message.');
const AnnouncementChannel = new Discord.TextChannel(); // This shall be announcement channel / the channel you want to send the embed to.
const Embed = new Discord.MessageEmbed();
Embed.setTitle('Hey!');
Embed.setDescription('This is an announcement.');
Embed.setImage(message.attachments.first().url);
AnnouncementChannel.send(Embed);
});

Avatar
To use images you can use this function :
message.author.displayAvatarURL(
{ dynamic: true } /* In case the user avatar is animated we make it dynamic*/
);
Then it will return a link you can use for an embed thumbnail or image. If you want to use it in an embed
let link = message.author.displayAvatarURL({ dynamic: true });
const embed = new Discord.MessageEmbed().setThumbnail(link);
Use Image Links
If you want to use an image link you'll have to transform it into a discord attachement.
const args = message.content.split(' ').slice(1);
const attach = new Discord.Attachement(args.join(' '), 'image_name.png');
message.channel.send(attach);
Hope I helped you. If not you can still search in the discord.js guide ^^
Not sure where the image link is
If you don't really know where the image link is in the message content you can separate it (you already did with arguments) and use a forEach function :
const args = message.content.split(' ').slice(1);
// a function to see if it's an url
function isvalidurl(string) {
try {
const a = new URL(string);
} catch (err) {
return false;
}
return true;
}
// check the function for each argument
args.forEach((a) => {
if (isvalidurl(a)) link = a;
});
if (link) {
// code
} else {
// code
}

How To Save Object Of Images To Real-time Firebase

I want to save a bunch of Images to Firebase storage and it's saved very well "as known image by image " in Firebase Storage, so after I saved it I want to get all the Uri and put it into Real-time DB as an Array-object like this
but I'm tried here in this code and also save one image just like this!
So how to handle these to Get all the images in the Storage and then put them into an array in DB?
// Open Gallery
pickMultiple = () => {
ImagePicker.openPicker({
multiple: true
})
.then(images => {
this.setState({
images: images.map(i => {
return {
uri: i.path,
width: i.width,
height: i.height,
mime: i.mime
};
})
});
})
.catch(e => console.log(e));
};
_SaveImagesToFirebase = () => {
const uid = firebase.auth().currentUser.uid; // Provider
const { images } = this.state;
const provider = firebase.database().ref(`providers/${uid}`);
images.map(image => {
let file = image.uri;
const path = "Img_" + Math.floor(Math.random() * 1500 + ".jpg");
const ref = firebase
.storage()
.ref(`provider/${uid}/ProviderGalary/${path}`);
let imagesArray = [];
ref
.put(file)
.then(() => {
ref
.getDownloadURL()
.then(
images => {
console.log(images);
imagesArray.push({
uri: images
});
},
error => console.log(error)
)
.then(() => {
provider
.update({
Images: imagesArray
})
.then(() => console.log("done with imgs"));
});
console.log("#inside", imagesArray);
})
.then(() => {
setTimeout(() => {
this.props.navigation.navigate("Home");
}, 2000);
});
console.log("#OUT", imagesArray);
});
};

UH My bad, I just define imagesArray inside map() it should be outside! like this,
_SaveImagesToFirebase = () => {
const uid = firebase.auth().currentUser.uid; // Provider
const { images } = this.state;
const provider = firebase.database().ref(`providers/${uid}`);
=> let imagesArray = [];
images.map(image => {
let file = image.uri;
const path = "Img_" + Math.floor(Math.random() * 1500 + ".jpg");
const ref = firebase
.storage()
.ref(`provider/${uid}/ProviderGalary/${path}`);
ref
.put(file)
.then(() => {
ref
.getDownloadURL()
.then(
images => {
console.log(images);
imagesArray.push({
uri: images
});
},
error => console.log(error)
)
.then(() => {
provider
.update({
Images: imagesArray
})
.then(() => console.log("done with imgs"));
});
})
.then(() => {
setTimeout(() => {
this.props.navigation.navigate("Home");
}, 2000);
});
});
};