React Native: How to use FileReader in React Native

Viewed 2433

I am a very new for developing an application and React Native. I'm developing an electronic signature application and I want to add a new certification by import a '.pfx' file with a password. I'm using react-native-document-picker to pick the file from the device and store it in useState and a password input in the another.

My handleChooseFile code:

const handleChooseFile = async () => {
        //Opening Document Picker for selection of one file
        try {
            const res = await DocumentPicker.pick({
                type: [DocumentPicker.types.allFiles],
            });

            console.log('res = ', res)
            //Setting the state to show single file attributes
            setSelectedFile(res)

        } catch (err) {
            //Handling any exception (If any)
            if (DocumentPicker.isCancel(err)) {
                //If user canceled the document selection
                alert('Canceled from single doc picker');
            } else {
                //For Unknown Error
                alert('Unknown Error: ' + JSON.stringify(err));
                throw err;
            }
        }
    };

I saw this code for ReactJS for reading files and I've tried it.

My handleSubmit code:

const handleSubmit = (e) => {
        e.preventDefault();

        // Do something with the files
        console.log(selectedFile);

        //const reader = new FileReader();

        const reader = new FileReader();
        reader.onload = function (e) {
            const fileContent = e.target.result;

            // decrypt p12 using the password returned by getPassword(), the password should be protected and not hard coded 
            try {
                // get p12 as ASN.1 object
                const p12Asn1 = forge.asn1.fromDer(fileContent);

                const p12 = forge.pkcs12.pkcs12FromAsn1(p12Asn1, pwd);

                // get bags by type
                const certBags = p12.getBags({ bagType: forge.pki.oids.certBag });
                const pkeyBags = p12.getBags({ bagType: forge.pki.oids.pkcs8ShroudedKeyBag });
                // fetching certBag
                const certBag = certBags[forge.pki.oids.certBag][0];
                // fetching keyBag
                const keybag = pkeyBags[forge.pki.oids.pkcs8ShroudedKeyBag][0];
                // generate pem from private key
                //var privateKeyPem = forge.pki.privateKeyToPem(keybag.key);
                // generate pem from cert
                //var certificate = forge.pki.certificateToPem(certBag.cert);

                if (certBag && keybag) {
                    console.log(certBag.cert);
                    console.log('Success then upload file!');
                    setStatus('Check password PASS then upload file...');
                    uploadFile();
                }

            } catch (error) {
                console.log(error);
                console.log('Fail!');
                setStatus('Fail!');
            };
        };
        reader.readAsBinaryString(selectedFile);
    }

Once I run this function it will be error says: 'rader.readAsBinryString is not a function'. How can I do the FileReader in React Native.

0 Answers
Related