You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-[Uuid](https://github.com/uuidjs/uuid) (★ 8.7k) generate RFC-compliant UUIDs in JavaScript.
146
-
-[Busboy](https://github.com/mscdex/busboy) (★ 1.8k) a streaming parser for HTML form data for Node.js.
147
-
-[Sharp](https://github.com/lovell/sharp) (★ 15.8k) high performance Node.js image processing.
148
149
-[Glob](https://github.com/isaacs/node-glob) (★ 6.2k) glob functionality for Node.js.
149
150
-[Fs-extra](https://github.com/jprichardson/node-fs-extra) (★ 6.6k) Node.js: extra methods for the fs object like copy(), remove(), mkdirs().
151
+
-[Resize Image](https://github.com/firebase/extensions/tree/master/storage-resize-images) (★ 372) Firebase Extension to create resized versions of images uploaded to Cloud Storage.
150
152
151
153
## Prerequisites
152
154
@@ -174,7 +176,7 @@ Run the following commands in the root of the repository:
174
176
-`npm install -g firebase-tools`
175
177
-`firebase init`
176
178
177
-
Select the firebase project you created in the previous step, when prompted select the services you want to setup and check **_Database_**, **_Functions_**and **_Hosting_**.
179
+
Select the firebase project you created in the previous step, when prompted select the services you want to setup and check **_Database_**, **_Functions_**, **_Hosting_**and **_Storage_**.
178
180
179
181
**_Database_**:
180
182
@@ -201,6 +203,9 @@ You'll get prompted to enter the path to you service account key file. To genera
201
203
202
204
You'll need to enter the **_email_** and **_password_** for the admin account of the admin dashboard. With this in place, you've successfully created your admin account for the dashboard.
203
205
206
+
**_Storage_**
207
+
-For the file we should use for the Storage Rules select storage.rules.
208
+
204
209
### Setting up the React frontend
205
210
206
211
Run the following commands in the root of the repository (Using Node v12.15.0 or higher ):
@@ -569,6 +574,53 @@ const date = Date.now();
569
574
- Add another **registerLocale** with your language as the first parameter and the import from `date-fns` as second parameter.
570
575
- Place your language with its date format on **dateFormat**.
571
576
577
+
## File Upload
578
+
579
+
For file upload, we used the [Firebase Client](https://firebase.google.com/docs/storage/web/upload-files?authuser=1#upload_files) together with **Firebase Storage** for our storage needs. We store the users profile image in a subfolder named `/users`.
580
+
581
+
### Image Resize
582
+
583
+
We use [Resize Image](https://github.com/firebase/extensions/tree/master/storage-resize-images) for resizing every image uploaded to the storage.
584
+
Every image uploaded to the storage is resized to our size preference (`200pxx200px`).
585
+
586
+
**Setting your image resize**
587
+
588
+
If you want to install it from the cmd, you can execute:
<li>Go to your Firebase Proyect on <a href= "https://console.firebase.google.com/u/1/">Firebase Console</a> </li>
598
+
<li>Select extensions from the sidebar</li>
599
+
<li>Search for Resize Images extension</li>
600
+
<li>Click install on the extension</li>
601
+
<li>On extension configuration set sizes of resized images to 200x200 and the deletion of original file to true</li>
602
+
<li>Click on install extension</li>
603
+
</ol>
604
+
605
+
In case you do not want to upload a resized version and upload the original file, you should avoid step **5**.
606
+
607
+
### Storage Rules
608
+
609
+
To make images reachable, we needed to set our storage rules to allow users to `write` on the storage made for the user logo, only if they are authenticated, but they can always `read`, this was set for saving the user´s logo path on the database.
610
+
611
+
**Should look like this**
612
+
613
+
```javascript
614
+
servicefirebase.storage {
615
+
match /b/{bucket}/o {
616
+
match /users/{imageId} {
617
+
allow write:ifrequest.auth!=null;
618
+
allow read:iftrue;
619
+
}
620
+
}
621
+
}
622
+
```
623
+
572
624
## Contributors
573
625
574
626
We'd like to thank these awesome people who made this whole thing happen:
0 commit comments