15 - Tracking Upload Progress

React Native
1

Hello everyone,

I’ve encountered a bit of an issue that I’d like to share. I’ve been trying to debug an aspect of my code, specifically related to the onUploadProgress property within the configuration object for the Axios POST method. I’m currently unable to see the expected log output in the console, and I’m wondering if anyone might be able to provide some insights or suggestions.

Thank you!

import Listing from "../interfaces/listing";
import FormEditValues from "../interfaces/formEditValues";

import apiClient from "./client";

const ENDPOINT = "/listings";

interface AddListingT extends FormEditValues {
  location?: {
    latitude: number;
    longitude: number;
  };
}

const getListings = () => apiClient.get<Listing[]>(ENDPOINT);

const addListing = (
  { title, category, price, images, description, location }: AddListingT,
  onUploadProgress: (progressPercentage: number) => void
) => {
  const data = new FormData();
  data.append("title", title);
  data.append("price", price);

  if (category) data.append("categoryId", category.value.toString());
  if (description) data.append("description", description);
  if (location) data.append("location", JSON.stringify(location));

  images.forEach((image, index) =>
    data.append("images", {
      name: "image" + index,
      type: "image/jpeg",
      uri: image,
    } as unknown as Blob)
  );

  return apiClient.post(ENDPOINT, data, {
    headers: { "Content-Type": "multipart/form-data" },

    onUploadProgress: (progressEvent) => {
      console.log("Test onUploadProgress");

      onUploadProgress(progressEvent.loaded / progressEvent.total);
    },
  });
};

export default {
  getListings,
  addListing,
};

and the component where the function is called

import React from "react";
import { StyleSheet } from "react-native";
import * as Yup from "yup";

import { AppForm, AppFormField, SubmitButton } from "../components/forms";
import Screen from "../components/Screen";
import AppFormPicker from "../components/forms/AppFormPicker";
import CategoryPickerItem from "../components/CategoryPickerItem";
import FormImagePicker from "../components/forms/FormImagePicker";

import useLocation from "../hooks/useLocation";
import FormEditValues from "../interfaces/formEditValues";
import Item from "../interfaces/item";
import listingsApi from "../api/listings";

const validationSchema = Yup.object().shape({
  title: Yup.string().required().min(1).label("Title"),
  price: Yup.number().required().min(1).label("Price"),
  description: Yup.string().label("Description"),
  category: Yup.object().required().nullable().label("Category"),
  images: Yup.array().min(1, "Please select at least one image."),
});

const categories: Item[] = [
  { label: "Furniture", value: 1, name: "floor-lamp", backgroundColor: "red" },
  { label: "Cars", value: 2, name: "car", backgroundColor: "orange" },
    ......Unnecesary code
];

type FormValues = FormEditValues;

function ListingEditScreen() {
  const location = useLocation();

  const handleSubmit = async (listing: FormEditValues) => {
    const result = await listingsApi.addListing(
      { ...listing, location },
      (progress) => {
        console.log("Test addListing");

        console.log(progress);
      }
    );

    if (!result.ok) return alert("Could not save the listing.");

    alert("Success");
  };

  return (
    <Screen style={styles.container}>
      <AppForm<FormValues>
        initialValues={{
          title: "",
          price: "",
          description: "",
          category: null,
          images: [],
        }}
        onSubmit={handleSubmit}
        validationSchema={validationSchema}
      >
        <FormImagePicker<FormValues> name="images" />

        <AppFormField<FormValues>
          name="title"
          maxLength={255}
          placeholder="Title"
        />

        <AppFormField<FormValues>
          name="price"
          maxLength={8}
          placeholder="Price"
          keyboardType="numeric"
          width={"25%"}
        />

        <AppFormPicker<FormValues>
          items={categories}
          name="category"
          placeholder="Category"
          width="50%"
          PickerItemComponent={CategoryPickerItem}
          numberOfColumns={3}
        />

        <AppFormField<FormValues>
          name="description"
          placeholder="Description"
          maxLength={255}
          numberOfLines={3}
          multiline
        />

        <SubmitButton title="Post" />
      </AppForm>
    </Screen>
  );
}

const styles = StyleSheet.create({
  container: { padding: 10 },
});

export default ListingEditScreen;