Dmitry Sokolov

TILJanuary 06, 2020by Dmitry Sokolov

Problem with download file in Google Chrome

I encountered such a problem when I tried to download base64 decoded file with a size over 1mb in Chrome.

I had a function like this:


export const downloadBase64File = (fileData, fileName) => {

  const fileUrl = `data:application/octet-stream;base64,${fileData}`;

  const link = document.createElement('a');

  link.href = fileUrl;

  link.setAttribute('download', fileName);

  document.body.appendChild(link);

  link.click();

  link.remove();

};

It worked good in FireFox but didn't work in Google Chrome. And I found the following solution:


const urlToFile = (url, filename) => {

  return fetch(url)

    .then((res) => {

      return res.arrayBuffer();

    })

    .then((buf) => {

      return new File([buf], filename);

    });

};



export const downloadBase64File = (fileData, fileName) => {

  const fileUrl = `data:application/octet-stream;base64,${fileData}`;



  urlToFile(fileUrl, fileName).then((file) => {

    const blob = new Blob([file], { type: 'application/octet-stream' });

    const blobURL = window.URL.createObjectURL(blob);

    const link = document.createElement('a');

    link.href = blobURL;

    link.setAttribute('download', fileName);

    document.body.appendChild(link);

    link.click();

    link.remove();

  });

}

It works correctly for all browsers.

TILDecember 26, 2019by Dmitry Sokolov

Environment variables in NEXT js

How to get env variables to your app code in NEXT.js application?

It’s not a big deal, but if you set ‘NODE_ENV’ for env in next.config.js it will not work correctly.

Anytime you will have ‘production’ (default value at build time) for any environments (staging, integration, production).

Just use another name instead ‘NODE_ENV’, for example ‘ENV’.


// next.config.js



require('dotenv').config()

module.exports = {

  env: {

    ENV: process.env.NODE_ENV,

  },

}

It will be available in your app code


export default () => <div>{process.env.ENV}</div>

TILApril 22, 2019by Dmitry Sokolov

Integrate Drawer inside Stack Navigation in React Native

I wanted to use more than one navigation in a React Native app.

The documentation didn’t give a clear way to implement this.

Here is what you can do on purpose to add several types of navigation in your React Native app:




import { createStackNavigator, createDrawerNavigator } from 'react-navigation';

import * as Screens from './screens/index';

import Drawer from './components/DrawerMenu';

import getDrawerWidth from './utils/scale';



const AppStackNavigator = createStackNavigator({

  home: {

    screen: Screens.MainScreen,

  },

  about: {

    screen: Screens.AboutScreen,

  },

});



const AppNavigator = createDrawerNavigator(

  {

    home: {

       screen: AppStackNavigator,

    },

  },

  {

    contentComponent: Drawer,

    drawerWidth: getDrawerWidth,

    headerMode: 'none',

  }

);



export default AppNavigator;



TILMay 14, 2019by Dmitry Sokolov

JS: Parsing URL

So far, I have used the indexOf operator or regular expressions to get query string values. Today I learned how to make it easier using the URLSearchParams API:




// Assuming "?post=1234&action=edit"



let urlParams = new URLSearchParams(window.location.search);



console.log(urlParams.has('post')); // true

console.log(urlParams.get('action')); // "edit"

console.log(urlParams.getAll('action')); // ["edit"]

console.log(urlParams.toString()); // "?post=1234&action=edit"

console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"



Important: Does not work in IE