More

    React Zip File: Usage, Installation and Much More

     

    What is a react zip file?

    A react zip file is nothing but a collection of one or more files compressed together in an archive format. The original size of the file is reduced when it is compressed and converted into a zip file. This format was first announced in 1986 by Phillip Katz. Along with the PKZip program for Katz’s Company, PKWare, Inc. this file was first implemented. After that, it was widely accepted by the majority of Operating Systems. If your file is 12 MB (megabytes) and you want to share it via Gmail then you may find difficulty sharing it. If you compress the file you will see that the size of the file is reduced by 4 to 5 MB of its actual size. These types of files are stored in your device memory by the “.zip” extension.  Microsoft has implemented the .zip format in all of its devices in the year 1998. 

     

    Advantages of React .Zip files:

    • Storage space consumption is reduced. If the file which is compressed is large then you may see that about 80% or more data has been reduced after compression.
    • The smaller the file size easier the sharing will be.
    • If the file is smaller, then the email transaction time will automatically reduce.
    • This will help you encrypt your data especially when the transaction is via the internet. Eventually, your data is completely safe.

    Disadvantages of using a React .zip file:

    Sometimes you may find errors while extracting your files from the zip file. If any data is damaged it may affect the particular file or entire zip file. Thus, it will result in severe loss of data. 

     

    Errors encountering if the zip is corrupted: 
    • While opening the zip an error will generate saying “Unexpected end of archive”.
    • If a file transfers error occurs then the “WinZip Self-Extractor” error will occur. 
    • “Zip file corrupt–Can not open the file” This error will occur if the file appears to be an invalid archive.
    • CRC (Cyclic Redundancy Error).
    • Compressed (Zip folders errors) will occur if the file is invalid or corrupted.

     

    Usage:

    So this is a basic syntax that will be needed to import into the main code.

    import { zip, unzip, unzipAssets, subscribe } from ‘react-native-zip-archive’

    If you need to develop it for IOS then run the command given below in your root folder. 

    cd ./ios && pod install

    And to perform all the above steps you’ll first need to install the package via npm.

     

    Installation Process:

    npm install react-native-zip-archive –save

    So to access the system you will need react-native-fs.

    import { MainBundlePath, DocumentDirectoryPath } from ‘react-native-fs’

     

    Basic ZIP Operations:

     

    Zip source to target (Supporting zip folder only. No file entries):

     

    const targetPath = `${DocumentDirectoryPath}/myFile.zip`

    const sourcePath = DocumentDirectoryPath

     

    zip(sourcePath, targetPath)

    .then((path) => {

      console.log(`zip completed at ${path}`)

    })

    .catch((error) => {

      console.error(error)

    })

     

    Zip source target (Supporting zip folder only. No file entries. Also, encryption is unsupported on IOS platform.):

     

    const targetPath = `${DocumentDirectoryPath}/myFile.zip`

    const sourcePath = DocumentDirectoryPath

    const password = ‘password’

    const encryptionType = ‘STANDARD’; //possible values: AES-256, AES-128, STANDARD. default is STANDARD

     

    zipWithPassword(sourcePath, targetPath, password, encryptionType)

    .then((path) => {

      console.log(`zip completed at ${path}`)

    })

    .catch((error) => {

      console.error(error)

    })

     

    Unzip from source target (without password):

     

    const sourcePath = `${DocumentDirectoryPath}/myFile.zip`

    const targetPath = DocumentDirectoryPath

    const charset = ‘UTF-8’

    // charset possible values: UTF-8, GBK, US-ASCII and so on. If none was passed, default value is UTF-8

     unzip(sourcePath, targetPath, charset)

    .then((path) => {

      console.log(`unzip completed at ${path}`)

    })

    .catch((error) => {

      console.error(error)

    })

     

    Unzip from source target (with password):

     

    const sourcePath = `${DocumentDirectoryPath}/myFile.zip`

    const targetPath = DocumentDirectoryPath

    const password = ‘password’

     

    unzipWithPassword(sourcePath, targetPath, password)

    .then((path) => {

      console.log(`unzip completed at ${path}`)

    })

    .catch((error) => {

      console.error(error)

    })

     

    Unzip file from Android Assets folder path (Supports android only):

     

    const assetPath = ‘./myFile.zip’

    const targetPath = DocumentDirectoryPath

     

    unzipAssets(assetPath, targetPath)

    .then((path) => {

      console.log(`unzip completed at ${path}`)

    })

    .catch((error) => {

      console.error(error)

    })

     

    Subscribe to the progress callbacks:

     

    componentDidMount() {

      this.zipProgress = subscribe(({ progress, filePath }) => {

        // the filePath is always empty on iOS for zipping.

        console.log(`progress: ${progress}\n processed at: ${filePath}`)

      })

    }

    componentWillUnmount() {

      // Important: Unsubscribe from the progress events

      this.zipProgress.remove()

    }

     

    Generating the zip file in react:

    It is very easy to zip a file in react. We will see how to zip images. Once you’re done with cloning the repository 

    open: src/components/Thumbnail.jsx:

    import React from ‘react’;

     

    const Thumbnail = ({ title, handle, url }) => {

     const completeUrl = `${url}/${handle}`;

     return (

       <div className=”col-md-4″>

         <div className=”thumbnail”>

           <div className=”thumbnail-img”>

             <a href={completeUrl} target=”_blank”>

               <img src={completeUrl} />

             </a>

           </div>

           <div className=”caption”>

             <h3>{title}</h3>

             <div className=”text-right”>

             <a

                className=”btn btn-primary filestack-secondary”

                href={`${url}/zip/${handle}`}

                role=”button”

             >

             Download

             </a>

           </div>

         </div>

       </div>

     </div>

     );

    };

     

    export default Thumbnail;


    Here, the thumbnail component has a single picture, title, and download button. So it is just a presentation component because the zip file transformation is nothing but a simple string concatenation.

    Conclusion:

    From the above article, we conclude that zipping files is very easy and efficient to use. There are some considerable advantages including file size and transaction time reduction. It also provides safety while transactions via the internet. Sometimes files may get damaged due to some issues but there are tools to resolve a few of the damages. The installation process does not seem more complicated and codes are short. There are a total 6 zip operations viz, zipping and unzipping with a password, zipping and unzipping without password, Unzipping only on Android, and subscribing to progress callbacks (one can check on the progress of zipping or unzipping of the file. It ranges from 0 to 1 where 1 describes all files are zipped or unzipped).

     

    Recent Articles

    React Ecommerce Templates

      React is the most popular library for the development of e-commerce applications. React eCommerce templates for building eCommerce apps are a combination of several...

    What is React Yarn? How to Install It?

    Introduction to React Yarn The technical community shares hundreds and thousands of pieces of code every day in the community of JavaScript. As a result,...

    React Editor: Features, Installation and Limitations

    Why do we need the react editor?  There is a large range of code-based editors like CodeMirror, Monaco, Ace, etc., that provide us with the...

    React Babel: Everything You Need to Know About It

    Introduction About React Babel: React Babel is a very well known and well-implemented open-source transcompiler of JavaScript. We use it mainly to convert the ECMA...

    React Websocket: Usage, Installation and much more

    Introduction About React Websocket:  If you want to create a long-running connection between a client and a server then use React Websocket. Let's take an...

    Related Stories

    Leave A Reply

    Please enter your comment!
    Please enter your name here