Skip to main content

Image / File

The Image or File fields enable users to upload images or files with ease from Rowy's Table UI. These photos or documents are subsequently uploaded to the Firebase Storage. The URL of the file/image uploaded to Firebase Storage is then made available in Firestore.

Users can also see a thumbnail of the uploaded image/file in the Table UI..

Steps​

  1. Click the Add column button on the right edge of the table header.
Adding an image column
  1. Set the user-facing Column name.
  2. Set the Field key, which is the name of the field in your Firestore document.
  3. Set the Field type to either Image or File depending upon the requirement.
  4. Upload the image or the file using the Upload Icon or simply drag and drop it into the desired cell.
Adding an image column

Technical Details​

Once the image or the file is uploaded, it is synced to the connected Firebase Storage. The generated Firebase Storage URL is then stored in the Firestore field as an array with the downloadURL pointing to the Firebase Storage URL.

Using this link, the user can access the Firebase Firestore datapoint for a specific file. This is useful for utilizing the Firebase Storage API.

Firestore JSON

By navigating to the side menu, the user can check out all the details of the current row, including the Reference Path, which is the Firestore path where the upload is stored.

Firestore path

Using Image Field with URL​

Using the Image Field with an existing URL instead of uploading an image is possible with the help of the Derivative Column. The Derivative Columns display values derived from another column's values.

Sample URL Column

To use this approach, it is required that the project has Rowy Run enabled.

Steps​

  1. Click the Add column button on the right edge of the table header.

  2. Set the user-facing Column name.

  3. Set the Field key, which is the name of the field in your Firestore document.

  4. Set the Field type to Derivative and set up Rowy Run as prompted (if not already).

  5. Set the Column Config as follows:

    Using Derivative Column to utilize image URL

    • Set the Listener fields to be the column containing the URL of the images.

    • Change the Output field type to Image.

    • Set the Derivative script to:

    const derivative: Derivative = async ({ row, ref, db, storage, auth }) => {
    return [{ downloadURL: row.URL_FIELD_KEY }]
    }

    export default derivative

    • Change the URL_FIELD_KEY to the field key of the URL column.

    • Lock the Derivative column to prevent people uploading to this column directly.

    • Continue to add images by providing the URL in the URL column.

Notes​

  • The image or the file field might appear very minute. To increase the visiblity if the images, one can simply increase the row height by navigating to the Row Height option on the top right corner.