Posts

react-quill Integrate quill-image-resize-module

Image
React-qill  is a great free package which can be used for design editors. However, if you are using the image upload feature, there is a problem of integrating resize package. This was discussed in may treads and I was able to find the best approach integrate it with react-starter-app. https://www.npmjs.com/package/quill-image-resize-module If you use the following code, import Quill from ' quill ' ; import { ImageResize } from ' quill-image-resize-module ' ; Quill . register ( ' modules/imageResize ' , ImageResize); const quill = new Quill (editor, { // ... modules : { // ... imageResize : { // See optional "config" below } } }); The following error is common. TypeError: Cannot read property 'imports' of undefined var d = window.Quill.imports.parchment In order to overcome the issue , you have to update the node_modules/react-scripts/config/webpack.config.

xe.com api integrate with postman:authentication

Image
According to xe.com document we have to use the basic auth and they not provide information about the credentials. curl –i -u account_id:api_key "https://xecdapi.xe.com/v1/account_info/"  But in order to login you should provide the  Account ID   for username and the  Account API KEY   for password for login, which is given after creating the account. 

React JS Tabs Add and Close Tabs

https://ctxhou.github.io/react-tabtab/#add-close In order to use Tabtab we have to downgrade the version of the styled component  to 3.4.10 in order to use   "react-tabtab": "^1.8.2".

Firebase Storage - File upload to folder 403 Firebase Storage: User does not have permission to access

Image
When I was using firebase storage from the client side without admin sdk , I got the following error with the authenticated user, when I am uploading an image.   var temp = storage.ref().child("temp")                          .child(file.name);     temp.put(file)     .then(snap => { .... } Firebase Response  : Firebase Response  : FirebaseStorageError {code_: "storage/unauthorized", message_: "Firebase Storage: User does not have permission to access 'temp/50.png'.", serverResponse_: "{ ↵   "error": { ↵     "code": 403, ↵     "message": "Pe…n denied. Could not perform this operation" ↵   } ↵ }", name_: "FirebaseError"} The error is due to the issue in firebase storage rules. The document pages do not specify how to set permission to all the objects under the given folder . However , they have given an example, to resolve the issue. See the example at t

Google Storage set file permission when Save File or Write Stream

Image
The brackets in the Google cloud storage or Firebase storage have a permission set which is common to all files. However, we should have the capability to set the permission to each file as we need. Although I have discussed early in the post  Make Storage Public , the custom permission can correctly assign using  ALC. Refer the Doc:https://cloud.google.com/nodejs/docs/reference/storage/1.3.x/Acl#add If you are using a storage file you can access the file and do the modification.    const file = firebase.storage().bucket().file('originals/file.png');                                    const options = {                                     entity: 'allUsers',                                     role: storage.acl.READER_ROLE                                   };                             file.acl.add(options, function(err, aclObject) {}); If you are using a write stream, the process is a bit different. You have to create metadata variable a

Firebase Storage Make only Selected Basket (Folder) Public

Image
 One of the big issue I face with google cloud storage is when I go to build a site which has public as well as private sections. Defult rule  as follows make the whole basket open to read which is not necessary.  match /{allPaths=**} {       allow read;       allow write: if request.auth != null;     } If you make a basket (generated)  base rule and try to access the file without token like below , it will gives permission issue . https://firebasestorage.googleapis.com/v0/b/<project id>.appspot.com/o/generated%test_400*400.png?alt=media&token= {   "error": {     "code": 403,     "message": "Permission denied. Could not perform this operation"   } } The issue have to resolve in google cloud storate admin by giving access to perticular basket. Ref : https://cloud.google.com/storage/docs/access-control/making-data-public#objects Go to following URL : https://console.cloud.google.com/storage/browser?pr

Firebase Storage ApiError: Forbidden #299 ... ApiError: Forbidden at new util

Image
When, I want to utise firebstore for the frist time in the google cloud functions,  the main problem I had to face it the integration issue raise as follows.  The google firebase and the google cloud storage eveloved seperately and in order to use the clould storage in firebase functions, the special autherntication need to be grantted even you are using firebase admin sdk. ApiError: Forbidden at new util.ApiError (/user_code/node_modules/@google-cloud/storage/node_modules/@google-cloud/common/src/util.js:107:10) at Object.parseHttpRespMessage (/user_code/node_modules/@google-cloud/storage/node_modules/@google-cloud/common/src/util.js:149:33) I implemeted the firebase admin sdk as follows. const firebaseAdmin = require("firebase-admin"); firebaseAdmin.initializeApp(functions.config().firebase); And firebase cloud bucket implemented  as follows . const storageRoot = firebaseAdmin.storage().bucket() Google document also indicate authentication req