Develop Reference

can't produce downloadable link from firebase storage

I am developing a React native app. I am uploading a batch of images using react-native-image-crop-picker. Using the way that storing the path in an array and one by one uploading the image. but I can't produce the downloadable link for the uploaded files. I am getting 2 errors
1)Can not read property 'then' of undefined
2)when trying to get the downloadable link it cannot find the object
below is my code
AddProduct = () => {
this.setState({ loading: true })
this.setState({ disabled: true })
//-------------UUIDGenerator-------------
UUIDGenerator.getRandomUUID().then((productUid) => {
this.setState({ productUid });
() => console.log("setted state=" + this.state.productUid)
console.log("Generated UUid " + this.state.productUid)
});
//----------------------------------------
//image upload
try {
setTimeout(() => {
const fs = RNFetchBlob.fs
const uid = "flyers/" + this.state.productUid;
const imageRef = firebase.storage().ref(uid).child('abc' + ".jpg") //string "dp1.jpg"
let mime = 'image/jpg'
if (this.state.imagePath === "") {
alert("Select a Flyer")
return
}
//-----------------Checking Inputs-----------
if (this.state.title.length < 1) {
alert("Enter a Title");
return;
}
if (this.state.description.length < 3) {
alert("Enter At least 3 words To describe the product ")
return;
}
if (this.state.storename.length < 1) {
alert("Enter a Storename")
return;
}
alert("Uploading Flyer" + this.state.title)
//------------------------------------------------
this.state.imagePath.forEach((data) => {
// coverting to base64
new Promise((resolve, reject) => {
fs.readFile(data, 'base64')
.then((data) => {
return Blob.build(data, { type: `${mime};BASE64` })
})
.then((blob) => {
console.log("blob " +JSON.stringify(blob))
//uplaoding Image
uploadBlob = blob
name =name + 1
firebase.storage().ref(uid).child(name + ".jpg").put(blob) // ,{ contentType: mime }
})
.then(() => {
//uploadBlob.close()
//getting url
console.log("1")
return firebase.storage().ref(uid).child(name + ".jpg").getDownloadURL()
})
})
})
.then(() => {
//urls = url;
console.log('urls=' + urls)
//================================
try {
alert("Uploading Flyerss" + this.state.title)
//-------------------------------------------
//----------Inserting Data to Database--------
usersTable = 'flyers/' + this.state.productUid,
console.log(usersTable)
firebase.database().ref(usersTable).set(
{
title: this.state.title,
description: this.state.description,
imageUrls: this.state.imageUrls,
storename: this.state.storename,
user: asyncValue,
longitude: this.state.longitude,
latitutde: this.state.latitutde
}
).then(
console.log("then"),
this.title.clear(),
this.description.clear(),
//this.category.clear(),
this.setState({ loading: false }),
this.setState({ disabled: false }),
this.setState({ title: "" }),
this.setState({ storename: "" }),
this.setState({ description: "" }),
this.setState({ imagePath: "" }),
urls = "",
alert(this.state.title + " flyer sucessfully uploaded")
)
//--------------------------------------------
}
catch (error) {
this.setState({ loading: false })
this.setState({ disabled: false })
console.log(error.toString())
alert(error.toString())
}
//================================
})
}, 3000)
}
catch (error) {
console.log("upload Error = " + error)
}
}

React Native - Sending information so as to receive a response for simple login screen but receiving JSON parse error instead

I have tried several times to send the data and receive a response, but it does not seem to be sending the data put in by the user. I have tried going about this in several ways,I will share the code for the last two.
ONE
state = {
phoneNo: '',
pin: '',
isLoggingIn: false,
message: ''
}
_userLogin = () => {
console.log("userLogin");
this.setState({isLoggingIn: true, message:''});
var params = {
phoneNo: this.state.phoneNo,
pin: this.state.pin
};
var proceed = false;
fetch("https://"+"<url>", {
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(params)
})
.then(
(response) => response.json())
.then((response) => {
if (response.status == 200) {
proceed = true;
}
else {
this.setState({ message: response.message });
console.log(message); }
})
.then(() => {
this.setState({ isLoggingIn: false })
if (proceed) this.props.onLoginPress();
})
.catch(err => {
console.log(err.message);
this.setState({ message: err.message });
this.setState({ isLoggingIn: false })
});
}
Two
The only difference here is how I am handling the response so I will only add that section. I thought that the issue might be due to syntax at this point.
.then(function(response){
return response.json();
})
.then(function(data){
console.log(data)
I have been through various tutorials, github and stackoverflow pages addressing the issue but I seem to be missing something. I keep getting a JSON parse error and I am convinced that perhaps the data is never being sent to the url because I get the error regardless of user input.
Both input fields have a ref and the button points to the user login function.
<TextInput
ref = {component => this._pin = component}
placeholder="pin"
onChangeText = {(pin) => this.setState({pin})}
secureTextEntry = {true}
onSubmitEditing={this._userLogin}
/>
<TouchableOpacity
onPress={this._userLogin}
title = "Submit"
disabled={this.state.isLoggingIn||!this.state.phoneNo||!this.state.pin}>
<Text style={styles.loginText}>Sign In</Text>
</TouchableOpacity>

try something like this.
I also get problem acceding both status code & data from fetch call, so i made "processResponse" function
processResponse=(response) =>{
const statusCode = response.status;
const data = response.json();
return Promise.all([statusCode, data]).then(res => {
return ({
statusCode: res[0], // the status code
data: res[1] // the data of the GET/POST returned by fetch call
})
}
);
}
_userLogin = () => {
console.log("userLogin");
this.setState({isLoggingIn: true, message:''});
var params = {
phoneNo: this.state.phoneNo,
pin: this.state.pin
};
fetch("https://"+"<url>", {
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(params)
})
/*processResponse return both status and data , because when you make
.then((response) => response.json()) you return only data and status is removed
*/
.then(this.processResponse)
.then(res => {
console.log("response of fetch",res);
const { statusCode, data } = res;
if (statusCode > 200) {
this.props.onLoginPress()
}else{
this.setState({ message: data.message });
console.log("data message" , data.message);
}
this.setState({ isLoggingIn: false })
})
.catch(err=> {
console.error(err);
this.setState({ message: err.message});
this.setState({isLoggingIn: false})
});
});
}

AlainIb was very helpful and this helped contribute to what worked in the end. Using form data seemed to assist with the JSON Parse error. Hope this helps anyone else who is having any troubles.
state = {
message: ''
}
_processResponse = (response) =>{
const statusCode = response.status;
console.log("resp", response);
const data = response.json();
console.log("data", data);
return Promise.all([statusCode, data]).then(res => {
return ({
statusCode: res[0], // the status code
data: res[1] // the data of the GET/POST returned by fetch call
})
});
}
_userLogin = () => {
console.log("userLogin");
this.setState({isLoggingIn: true, message:''});
var params = {
phoneno: this.state.phoneno,
pin: this.state.pin
};
var formData = new FormData();
formData.append("phoneno", this.state.phoneno);
formData.append("pin", this.state.pin);
console.log(formData);
let data = {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type':'multipart/form-data'
},
body: formData
}
console.log(data);
fetch("https://"+"url", data)
.then(this._processResponse)
.then(res => {
console.log("response of fetch",res);
const { statusCode, data } = res;
if (statusCode == 200) {
console.log("in if statement");
if(data.login_success== 1){
console.log("name to be passed", data.name);
console.log("log in to profile");
this.props.navigation.navigate('ProfileRoute');
}else {
console.log("fail");
this.setState({message:"Password or Phone Number is Wrong"});
}
}else{
this.setState({ message: data.message });
console.log("data message" , data.message);
}
this.setState({ isLoggingIn: false })
})
.catch(err=> {
console.error(err);
this.setState({ message: err.message});
this.setState({isLoggingIn: false})
});
}

setState not working properly in release mode React native iOS

I'm fetching some data from a server to load it to my app, my app doesn't load until the app loads all the data, it works perfectly in the debug mode, but when I have to test it on release mode, I have to reload it in order to make it work, and that is not the idea. Here's my code:
import React, { Component } from 'react';
import { Alert, NetInfo, View, Text, AsyncStorage, TouchableWithoutFeedback, Linking, Platform } from 'react-native';
import { Actions } from 'react-native-router-flux';
import Router from './Router';
import OnBoarding from './components/OnBoarding';
import Loading from './components/Loading';
import OneSignal from 'react-native-onesignal';
import axios from 'axios';
var DeviceInfo = require('react-native-device-info');
class App extends Component {
constructor(props) {
super(props);
this.state = {
usage: '',
categories_hum: [],
videoshum: [],
categories_nov: [],
novedades: [],
tiendas: [],
promociones: [],
listadoCodigos: [],
token: "",
listadoCodigosRecibido: true,
terminos: '',
notFirst: false
};
this.changeUsage = this.changeUsage.bind(this);
}
onIds(device) {
AsyncStorage.setItem('playerId', device.userId);
}
onOpened(openResult) {
if(openResult.notification.payload.additionalData != undefined) {
var opc = openResult.notification.payload.additionalData.opc;
if(opc == 2) {
opc = "2";
AsyncStorage.setItem('opcion', opc);
} else if(opc == 1) {
opc = "1";
AsyncStorage.setItem('opcion', opc);
}
}
}
componentWillMount() {
OneSignal.addEventListener('ids', this.onIds);
OneSignal.addEventListener('opened', this.onOpened);
}
componentDidMount() {
NetInfo.isConnected.fetch().then(isConnected => {
if(!isConnected) {
Alert.alert (
'No hay conexion',
'No hay conexion a internet, debe poseer una conexion WiFi o celular para usar FerretotalApp'
);
}
});
fetch('https://ferrretotalcom.kinsta.com/wp-json/wp/v2/categoria-hum?per_page=100')
.then(response => response.json())
.then(
response => this.setState({ categories_hum: response})
);
fetch('https://ferrretotalcom.kinsta.com/wp-json/wp/v2/videoshum?per_page=100')
.then(response => response.json())
.then(
response => this.setState({ videoshum: response })
);
fetch('https://ferrretotalcom.kinsta.com/wp-json/wp/v2/tienda_acf?per_page=100')
.then(response => response.json())
.then(
response => this.setState({ tiendas: response })
);
fetch('https://ferrretotalcom.kinsta.com/wp-json/wp/v2/categorianovedades?per_page=100')
.then(response => response.json())
.then(
response => this.setState({ categories_nov: response })
);
fetch('https://ferrretotalcom.kinsta.com/wp-json/wp/v2/ferretotalnovedades?per_page=100')
.then(response => response.json())
.then(
response => this.setState({ novedades: response })
);
fetch('https://ferrretotalcom.kinsta.com/wp-json/wp/v2/promociones_activas?hola=1')
.then(response => response.json())
.then(
response => this.setState({ promociones: response })
);
fetch('https://ferrretotalcom.kinsta.com/wp-json/wp/v2/listado_codigos_usuario?deviceID="'+DeviceInfo.getUniqueID()+'"')
.then(response => response.json())
.then(
response => this.setState({ listadoCodigos: response, listadoCodigosRecibido: true})
);
fetch('https://ferrretotalcom.kinsta.com/wp-json/wp/v2/terminos_condiciones?hola=1')
.then(response => response.json())
.then(
response => this.setState({ terminos: response})
);
AsyncStorage.getItem('usage').then((result) => {
if(!result){
this.setState({usage: "firstTime"});
}else{
this.setState({usage: result});
}
//al colocar esto hara q salga siempre el onboarding
//AsyncStorage.removeItem("usage");
});
AsyncStorage.getItem('notFirst').then((result) => {
if(!result){
this.setState({notFirst: false});
} else {
this.setState({notFirst: false})
}
});
AsyncStorage.getItem('token').then((value) => {
if(!value){
var DeviceID = DeviceInfo.getUniqueID();
fetch('https://ferrretotalcom.kinsta.com/wp-json/wp/v2/recibir_token?deviceID="'+DeviceID+'"')
.then((response) => response.json())
.then((response) => {
if(response[0]){
AsyncStorage.setItem('token',response[0].access_token);
this.setState({token: response[0].access_token});
}
})
} else {
this.setState({token: value})}
});
AsyncStorage.setItem('newCode',"false");
}
componentWillUnmount() {
OneSignal.removeEventListener('ids', this.onIds);
OneSignal.removeEventListener('opened', this.onOpened);
}
changeUsage(e) {
this.setState({usage: "notFirst"});
this.setState({notFirst: true});
}
render(){
/*alert(this.state.categories_hum.length + " " + this.state.videoshum.length + " " + this.state.promociones.length
+ " " + this.state.novedades.length + " " + this.state.categories_nov.length + " " + this.state.tiendas.length + " " + this.state.listadoCodigosRecibido + " " + this.state.terminos.length) */
if(this.state.categories_hum.length && this.state.videoshum.length && this.state.promociones.length
&& this.state.novedades.length && this.state.categories_nov.length && this.state.tiendas.length && this.state.listadoCodigosRecibido && this.state.terminos.length) {
if(this.state.usage.length && this.state.usage == "firstTime"){
//al colocar esto solo saldra el onboarding la primera vez
AsyncStorage.setItem('usage', "notFirst");
AsyncStorage.setItem('notFirst', true)
//al colocar esto, guardara la fecha de instalacion de la aplicacion (realmente la primera vez que se mete)
AsyncStorage.getItem('installed').then((result) => {
if(!result) {
var date = new Date();
date = date.toString();
AsyncStorage.setItem('installed', date);
}
});
return (
<OnBoarding changeUsage={this.changeUsage} terminos={this.state.terminos}/>
);
} else if(this.state.usage == "notFirst" && this.state.notFirst == false) {
return(
<OnBoarding changeUsage={this.changeUsage} terminos={this.state.terminos} notFirst={true}/>
);
} else if(this.state.usage == "notFirst" && this.state.notFirst) {
return (
<View style={{flex:1}}>
<Router
categories_hum={this.state.categories_hum}
videoshum={this.state.videoshum}
categories_nov={this.state.categories_nov}
novedades={this.state.novedades}
tiendas={this.state.tiendas}
listadoCodigos={this.state.listadoCodigos}
promociones={this.state.promociones}
token={this.state.token}
terminos={this.state.terminos}
/>
</View>
);
}
} else{
return (
<Loading/>
)
}
}
}
export default App;
As you can see, I'm fetching all the data I need in the "ComponentDidMount" method, then I store the JSON data in multiple states and pass it to the screens I need, the thing is that in release mode, the states don't have anything after it "loads" and it only happens the first time you open the app and only in release mode, I check the response from fetch and it is ok, it brings the data. I have tried lot of things but I can't still figured out what it is since it works well in debug mode. Please if you have any ideas, you can tell me.

From the description , it seems the task is not being synchronous with expected behavior.
setState is asynchronous by default but in my experience I have known some cases where I have to make it explicitly asynchronous using "Async" and "await".
I am not sure but It might be a work around for you too in every setState invoking methods as belows:
async changeUsage(e) {
await this.setState({usage: "notFirst"});
await this.setState({notFirst: true});
}

Ionic app won't work properly on device or emulator

I am new to ionic 1. I have been developing an app where I have used SQLite. It works fine on browser but when I run it on android device or emulator app does not work properly. After I debug I get the below errors:
0 009385 error LiveReload disabled because the browser does not seem to support web sockets
1 009537 log SELECT * FROM items
2 009552 error TypeError: Cannot call method 'transaction' of null
at Object.execute (http://192.168.151.2:8100/js/ng-cordova.min.js:9:23737)
at new <anonymous> (http://192.168.151.2:8100/js/controllers/salesCtrl.js:51:32)
at Object.instantiate (http://192.168.151.2:8100/lib/ionic/js/ionic.bundle.js:18015:14)
at $controller (http://192.168.151.2:8100/lib/ionic/js/ionic.bundle.js:23417:28)
at [object Object].appendViewElement (http://192.168.151.2:8100/lib/ionic/js/ionic.bundle.js:59908:24)
at Object.render (http://192.168.151.2:8100/lib/ionic/js/ionic.bundle.js:57901:41)
at Object.init (http://192.168.151.2:8100/lib/ionic/js/ionic.bundle.js:57821:20)
at [object Object].render (http://192.168.151.2:8100/lib/ionic/js/ionic.bundle.js:59767:14)
at [object Object].register (http://192.168.151.2:8100/lib/ionic/js/ionic.bundle.js:59725:10)
at updateView (http://192.168.151.2:8100/lib/ionic/js/ionic.bundle.js:65400:23), <ion-nav-view name="side-menu21" class="view-container" nav-view-transition="android">
3 009607 error Uncaught Error: Database location or iosDatabaseLocation setting is now mandatory in openDatabase call., http://192.168.151.2:8100/plugins/cordova-sqlite-storage/www/SQLitePlugin.js, Line: 565
Here is my launcher page code. Where the header icons and title isn't showing on device:
angular.module('app.salesCtrl', ['ngCordova'])
.controller('salesCtrl', ['$scope', '$state', '$stateParams', '$cordovaSQLite', '$ionicPlatform', '$ionicPopup',
function ($scope, $state, $stateParams, $cordovaSQLite, $ionicPlatform, $ionicPopup) {
$scope.category = {};
$scope.categories = ["Food", "Beverages", "Others"];
$scope.flag = 0;
$scope.cartPage = function () {
$state.go('cart');
}
$ionicPlatform.ready(function () {
$scope.delete = function () {
var query = "delete from items";
$cordovaSQLite.execute(db, query).then(function (result) {
console.log(result.rows.length);
}, function (error) {
console.log(error);
});
}
});
$scope.items = [];
//EXPERIMENT CODE STARTS
//$scope.selectAll = function() {
//console.log($scope.category.catSelected);
if (window.cordova) {
var query = "SELECT * FROM items";
console.log(query);
$cordovaSQLite.execute(db, query, []).then(function (res) {
if (res.rows.length > 0) {
// console.log("SELECTED -> " + res.rows.item(7).itemname + " " + res.rows.item(7).cashier);
for (var i = 0; i < res.rows.length; i++) {
$scope.items.push({
itemname: res.rows.item(i).itemname,
price: res.rows.item(i).price,
quantity: res.rows.item(i).quantity,
});
//$scope.items=$scope.items;
}
} else {
console.log("No results found");
}
}, function (err) {
console.error("error=>" + err);
});
}
//EXPERIMENTS CODE ENDS
//CHANGE SELECT CODE STARTS==========================================
$scope.showSelectValue = function (mySelect) {
$scope.items.splice(0, $scope.items.length);
var query = "SELECT * FROM items WHERE category=" + "'" + mySelect + "'";
console.log(query);
$cordovaSQLite.execute(db, query, []).then(function (res) {
if (res.rows.length > 0) {
// console.log("SELECTED -> " + res.rows.item(7).itemname + " " + res.rows.item(7).cashier);
for (var i = 0; i < res.rows.length; i++) {
$scope.items.push({
itemname: res.rows.item(i).itemname,
price: res.rows.item(i).price,
});
}
} else {
console.log("No results found");
}
}, function (err) {
console.error("error=>" + err);
});
//all
}
//CHANGE SELECT CODE ENDS==============================
//GET QUANTITY STARTS
$scope.getQuantity = function (item) {
console.log(item.itemname);
$scope.data = {};
// An elaborate, custom popup
var myPopup = $ionicPopup.show({
template: '<input type="number" ng-model="data.quantity">',
title: 'Enter item quantity',
subTitle: 'Number of items',
scope: $scope,
buttons: [
{
text: 'Cancel',
onTap: function (e) {
$scope.flag = 1;
}
},
{
text: '<b>Ok</b>',
type: 'button-balanced',
onTap: function (e) {
if (!$scope.data.quantity) {
//don't allow the user to close unless he enters wifi password
e.preventDefault();
} else {
return $scope.data.quantity;
}
}
}
]
});
myPopup.then(function (res) {
console.log("RES IS " + res);
if (res != undefined) {
//EXPERIMENT CODE STARTS
var query = "UPDATE items SET quantity =" + "'" + res + "'" + " WHERE itemname=" + "'" + item.itemname + "' AND price=" + "'" + item.price + "'";
console.log(query);
$cordovaSQLite.execute(db, query, []).then(function (result) {
console.log("Updated " + res);
}, function (err) {
console.error("error=>" + err);
});
//EXPERIMENT CODE ENDS
console.log('Tapped!', res);
//IONIC ALERT STARTS
var alertPopup = $ionicPopup.alert({
title: 'Item added to the Cart',
template: 'click Ok to see Cart',
buttons: [
{
text: '<b>Ok</b>',
type: 'button-balanced',
}
]
});
alertPopup.then(function (res) {
console.log('Done');
});
} else {
console.log("Cancelled");
}
//IONIC ALERT ENDS
});
}
//GET QUANTITY ENDS
}])

As I see, db variable in never initialised. That is why you have a null exception : TypeError: Cannot call method 'transaction' of null
You should do something like this to initisalise the database :
var db = $cordovaSQLite.openDB({ name: "my.db" });
And do not forget to add the plugin with :
cordova plugin add cordova-sqlite-storage
The doc is here :
http://ngcordova.com/docs/plugins/sqlite/

How can I submit a file in React Native?

I'm using fetch for requests, and I want to submit a file along with other data. How can I do so?
If it is not possible using fetch, what should I do then?
Thanks you guys.

react-native-fs
Has support for file upload on iOS
From the README:
// require the module
var RNFS = require('react-native-fs');
var uploadUrl = 'http://requestb.in/XXXXXXX'; // For testing purposes, go to http://requestb.in/ and create your own link
// create an array of objects of the files you want to upload
var files = [
{
name: 'test1',
filename: 'test1.w4a',
filepath: RNFS.DocumentDirectoryPath + '/test1.w4a',
filetype: 'audio/x-m4a'
}, {
name: 'test2',
filename: 'test2.w4a',
filepath: RNFS.DocumentDirectoryPath + '/test2.w4a',
filetype: 'audio/x-m4a'
}
];
var uploadBegin = (response) => {
var jobId = response.jobId;
console.log('UPLOAD HAS BEGUN! JobId: ' + jobId);
};
var uploadProgress = (response) => {
var percentage = Math.floor((response.totalBytesSent/response.totalBytesExpectedToSend) * 100);
console.log('UPLOAD IS ' + percentage + '% DONE!');
};
// upload files
RNFS.uploadFiles({
toUrl: uploadUrl,
files: files,
method: 'POST',
headers: {
'Accept': 'application/json',
},
fields: {
'hello': 'world',
},
begin: uploadBegin,
progress: uploadProgress
})
.then((response) => {
if (response.statusCode == 200) {
console.log('FILES UPLOADED!'); // response.statusCode, response.headers, response.body
} else {
console.log('SERVER ERROR');
}
})
.catch((err) => {
if(err.description === "cancelled") {
// cancelled by user
}
console.log(err);
});