# onUploadProgress doesn't work

**URL:** <https://forum.codewithmosh.com/t/onuploadprogress-doesnt-work/22629>\
**Category:** React Native\
**Created:** [September 20, 2023, 3:23pm UTC](https://forum.codewithmosh.com/t/onuploadprogress-doesnt-work/22629 "2023-09-20T15:23:52Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![SilvesterBenjamin](https://avatars.discourse-cdn.com/v4/letter/s/97f17d/32.png) [@SilvesterBenjamin](https://forum.codewithmosh.com/u/SilvesterBenjamin)\
**Post date:** [September 20, 2023, 3:23pm UTC](https://forum.codewithmosh.com/t/onuploadprogress-doesnt-work/22629/1 "2023-09-20T15:23:52Z")

</div>

I am following the React Native course and in part two of the course in the Networking section, I ran into an issue. I am not able to get the upload progress from the backend when uploading a new listing. The post method itself is working correctly. I hope anyone can help me with this.

This is my listings.js file:

import client from “./client”;

const endpoint = “/listings/”;

const getListings = () =\> client.get(endpoint);

const addListing = (listing) =\> {  
const data = new FormData();  
data.append(“title”, listing.title);  
data.append(“price”, listing.price);  
data.append(“categoryId”, listing.category.value);  
data.append(“description”, listing.description);

listing.images.forEach((image, index) =\>  
data.append(“images”, {  
name: “image” + index,  
type: “image/jpeg”,  
uri: image,  
})  
);

if (listing.location)  
data.append(“location”, JSON.stringify(listing.location));

return client.post(endpoint, data, {  
onUploadProgress: (progress) =\> console.log(progress),  
});  
};

export default {  
addListing,  
getListings,  
};

---

<div class="post-metadata">

**Author:** ![irfan](https://avatars.discourse-cdn.com/v4/letter/i/8797f3/32.png) [@irfan](https://forum.codewithmosh.com/u/irfan)\
**Post date:** [November 4, 2023, 4:20pm UTC](https://forum.codewithmosh.com/t/onuploadprogress-doesnt-work/22629/2 "2023-11-04T16:20:37Z")

</div>

having the same issue…no Success yet

---

<div class="post-metadata">

**Author:** ![ced6](https://avatars.discourse-cdn.com/v4/letter/c/59ef9b/32.png) [@ced6](https://forum.codewithmosh.com/u/ced6)\
**Post date:** [November 8, 2023, 2:07am UTC](https://forum.codewithmosh.com/t/onuploadprogress-doesnt-work/22629/3 "2023-11-08T02:07:07Z")

</div>

Having this same issue. Any solution?

---

<div class="post-metadata">

**Author:** ![framicon](https://avatars.discourse-cdn.com/v4/letter/f/ed8c4c/32.png) [@framicon](https://forum.codewithmosh.com/u/framicon)\
**Post date:** [February 11, 2024, 7:15pm UTC](https://forum.codewithmosh.com/t/onuploadprogress-doesnt-work/22629/4 "2024-02-11T19:15:22Z")

</div>

Still not solution yet?

---

<div class="post-metadata">

**Author:** ![msalimbene](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/msalimbene/32/7810_2.png) [@msalimbene](https://forum.codewithmosh.com/u/msalimbene)\
**Post date:** [February 24, 2024, 2:06pm UTC](https://forum.codewithmosh.com/t/onuploadprogress-doesnt-work/22629/5 "2024-02-24T14:06:10Z")

</div>

Hello all. Having the same issue. But looking at axios docs [Request Config |&nbsp;Axios Docs](https://axios-http.com/docs/req_config)

```auto
// `onUploadProgress` allows handling of progress events for uploads
  // browser only
  onUploadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },

```

It’s not supposed to work. onUploadProgress is for browsers only, so it make sense that it doesn’t work on react-native.

I think that feature is completely deprecated at the moment. Agree @Mosh ?

---

<div class="post-metadata">

**Author:** ![marouissi](https://avatars.discourse-cdn.com/v4/letter/m/e9bcb4/32.png) [@marouissi](https://forum.codewithmosh.com/u/marouissi)\
**Post date:** [May 5, 2024, 11:35pm UTC](https://forum.codewithmosh.com/t/onuploadprogress-doesnt-work/22629/6 "2024-05-05T23:35:04Z")

</div>

I have been debugging this issue the whole day and I was not able to fix it. It used to be working.  
Does anyone have a fix for it ?

---

<div class="post-metadata">

**Author:** ![luisdiego](https://avatars.discourse-cdn.com/v4/letter/l/ac8455/32.png) [@luisdiego](https://forum.codewithmosh.com/u/luisdiego)\
**Post date:** [June 25, 2024, 1:16am UTC](https://forum.codewithmosh.com/t/onuploadprogress-doesnt-work/22629/7 "2024-06-25T01:16:48Z")

</div>

I’m having the same issue.

Is someone here already fix it?

---

<div class="post-metadata">

**Author:** ![luisdiego](https://avatars.discourse-cdn.com/v4/letter/l/ac8455/32.png) [@luisdiego](https://forum.codewithmosh.com/u/luisdiego)\
**Post date:** [July 1, 2024, 8:41pm UTC](https://forum.codewithmosh.com/t/onuploadprogress-doesnt-work/22629/8 "2024-07-01T20:41:56Z")

</div>

> [@msalimbene](#):
>
> onUploadProgress

Hey Msalimbene,  
My issue I have that is showing up my progress as 0%, like if not progress at all, but I get the data on the feed tab.

any suggestions?

return client.post(endpoint, data, {  
onUploadProgress: (ProgressEvent) =\> {  
onUploadProgress(ProgressEvent.loaded / ProgressEvent.total);  
},  
});

---

<div class="post-metadata">

**Author:** ![msalimbene](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/msalimbene/32/7810_2.png) [@msalimbene](https://forum.codewithmosh.com/u/msalimbene)\
**Post date:** [July 2, 2024, 12:53pm UTC](https://forum.codewithmosh.com/t/onuploadprogress-doesnt-work/22629/9 "2024-07-02T12:53:00Z")

</div>

Hello @luisdiego, I don’t think it has been fixed. It is a problem with the component that works only on react-web. You are using react-native right?

---

<div class="post-metadata">

**Author:** ![luisdiego](https://avatars.discourse-cdn.com/v4/letter/l/ac8455/32.png) [@luisdiego](https://forum.codewithmosh.com/u/luisdiego)\
**Post date:** [July 22, 2024, 7:12pm UTC](https://forum.codewithmosh.com/t/onuploadprogress-doesnt-work/22629/10 "2024-07-22T19:12:06Z")

</div>

Yes, this I am using react native, thanks for replying!

---

<div class="post-metadata">

**Author:** ![atakanb](https://avatars.discourse-cdn.com/v4/letter/a/eb9ed0/32.png) [@atakanb](https://forum.codewithmosh.com/u/atakanb)\
**Post date:** [July 24, 2024, 7:37pm UTC](https://forum.codewithmosh.com/t/onuploadprogress-doesnt-work/22629/11 "2024-07-24T19:37:17Z")

</div>

**HERE’S THE SOLUTION 2024**

Guys i faced the same issue and **solved** it but i forgot what i did. The bugs are related to deprecated packages or a tiny detail in this course. That tiny detail is usually the **‘flex’** style.

Check out the animation container inside the uploadScreen.js

```auto
  animation: {
    width: 150,
    flex: 1, //!!necessary!!
  },

```

Here’s my **whole code** about it:

**listings.js file:**

> **Click to inspect the code**
>
> ```auto
> import client from "./client";
> 
> const listingsEndpoint = "/listings";
> 
> const getListings = () => client.get(listingsEndpoint);
> 
> const postListings = (listing, onUploadProgress) => {
> const data = new FormData();
> 
> data.append("title", listing.title);
> data.append("price", listing.price);
> data.append("categoryId", listing.category.value);
> data.append("description", listing.description);
> 
> listing.images.forEach((image, index) =>
> data.append("images", {
> name: "image" + index,
> type: "image/jpeg",
> uri: image,
> })
> );
> 
> if (listing.location)
> data.append("location", JSON.stringify(listing.location));
> 
> console.log("Posted Data:", data);
> 
> return client.post(listingsEndpoint, data, {
> headers: {
> "Content-Type": "multipart/form-data",
> },
> onUploadProgress: (progress) => {
> if (onUploadProgress) {
> onUploadProgress(progress.loaded / progress.total);
> }
> },
> });
> };
> 
> export default {
> getListings,
> postListings,
> };
> 
> ```

**ListingEditScreen.js file:**

> **Click to inspect the code**
>
> ```auto
> import { StyleSheet } from "react-native";
> import { React, useState } from "react";
> import * as Yup from "yup";
> 
> import Screen from "../components/Screen";
> import {
> AppForm,
> AppFormField,
> AppFormPicker,
> SubmitButton,
> } from "../components/forms";
> import CategoryPickerItem from "../components/CategoryPickerItem";
> import FormImagePicker from "../components/forms/FormImagePicker";
> import useLocation from "../hooks/useLocation";
> import listingsApi from "../api/listings";
> import UploadScreen from "./UploadScreen";
> 
> const validationSchema = Yup.object().shape({
> title: Yup.string().required().min(1).label("Title"),
> price: Yup.number().required().min(1).max(10000).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 = [
> {
> label: "Furniture",
> value: 1,
> icon: "floor-lamp",
> backgroundColor: "#fc5c65",
> },
> { label: "Cars", value: 2, icon: "car", backgroundColor: "#fd9644" },
> { label: "Cameras", value: 3, icon: "camera", backgroundColor: "#fed330" },
> { label: "Games", value: 4, icon: "cards", backgroundColor: "#26de81" },
> {
> label: "Clothing",
> value: 5,
> icon: "shoe-heel",
> backgroundColor: "#2bcbba",
> },
> { label: "Sports", value: 6, icon: "basketball", backgroundColor: "#45aaf2" },
> {
> label: "Movies & Music",
> value: 7,
> icon: "headphones",
> backgroundColor: "#4b7bec",
> },
> {
> label: "Books",
> value: 8,
> icon: "book-open-blank-variant",
> backgroundColor: "#884ab4",
> },
> {
> label: "Other",
> value: 9,
> icon: "page-layout-header",
> backgroundColor: "#5e6f81",
> },
> ];
> 
> export default function ListingEditScreen() {
> const location = useLocation();
> 
> //TODO: DONE check out the source control for bugs!
> const [uploadProgress, setUploadProgress] = useState(0);
> const [uploadVisible, setUploadVisible] = useState(false);
> 
> const handleSubmit = async (listing, { resetForm }) => {
> setUploadProgress(0);
> setUploadVisible(true);
> const result = await listingsApi.postListings(
> { ...listing, location }, //FIXME: FIXED include the location data later
> (uploadProgress) => setUploadProgress(uploadProgress)
> );
> 
> if (!result.ok) {
> setUploadVisible(false);
> return alert("Couldn't save the listing"); //FIXME: STILL causing error while uploading too many images.
> }
> 
> resetForm();
> };
> 
> return (
> <Screen style={styles.container}>
> <UploadScreen //FIXME: FIXED(with flex:1) done.json not shown on screen fully
> onDone={() => {
> setUploadVisible(false);
> }}
> visible={uploadVisible}
> progress={uploadProgress}
> />
> <AppForm
> initialValues={{
> title: "",
> price: "", //It must be string
> description: "",
> category: null,
> images: [],
> }}
> onSubmit={handleSubmit}
> validationSchema={validationSchema}
> >
> <FormImagePicker
> name="images"
> //FIXME: FIXED image not shown on screen and can't delete!
> />
> <AppFormField
> maxLength={255}
> name="title"
> placeholder="Title"
> //FIXME: FIXED Not reseting
> />
> <AppFormField
> containerWidth="30%"
> keyboardType="numeric"
> maxLength={8} //TODO: max 9999.99 increase the value later
> name="price"
> placeholder="Price"
> //FIXME: FIXED Not reseting
> />
> <AppFormPicker
> numColumns={3}
> containerWidth="55%"
> items={categories}
> name="category"
> PickerItemComponent={CategoryPickerItem}
> placeholder="Category"
> />
> <AppFormField
> maxLength={255}
> multiline
> name="description"
> numberOfLines={2}
> placeholder="Description"
> //FIXME: FIXED Not reseting
> />
> <SubmitButton title="Post" />
> </AppForm>
> </Screen>
> );
> }
> 
> const styles = StyleSheet.create({
> container: {
> padding: 10,
> },
> });
> 
> ```

**UploadScreen.js file:**

> **Click to inspect the code**
>
> ```auto
> import { View, StyleSheet, Modal } from "react-native";
> import React from "react";
> import * as Progress from "react-native-progress";
> import LottieView from "lottie-react-native";
> 
> import colors from "../config/colors";
> 
> export default function UploadScreen({
> onDone,
> progress = 0,
> visible = false,
> }) {
> return (
> <Modal visible={visible}>
> <View style={styles.container}>
> {progress < 1 ? (
> <Progress.Bar
> color={colors.primary}
> progress={progress}
> width={200}
> />
> ) : (
> <LottieView
> autoPlay
> loop={false}
> onAnimationFinish={onDone}
> source={require("../assets/animations/done.json")}
> style={styles.animation}
> />
> )}
> </View>
> </Modal>
> );
> }
> 
> const styles = StyleSheet.create({
> animation: {
> width: 150,
> flex: 1, //!!necessary!!
> },
> container: {
> alignItems: "center",
> flex: 1,
> justifyContent: "center",
> },
> });
> 
> ```

**Reply for questions.**