Upload/Download Files

Đổi với phần Download/Upload tệp tin thì React Native có rất nhiều thư viện để thực hiện việc tập
hợp các tệp tin, chọn tệp tin như các packages: react-native-document-picker, expo-document-
picker,... các thư viện này đóng góp rất lớn trong việc truyền file vào các thư viện được tạo ra bới
chính các host server để lưu trữ hình ảnh như: Firebase, Cloudinary, AWS S3,...Sau đây là các nội
dung chính của mục này:

1. File Upload To Server

Sau khi tạo source code ứng dụng React Native để thực hiện nội dung upload to server ( có thể sử
dụng expo hoặc react-native cli ), sử dụng các thư viện chọn tệp tin như: react-native-document-
picker hoặc react-native-image-picker, ở đây em chọn react-native-image-picker để chọn một hình
ảnh theo mong muốn và chuyển đến bất kì server nào được thiết lập xử lý hình ảnh. Ở đây em tự
thiết lập một Backend server sử dụng Express.

Đầu tiên tải thư viện react-native-image-picker: npm i react-native-image-picker

Sau khi tải xong sử dụng thư viện để chọn một hình ảnh mong muốn:

Sau khi chọn hình ảnh ta được một object chứa thông tin của file hình ảnh đó. Dùng trường uri, type,
name để gửi dữ liệu trong một FormData. Lưu ý, khi sử dụng FormData thì headers phải chứa
“Content-Type”: “multipart/form-data” thì mới có thể truyền formData đi được. Sau đó thực hiện
gọi api fetch với HTTP Verb là POST. Ngoài ra đường dẫn tới server không thể là localhost vì android
emulator không thể nói chuyện trực tiếp tới 127.0.0.1 mà phải thông qua network của virtual
router/firewall 10.0.2.x/24. Và 10.0.2.2 là cách để nói chuyện với 127.0.0.1 của máy chủ.
Code ở phía server sẽ như sau:

Express app được sử dụng ở phía backend, ngoài ra thì bordy-parser của express không thể xử lý
multipart/form-data nên nhóm em sử dụng multer vì đây là mục đích chính của việc sử dụng multer
là để xử lý các request có content-type là multipart/form-data.

Sau khi chọn được một tệp tin, http POST request sẽ được gửi đến Express server, nơi được thiết lập
xử lý tệp tin sử dụng multer. Thư mục upload cũng được tạo thông qua thiết lập, tên file được ghép
từ các dữ liệu gửi đi và tạo ra trong thư mục uploads.

Kết quả file được in ra thông qua req.file được sử dụng để tạo ra file hình ảnh trong thư mục
uploads.

2. React Naive Download Image

Đây là thư viện cho phép chúng ta tải ảnh bất kỳ dựa trên đường dẫn. Cách sử dụng rất đơn giản,
chúng ta chỉ cần hợp các dữ liệu thu được từ RNFetchBlob được export từ thư viện. Đây là đối tượng
cho phép lấy các thông tin của máy hiện đang có như: DocumentDir, PictureDir, LibraryDir,.. và các
thư mục khác có trong storage của máy di động.
Sẽ tương ứng với:

- REMOTE_IMAGE_PATH ở đây là đường dẫn tới

bức ảnh mà ta muốn tải về, thiết lập extension
thông qua việc gọi hàm xử lý đường dẫn để lấy
đuôi file (ext). VD: png, jpeg, ...
- Gọi đối tượng RNFetchBlob được định nghĩa
sẵn dữ liệu file system của máy di động để lấy
config để gọi http request tới đường dẫn hình
ảnh mình muốn tải. Ngoài ra địa chỉ tải về máy
là thư mục Pictures cũng được liệt kê trong
options của hàm config. Tạo một nút bấm và
thực hiện tải.

3. Upload Image to AWS S3 Bucket

Ở mục này thì việc đầu tiên cần làm là tạo tài khoản AWS S3
Sau khi thực hiện đăng ký hoặc đăng nhập xong, chúng ta sẽ được đưa tới trang console của AWS,
nơi mà ta có thể đăng ký các dịch vụ được cung cấp.

Ở đây chúng ta chọn dịch vụ S3 để lưu trữ dữ liệu các file cần thiết. Sau khi thiết lập dịch vụ s3,
chúng ta được phép tạo buckets - các container chứa các object ( file ).

Thứ chúng ta cần quan tâm chính là region của bucket này, thiết lập truy cập vào bucket cũng như
quyền xem các thông tin có thể được chia sẻ như Object URL ( đường dẫn tới file được upload
lên ),... thông tin về bucketName, cũng như public access key, secret access. Để có access key thì
chúng ta phải chọn dịch vụ IAM (Identity and Access Management) để tạo key
Sau khi tạo key thành công thì Chúng ta sẽ có public key là Access Key ID và private key là Secret
Access Key. Private key là key không được phép để lộ và chúng chỉ được đưa cho chúng ta sau khi
tạo một key mới nên việc lưu trữ nó là cần thiết. Có thể tải .csv file được cập hoặc tự lưu thông tin
vào note.

Người ta khuyến khích nên dùng AWS CLI để config các thông tin này vào trong máy nội bộ để khi kết
nối tới AWS S3 thì thông tin không cần để lộ trên mã nguồn. Đây chỉ là một cách để tránh lộ thông
tin mật. Vì AWS đã tạo tiện ích này nên mọi người nên sử dụng nó. AWS CLI có thể được tìm thấy
trên trang chủ phần cài đặt. Sau khi cài đặt và thiết lập thì sẽ được tạo một thư mục
/home/user/.aws cùng với 2 file config và credentials, trong đó chứa keys và thông tin bucket. Việc
này sẽ được tự động tìm trong mã nguồn sử dụng thư viện của AWS (aws-sdk). Có thể tải bằng lệnh
npm install aws-sdk.

Sau khi thiết lập xong, có thể gọi upload và đưa vào tham số để thực hiện truyền file sang bucket đã
được tạo ở trên AWS S3 Console.
Đây là những file được upload lên bucket từ ứng dụng React Native.

4. Store/Retrieve File on Google Drive

Đây là màn hình đăng nhập để gọi tới Google Api, cụ thể là sử dụng OAuth 2.0 credentials để xác
thực và phân quyền cho đăng nhập. Sau khi nhấn vào nút đăng nhập thì các Screen đăng nhập của
Google sẽ lần lượt hiện ra yêu cầu nhập tài khoản và password để xác thực. Việc tạo credentials trên
Google là cần thiết vì cần có sự đối chiếu giữa api đăng nhập và clientId đã được tạo trên Google
Identity. Cũng giống như AWS Api thì Google Api cho phép tạo file, nhiều file, xóa file, tải file,...

Đầu tiên, để sử dụng Google API thì phải tạo OAuth 2.0 Credentials.

Ở bước này ta có thể tạo trực tiếp trên Google Cloud Console hoặc tạo từ bên thứ 3 liên kết với
Google như Firebase. Ở đây nhóm em tạo project firebase.

Chọn tạo project mới để liên kết với Google Cloud.

Tạo liên kết tới ứng dụng mobile và tạo các thiết lập liên quan đến ứng dụng. VD: SHA1, clientId...

Vào mục Authentication chọn provider và chọn Google Provider.

Tự động Google Auth được thiết lập cho chúng ta với clientId cho ứng dụng.
Sử dụng clientId vào code để GoogleSign thiết lập và tạo kết nối tới Google Cloud.

Enable Google Drive API để bắt đầu sử dụng API.

Đoạn code chính của mục này bao gồm:

- Đăng nhập bằng GoogleSignin của @react-native-google-signin/google-signin

- Thực hiện Upload, Get file lên Google Drive sử dụng package @robinbobin/react-native-
google-drive-api-wrapper
- Đăng xuất khỏi tài khoản.

Đăng nhập:
Đưa clientId vào tham số của GoogleSignin cùng với các phạm vi truy cập của tài khoản được thử
nghiệm Google API. Check liệu vẫn còn đăng nhập hay không để đăng nhập lại. Sau khi đăng nhập
user sẽ nhận được thông tin của mình cùng với accessToken (Authorization) phục vụ cho mục đích
cấp quyền sử dụng API.

Kết quả đăng nhập

Tiếp đến là upload file lên Google Drive.

Công việc cụ thể của hàm này là sử dụng thư viện react-native-document-picker để chọn một file bất
kì để upload lên Google Drive sử dụng API. Sau khi chọn được file thì các thẻ metadata được lưu trữ
vào biến để tiện cho mục đích đọc đường dẫn sử dụng thư viện react-native-fs. Công việc của RNFS
là tìm đường dẫn thu được từ DocumentPicker để biến file thành dạng base64. Vì hàm
newMultipartUploader().setData() chỉ nhận tham số là Uint8Array (hay byte array) nên phải qua quá
trình encode base64 thành byte array (bytes) thì mới có thể chuyển thành binary lưu trữ trên Google
Drive. Do đó mới có thể xem hình ảnh, đọc file trên Google Drive.

Kết quả Upload:

Thực hiện lấy thông tin file từ Google Drive:

Google Drive API có endpoint để lấy thông tin file về (https://www.googleapis/drive/v3/files/{id của
file ở đây})

react-native-google-drive-api-wrapper có method để thực hiện gọi tới đường dẫn đó. Đây cũng là
kết quả sau khi gọi hàm cũng như gọi tới đường dẫn
https://www.googleapis/drive/v3/files/1metEYAxiPf0j_A7qnDLZbbB2sgJIIxxp . Là thông tin của một
file trên Google Drive.

Và cuối cùng là Sign Out để quay về nút đăng nhập.