React-Native FileManager with Firebase Storage

Introduction

This is a simple example how to implement a file manager with React-Native, Firebase & Typescript for iOS & Android.

What I will cover in this post:

Fetch & display files from the firebase storage
Open…


This content originally appeared on DEV Community and was authored by David Gregorian

Alt Text

Introduction

This is a simple example how to implement a file manager with React-Native, Firebase & Typescript for iOS & Android.

What I will cover in this post:

  • Fetch & display files from the firebase storage
  • Open a file picker and upload the file to firebase
  • View & download the files on iOS & Android
  • Delete files from the firebase storage

Attention

  1. To keep it simple, I did not add any styles and only used the file names as unique identifiers.
  2. Please don't do this in a production app. Use GUIDs instead.
  3. You should split the code into different files. This example has some inline functions, that should be placed somewhere else.

Implementation

This component uses the following npm packages:

  • react-native-firebase
  • react-native-document-picker
  • react-native-image-picker
  • react-native-fs

(You need to follow the README setups of these npm packages in advance)

import React, { useEffect, useState } from "react";
import storage, { FirebaseStorageTypes } from "@react-native-firebase/storage";
import AntDesignIcon from "react-native-vector-icons/AntDesign";
import { Text, View, TouchableOpacity, Alert, Platform, ActionSheetIOS } from "react-native";
import RNFS from "react-native-fs";
import FileViewer from "react-native-file-viewer";
import { launchImageLibrary } from "react-native-image-picker";
import DocumentPicker from "react-native-document-picker";

const pickDocument = async () => {
  const res = await DocumentPicker.pick({
    type: [DocumentPicker.types.allFiles],
  });

  return { path: res.fileCopyUri, name: res.name };
};

const pickAttachmenet = async () => {
  if (Platform.OS === "ios") {
    const options = ["Image", "Document", "Cancel"];
    ActionSheetIOS.showActionSheetWithOptions(
      { options, cancelButtonIndex: 2, title: "Pick a data type" },
      async (buttonIndex) => {
        if (buttonIndex === 0) {
          // Open Image Picker
          launchImageLibrary({ mediaType: "photo" }, (res) => {
            if (!res.didCancel) {
              return { path: res.uri, name: res.fileName };
            }
          });
        } else if (buttonIndex === 1) {
          // Open Document Picker
          return pickDocument();
        } else {
          // exit
        }
      }
    );
  } else {
    // For Android we can just use the normal DocumentPicker, as it can also access images
    return pickDocument();
  }
};

export const FileManager = () => {
  const [uploads, setUploads] = useState<FirebaseStorageTypes.Reference[]>([]);

  useEffect(() => {
    (async () => {
      const listRef = storage().ref().child("uploads");
      const res = (await listRef.listAll()).items;
      setUploads(res);
    })();
  }, []);

  return (
    <View>
      {uploads.map((upload) => {
        return (
          <View key={upload.name}>
            <TouchableOpacity
              onPress={async () => {
                const localPath = `${RNFS.DocumentDirectoryPath}/${upload.name}`;

                await RNFS.downloadFile({
                  fromUrl: await upload.getDownloadURL(),
                  toFile: localPath,
                }).promise;

                FileViewer.open(localPath, {
                  displayName: upload.name,
                });
              }}
            >
              <Text>{upload.name}</Text>
            </TouchableOpacity>
            <AntDesignIcon
              name="delete"
              onPress={() => {
                Alert.alert(`delete ${upload.name}?`, undefined, [
                  { text: "No" },
                  {
                    text: "Yes",
                    onPress: async () => {
                      const fileRef = storage().ref().child("uploads").child(upload.name);
                      await fileRef.delete();
                      setUploads(uploads.filter((u) => u.name === upload.name));
                    },
                  },
                ]);
              }}
            />
          </View>
        );
      })}

      <TouchableOpacity
        children={<Text>Upload File</Text>}
        onPress={async () => {
          const attachmentInfo = await pickAttachmenet();
          if (attachmentInfo?.name) {
            const fileRef = storage().ref().child("uploads").child(attachmentInfo.name); // Alternatively use custom guids as file names
            const res = await fileRef.putFile(attachmentInfo.path);

            setUploads([...uploads, res.ref]);
          }
        }}
      />
    </View>
  );
};



This content originally appeared on DEV Community and was authored by David Gregorian


Print Share Comment Cite Upload Translate Updates
APA

David Gregorian | Sciencx (2021-05-04T18:34:57+00:00) React-Native FileManager with Firebase Storage. Retrieved from https://www.scien.cx/2021/05/04/react-native-filemanager-with-firebase-storage/

MLA
" » React-Native FileManager with Firebase Storage." David Gregorian | Sciencx - Tuesday May 4, 2021, https://www.scien.cx/2021/05/04/react-native-filemanager-with-firebase-storage/
HARVARD
David Gregorian | Sciencx Tuesday May 4, 2021 » React-Native FileManager with Firebase Storage., viewed ,<https://www.scien.cx/2021/05/04/react-native-filemanager-with-firebase-storage/>
VANCOUVER
David Gregorian | Sciencx - » React-Native FileManager with Firebase Storage. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/04/react-native-filemanager-with-firebase-storage/
CHICAGO
" » React-Native FileManager with Firebase Storage." David Gregorian | Sciencx - Accessed . https://www.scien.cx/2021/05/04/react-native-filemanager-with-firebase-storage/
IEEE
" » React-Native FileManager with Firebase Storage." David Gregorian | Sciencx [Online]. Available: https://www.scien.cx/2021/05/04/react-native-filemanager-with-firebase-storage/. [Accessed: ]
rf:citation
» React-Native FileManager with Firebase Storage | David Gregorian | Sciencx | https://www.scien.cx/2021/05/04/react-native-filemanager-with-firebase-storage/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.