I tried to print the countries using US Dollar in Restcountries API (https://restcountries.com/v3.1/all). I tried but nothing shows as an output:
My code as follows
const getUSDollar = () => {
const xhr = new XMLHttpRequest();
xhr.open("GET", "https://restcountries.com/v3.1/all", true);
xhr.responseType = "json";
xhr.onload = () => {
const data = xhr.response;
const datas = data.filter((value) => {
for (var i in value.currencies.name.USD) {
if (i === "Unites States Dollar") {
return true;
}
}
}).map((value) => value.name);
console.log(datas);
}
xhr.send();
};
getUSDollar();
Please look into this.
Can you try this
xhr.onload = () => {
const data = xhr.response;
const datas = data
.filter((item) => item?.currencies?.USD?.name === "United States dollar")
.map((value) => value.name);
console.log('datas', datas);
};
As #eglease suggested, you don't need to check the name, you can just check for USD and filter the obj like this,
xhr.onload = () => {
const data = xhr.response;
const datas = data
.filter((item) => item?.currencies?.USD)
.map((value) => value.name);
console.log('datas', datas);
};
It worked for me. Try and comment whether this is what you are expected or not?
Related
I am using import { Camera } from 'expo-camera'; to take pictures. The taken picture is stored in the devicecache. so far so good.
Now I am trying to upload this taken images to Google Firebase Storage using import { getStorage, ref, uploadBytes } from "firebase/storage";
The return of doing a photo is:
{
"width":5472,
"uri":"file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540g1sm0%252Feprojstant/Camera/3689f575-d849-4e3e-b4ea-1ba40b96cf02.jpg",
"height":7296
}
Now I try to upload this like that:
const storageRef = ref(storage, 'some-child');
const file = photo.uri
uploadBytes(storageRef, file).then((snapshot) => {
console.log('Uploaded a blob or file!');
});
After a little delay, there is a file created in firebase/storage . I can open this file by an texteditor. the file includes the text undefined
The assumption is that the uri that i hand over is not the right solution. However, I'm too new to development and can't find any help for react native. do you have an idea, a link or an example? Do I first have to convert the file to a blob or base64 and if so, how?
Everytime after I post a Question, I do find the solution.
I blob the file like that:
const blob = await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onload = function () {
resolve(xhr.response);
};
xhr.onerror = function (e) {
console.log(e);
reject(new TypeError("Network request failed"));
};
xhr.responseType = "blob";
xhr.open("GET", uri, true);
xhr.send(null);
});
and uploaded this result like this:
uploadBytes(storageRef, blob).then((snapshot) => {
console.log('Uploaded a blob or file!');
});
Here is the full function for my solution:
const [hasPermission, setHasPermission] = useState(null);
const [type, setType] = useState(Camera.Constants.Type.back);
const [previewVisible, setPreviewVisible] = useState(false)
const [capturedImage, setCapturedImage] = useState(null)
let camera = Camera
const __takePicture = async () => {
if (!camera) return
const photo = await camera.takePictureAsync()
setPreviewVisible(true)
setCapturedImage(photo)
// Create a root reference
const storage = getStorage();
const uri = photo.uri
const blob = await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onload = function () {
resolve(xhr.response);
};
xhr.onerror = function (e) {
console.log(e);
reject(new TypeError("Network request failed"));
};
xhr.responseType = "blob";
xhr.open("GET", uri, true);
xhr.send(null);
});
// TODO: UUID #some-child
const storageRef = ref(storage, 'some-child');
uploadBytes(storageRef, blob).then((snapshot) => {
console.log('Uploaded a blob or file!');
});
}
useEffect(() => {
(async () => {
const { status } = await Camera.requestCameraPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);
if (hasPermission === null) {
return <View />;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
return (YOUR VIEW RENDERING HERE)
I'm trying to follow this guide to update a form field when the user change another field.
I've correctly setup my FormTypes, but I'm having trouble submitting the form in Ajax without JQuery.
I have 2 select :
const blockchain = document.getElementById('strategy_farming_blockchain');
const dapp = document.getElementById('strategy_farming_dapp');
const csrf = document.getElementById('strategy_farming__token');
The blockchain field is supposed to update the dapp field.
If I submit the whole form, it's working :
blockchain.addEventListener('change', function () {
const form = this.closest('form');
const method = form.method;
const url = form.action;
var request = new XMLHttpRequest();
request.open(method, url, true);
request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
request.onload = function () {
if (this.status >= 200 && this.status < 400) {
//Success
const html = new DOMParser().parseFromString(this.response, 'text/html');
dapp.innerHTML = html.querySelector('#strategy_farming_dapp').innerHTML;
} else {
//Error from server
console.log('Server error');
}
};
request.onerror = function () {
//Connection error
console.log('Connection error');
};
request.send(new FormData(form));
});
But I'm not supposed to submit the whole form, I'm supposed to submit only the blockchain value
I tried a lot of things, like
var formdata = new FormData(form);
formdata.delete(dapp.name);
request.send(formdata);
// It's working for a new entity, but if I'm editing one, it's not updating the dapp field...
or
var formdata = new FormData();
formdata.append(this.name, this.value);
formdata.append(csrf.name, csrf.value);
request.send(formdata);
// It's working in a NEW action, but not in an EDIT action...
or
var data = {};
data[this.name] = this.value;
request.send(data);
//or
request.send(JSON.stringify(data));
//If I dump($request->request) in the controller, it seems like there's no data...
//Or the request isn't parsed correctly, or there's something missing ?
I also tried with encodeURIComponent...
I'm out of ideas... Any ideas ? Thanks !
So I chose to use FormData and remove the dapp field.
const blockchain = document.getElementById('strategy_farming_blockchain');
const dapp = document.getElementById('strategy_farming_dapp');
blockchain.addEventListener('change', function () {
const form = this.closest('form');
const method = form.method;
const url = form.action;
var request = new XMLHttpRequest();
request.withCredentials = true;
request.open(method, url, true);
request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
request.onload = function () {
if (this.status >= 200 && this.status < 400) {
//Success
const html = new DOMParser().parseFromString(this.response, 'text/html');
dapp.innerHTML = html.querySelector('#strategy_farming_dapp').innerHTML;
} else {
//Error from server
console.log('Server error');
}
};
request.onerror = function () {
//Connection error
console.log('Connection error');
};
var formdata = new FormData(form);
formdata.set(dapp.name, "");
request.send(formdata);
});
Here's the FormType
public function buildForm(FormBuilderInterface $builder, array $options): void
{
$builder
//...
->add('blockchain', EntityType::class, [
'required' => false,
'class' => Blockchain::class,
'attr' => ['class' => 'js-select2'],
]);
$formModifier = function (FormInterface $form, Blockchain $blockchain = null) {
$dapps = null === $blockchain ? [] : $blockchain->getDapps();
$form->add('dapp', EntityType::class, [
'class' => Dapp::class,
'required' => true,
'choices' => $dapps,
'placeholder' => 'My placeholder',
'attr' => ['class' => 'js-select2'],
]);
};
$builder->addEventListener(
FormEvents::PRE_SET_DATA,
function (FormEvent $event) use ($formModifier) {
/**
* #var StrategyFarming $data
*/
$data = $event->getData();
$blockchain = $data->getDapp() ? $data->getDapp()->getBlockchain() : null;
$formModifier($event->getForm(), $blockchain);
}
);
$builder->get('blockchain')->addEventListener(
FormEvents::POST_SUBMIT,
function (FormEvent $event) use ($formModifier) {
$blockchain = $event->getForm()->getData();
$formModifier($event->getForm()->getParent(), $blockchain);
}
);
}
In order for this to work, I had to add the blockchain field to my Form's Entity, so that the Request handle the field :
/**
* Not persisted
* #var Blockchain
*/
private $blockchain;
public function getBlockchain(): ?Blockchain
{
if ($this->blockchain === null && $this->dapp !== null && $this->dapp->getBlockchain() !== $this->blockchain) {
$this->blockchain = $this->dapp->getBlockchain();
}
return $this->blockchain;
}
public function setBlockchain(?Blockchain $blockchain): self
{
$this->blockchain = $blockchain;
return $this;
}
I'm trying to upload(send) a PDF to server using below code snippet:
const xhr = new XMLHttpRequest();
xhr.open("POST", "/upload");
xhr.onload = (e) => {
const response = JSON.parse(xhr.response);
console.log(response);
};
xhr.onerror = (error) => {
console.log(error);
};
xhr.ontimeout = (e) => {
console.log(e, "upload timeout");
};
const formData = new FormData();
formData.append("fileToUpload", {
uri: fileToUpload.uri,
type: `*/*`,
name: fileToUpload.name,
});
xhr.send(formData);
if (xhr.upload) {
xhr.upload.onprogress = ({ total, loaded }) => {
const uploadProgress = loaded / total;
console.log(uploadProgress);
};
}
In response, I'm receiving following error:
Event {
"isTrusted": false,
}
Any other approach to upload a file (pdf) to server using Expo, would also be appreciated.
Thanks
I figured out, that the actual problem was- In android while selecting a file on Android device, DocumentPicker in Expo doesn't provide the complete path to the file, you have to manage it on your own, As I did below.
import * as DocumentPicker from "expo-document-picker";
...
const [singleFile, setSingleFile] = useState(null);
const onSubmit = async () => {
try {
// upload the file
const formData = new FormData();
formData.append("fileToUpload", singleFile);
axios.defaults.headers.post["Content-Type"] =
"multipart/form-data";
const uploadResp = await axios.post(
"/upload",
formData
);
if (uploadResp.status === 200) {
// file uploaded successfully
}
} catch (error) {
}
};
const selectFile = async () => {
await DocumentPicker.getDocumentAsync({
type: "application/pdf",
copyToCacheDirectory: true,
})
.then((response) => {
if (response.type == "success") {
let { name, size, uri } = response;
// >>>>>>>>>>>>> the bug's solution <<<<<<<<<<<<<<<
if (Platform.OS === "android" && uri[0] === "/") {
uri = `file://${uri}`;
uri = uri.replace(/%/g, "%25");
}
let nameParts = name.split(".");
let fileType = nameParts[nameParts.length - 1];
setSingleFile({
name: name,
size: size,
uri: uri,
type: "application/" + fileType,
});
} else {
setSingleFile(null);
}
})
.catch((err) => {
console.error(err);
});
};
...
<TouchableOpacity activeOpacity={0.6} onPress={() => selectFile()}>
<View >
<Text >
Select File
</Text>
</View>
</TouchableOpacity>
...
I have 3 functions. One takes picture, one compresses image, one uploads an image.
Button is pressed to take picture (this works fine)
Another button is pressed to upload picture but first it runs the compress image and then uploads it but I'm hitting error of ReadableNativeMap cannot be cast to java.lang.String which does help me much. Am I not passing the values correctly?
//Take picture
const takePicture = async () => {
if (cameraRef.current) {
const options = { quality: 1, base64: true, skipProcessing: true };
const result = await cameraRef.current.takePictureAsync(options);
setImageResult(result.uri);
}
};
//compression image
const compressimagestuff = async (uncompressedImage) => {
const manipResult = ImageManipulator.manipulateAsync(
uncompressedImage,
{ compress: 0.3, format: ImageManipulator.SaveFormat.JPEG }
);
return manipResult.url;
};
// uploading it to firebase
const uploadImageAsync = async (uncompressedImage) => {
let compressedImageUrl = compressimagestuff(uncompressedImage);
const blob = await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onload = function () {
resolve(xhr.response);
};
xhr.onerror = function (e) {
console.log(e);
reject(new TypeError('Network request failed'));
};
xhr.responseType = 'blob';
xhr.open('GET', compressedImageUrl, true);
xhr.send(null);
});
const ref = firebase
.storage()
// the file that it will get saved to
.ref('Front/')
// giving it a unique name
.child(await uuid.v4())
const snapshot = await ref.put(blob);
blob.close();
return await snapshot.ref.getDownloadURL();
};
Button that is called to upload the picture taken
const uploadPreviewButton = () => (
<TouchableOpacity disabled={wasPressed} onPress={() => { uploadImageAsync(imageResult); setWasPressed(true); }} style={[styles.uploadButton, wasPressed ? { backgroundColor: 'red'} : {} ]}>
<Icon ...>
</TouchableOpacity>
);
compressimagestuff is an async function but you don't wait for it. Change this:
const uploadImageAsync = async (uncompressedImage) => {
let compressedImageUrl = compressimagestuff(uncompressedImage);
to:
const uploadImageAsync = async (uncompressedImage) => {
let compressedImageUrl = await compressimagestuff(uncompressedImage);
// ^
My method does manage to load the image from expo to firebase storage but I can't seem to get the download URL.
const uploadImage = async (uri) => {
const uniqid = () => Math.random().toString(36).substr(2, 9);
const ext = uri.split('.').pop(); // Extract image extension
const filename = `${uniqid()}.${ext}`; // Generate unique name
const response = await fetch(uri);
const blob = await response.blob();
var ref = firebase
.storage()
.ref()
.child('images/' + filename);
ref.getDownloadURL().then((url) => console.log(url));
return ref.put(blob);
};
Here is the error I get
FirebaseStorageError {
"code_": "storage/object-not-found",
"message_": "Firebase Storage: Object 'images/gebwu7tnh.jpg' does not exist.",
"name_": "FirebaseError",
"serverResponse_": "{
"error": {
"code": 404,
"message": "Not Found. Could not get object",
"status": "GET_OBJECT"
}
}"
This is what I found that helped me from researching. I did refactor my firebase to use a higher order component. Here is my firebase method.
uploadImageAsync: async (uri) => {
const uniqid = () => Math.random().toString(36).substr(2, 9);
const ext = uri.split('.').pop(); // Extract image extension
const filename = `${uniqid()}.${ext}`; // Generate unique name
const ref = firebase
.storage()
.ref()
.child('images/' + filename);
const blob = await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onload = function () {
resolve(xhr.response);
};
xhr.onerror = function (e) {
console.log(e);
reject(new TypeError('Network request failed'));
};
xhr.responseType = 'blob';
xhr.open('GET', uri, true);
xhr.send(null);
});
const snapshot = await ref.put(blob);
blob.close();
const imgUrl = await snapshot.ref.getDownloadURL();
console.log(imgUrl);
return imgUrl;
},
};
Here is how I implemented it in my component
const setImage = async (uri) => {
try {
return await firebase.uploadImageAsync(uri);
} catch (error) {
console.log(error);
}
};