After upgrading to NS7, and updating my code imports, I am unable to use the firebase 'firestore' functions. Whenever any firebase storage function is called I receive:
CONSOLE ERROR: ERROR TypeError: Cannot read property 'listAll' of undefined
This same app is able to use successfully use firestore to retrieve collections and documents, but storage functions do not seem to be recognized.
app.component.ts
import { firestore, storage } from "#nativescript/firebase";
storage.listAll({
bucket: "gs://appname-xxxx.appspot.com",
remoteFullPath: ""
}).then(
function (result) {
console.log(JSON.stringify(result));
},
function (error) {
console.log(error);
}
);
firebase.nativescript.json
{
"using_ios": true,
"using_android": false,
"analytics": true,
"firestore": true,
"realtimedb": false,
"authentication": true,
"remote_config": false,
"performance_monitoring": false,
"external_push_client_only": false,
"messaging": false,
"in_app_messaging": false,
"crashlytics": true,
"storage": true,
"functions": false,
"facebook_auth": true,
"google_auth": true,
"admob": false,
"dynamic_links": false,
"ml_kit": false
}
try the following import format
import { storage } from "#nativescript/firebase/storage";
This will avoid "undefined"
Related
I'm having problems calling actions in the store when I configure the nuxt-socket.io in the project, I'm configuring the nuxt-socket.io in the nuxt.config.js and calling the connection in the component according to the nuxt-socket.io documentation ( https://nuxt-socket-io.netlify.app/usage ), but when this configuration is performed, the components can no longer call the actions of the store.
I'm using vuex and vuex-module-decorators.
Config nuxt.config.js:
io: {
sockets: [
{
name: 'home',
url: 'http://url-server-backend.com',
default: true,
}
]
},
Config component:
async beforeMount(){
const token = this.$cookies.get('authToken');
this.socket = this.$nuxtSocket({
name: 'home',
channel: '/socket-io',
persist: true,
teardown: true,
reconnection: false,
extraHeaders: {
Authorization: token
}
});
},
Error:
Image Error action
my-app.herokuapp.com/graphql responses with 'GET query missing.' and doesn't provide graphql playground interface.
Conf from https://docs.strapi.io/developer-docs/latest/plugins/graphql.html#configurations doesn't work for me.
./config/plugins.js
module.exports = ({ env }) => ({
//
graphql: {
config: {
endpoint: "/graphql",
shadowCRUD: true,
playgroundAlways: true,
depthLimit: 100,
apolloServer: {
tracing: false,
},
}
},
});
and this from forums too..
module.exports = ({ env }) => ({
//
graphql: {
endpoint: "/graphql",
shadowCRUD: true,
playgroundAlways: true,
depthLimit: 100,
apolloServer: {
tracing: false,
},
},
});
```
When I tried to query my GraphQL API on Heroku with Postman, at first it said "restricted access" or something like that. Then I realised that, unlike with MongoDB, when you deploy PostgreSQL on Heroku, the latter creates it's own database, different from the one created in dev environment
So, in prod, Strapi content-types are saved, but naturally some things are wiped, like the entries in collections and permissions settings. I had "find" and "findOne" checkboxes unchecked there, so I checked them back on. Prod API still shows "GET query missing", but the data appeared in Postman and the app worked as expected
If you have PostgreSQL deployed, check your Strapi settings (Settings -> Users & Permissions Plugin -> Roles -> Permissions -> name of your collection type) and see if the checkboxes are unchecked and try to check them back. That did the trick for me
This worked for me Strapi v.4 on Heroku with postgreSQL
config/plugins.js
module.exports = ({ env }) => ({
graphql: {
enabled: true,
config: {
endpoint: "/graphql",
shadowCRUD: true,
playgroundAlways: true,
defaultLimit: 10,
maxLimit: 20,
apolloServer: {
tracing: true,
},
},
},
});
I was trying to follow the docs and created vite.config.js like this:
const config = {
outDir: '../wwwroot/',
proxy: {
// string shorthand
'/foo': 'http://localhost:4567',
// with options
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
}
};
export default config;
And tried to test it with following calls:
fetch('/foo');
fetch('/api/test/get');
I was expecting to have actual requests as http://localhost:4567/foo and http://jsonplaceholder.typicode.com/test/get
But both of them had my dev server as an origin like this: http://localhost:3000/foo and http://localhost:3000/api/test/get
Did I misunderstand it? How proxies should work?
I also created an issue in the Vite repo but it was closed and I did not understand the closing comment.
Turns out it's needed to specify secure flag to false like this:
proxy: {
'/api': {
target: 'https://localhost:44305',
changeOrigin: true,
secure: false,
ws: true,
}
}
Related github issue
Based on the Vite Config you need to specify it via server -> proxy inside vite.config.js:
export default defineConfig({
server: {
proxy: {
"/api": {
target: "https://your-remote-domain.com",
changeOrigin: true,
secure: false,
},
},
},
// some other configuration
})
For debugging I highly recommend to add event listeners to the proxy, so you can see how the requests are transformed, if they hit the target server, and what is returned.
proxy: {
'/api': {
target: 'https://localhost:44305',
changeOrigin: true,
secure: false,
ws: true,
configure: (proxy, _options) => {
proxy.on('error', (err, _req, _res) => {
console.log('proxy error', err);
});
proxy.on('proxyReq', (proxyReq, req, _res) => {
console.log('Sending Request to the Target:', req.method, req.url);
});
proxy.on('proxyRes', (proxyRes, req, _res) => {
console.log('Received Response from the Target:', proxyRes.statusCode, req.url);
});
},
}
}
proxy will be an instance of 'http-proxy',
Please see for further info https://github.com/http-party/node-http-proxy#options
I am having an issue trying to use the addInitialFiles method listed here:
http://docs.fineuploader.com/branch/master/api/methods.html#addInitialFiles
I get a javascript error in my chrome dev console that says:
1032:381 Uncaught TypeError: uploader.addInitialFiles is not a function
This is the code I use to initialize Fine Uploader, and make the call the addInitialFiles():
<script type="text/javascript">
$(function () {
var uploader = $('#fine-uploader').fineUploaderS3({
request: {
endpoint: "myfineuploaderbucket.com.s3.amazonaws.com",
accessKey: "XXXXXXXXXXXXXXXXXXXXXXXX",
},
signature: {
endpoint: "/SignatureHandler",
version: 4
},
validation: {
allowedExtensions: ["gif", "jpeg", "jpg", "png", "bmp"],
acceptFiles: "image/gif, image/jpeg, image/png, image/bmp",
sizeLimit: 5000000,
itemLimit: 3
},
retry: {
enableAuto: true
},
deleteFile: {
enabled: true,
endpoint: "/DeleteImage/?id=#Model.Id",
method: 'POST',
},
paste: {
targetElement: $(document),
promptForName: true
},
uploadSuccess: {
endpoint: "/UploadSuccessful/?id=#Model.Id"
},
iframeSupport: { //This path needs to be a blank HTML page and is used for fine-uploader to support IE9 and older
localBlankPagePath: "/Blank"
},
objectProperties: {
acl: "public-read",
key: function (fileId) {
var re = /(?:\.([^.]+))?$/;
fileExt = re.exec($("#fine-uploader").fineUploader("getName", fileId))[0];
uuid = $("#fine-uploader").fineUploader("getUuid", fileId);
filename = uuid + fileExt;
key = "/#ViewBag.Id + "/" + filename;
return key;
}
},
scaling: {
hideScaled: true,
sizes: [
{ name: "small", maxSize: 350 },
{ name: "large", maxSize: 800 },
]
},
callbacks: {
onDelete: function (id) {
if (id == 2) {
$("#fine-uploader").fineUploader("deleteFile", 0);
$("#fine-uploader").fineUploader("deleteFile", 1);
}
},
},
});
uploader.addInitialFiles([
{
"name": "a3ef2360-881d-452c-a5f6-a173d5291066.jpg",
"uuid": "a3ef2360-881d-452c-a5f6-a173d5291066",
"size": "66000",
"thumbnailUrl": "https://s3.amazonaws.com/myfineuploaderbucket.com/1032/ecdca7bb-fb02-4072-b526-4e51cedb1f2b.jpg",
"s3Key": "1032/a3ef2360-881d-452c-a5f6-a173d5291066.jpg",
"s3Bucket": "myfineuploaderbucket.com"
}
]);
Is there something that I am doing wrong? Is addInitialFiles not a method, but an option that needs to be initialized when creating the Fine Uploader instance? I have tried adding "addInitialFiles" to the options of the Fine Uploader instance as well, and I do not receive a javascript error, but it does not load the initial file either.
I am using the latest version, 5.7.1.
Just like any other jQuery plug-in, the Fine Uploader jQuery wrapper returns a jQuery-wrapped element. This means that you are attempting to call an addInitialFiles method on a jQuery object. Of course, this method does not exist. If you really want to continue using the jQuery wrapper, you must change uploader.addInitialFiles(...) to uploader.fineUploaderS3('addInitialFiles', ...).
But you should know that you don't need jQuery for any of this, especially when using Fine Uploader. There is no benefit to using the jQuery wrapper with Fine Uploader, and you can fix your code simply by forgoing the wrapper (and saving a few bytes) and changing the first couple lines of your Fine Uploader initialization to:
var uploader = new qq.s3.FineUploader({
element: document.querySelector('#fine-uploader'),
...
})
Now, uploader.addInitialFiles works as you would expect.
I have an file upload plugin (jQuery Fine Upload). With this plugin i upload images via AJAX, and from the response (JSON) generate preview images. This works fine in the major browsers, except all versions of Internet Explorer, because this sh... wants to open the JSON respone with .js extension. The event is fired when the file input will change. See the code below:
initFileuploader: function() {
$('#imageUploadWrapper').fineUploader({
request: {
uuidName: 'uploadId',
inputName: 'upload',
endpoint: '/admin/model/media/image/upload',
params: {
format: 'json'
}
},
// debug: true, // ##### !!!!! #####
autoUpload: true,
responseJSON: true,
deleteFile: {
enabled: true,
forceConfirm: true
}
}).on('complete', function(event, id, name, response) {
var elem = $('.qq-upload-list li')[id];
$(elem).prepend('<div class="previewContainer"></div>').addClass('cf');
$(elem)
.children('.previewContainer')
.append($('<img src="/admin/model/media/image/view/tmp/'+response.result[0].name+'" class="previewItem"/>'));
});
}
And this is the JSON response:
{
"success": true,
"version": "1.0",
"code": 200,
"result": [{
"name": "08390ab5-0c1d-4801-bef9-7bfd5d446776.jpg",
"type": "image\/pjpeg",
"error": 0,
"size": 845941
}],
"error": ""
}
As specified in the documentation, your response's Content-Type header MUST have a value of "text/plain". If your response's Content-Type is "application/json", as I presume yours is, you will run into the problem you are observing.