Tracking Upload progress

React Native
1

immagine
immagine591×1280 8.56 KB

Hello everybody,
somebody experimented the same error? I am in the second part (backend) of the JavaScript course and in the Upload progress doesn’t work. I tried to fix the issue with Axios, but it doesn’t work either. Some suggestions?
Thank you!

2

Hi, I think this is a common issue. Here is a couple of links to threads which might help:

https://forum.codewithmosh.com/t/onuploadprogress-doesnt-work/22629/11

https://forum.codewithmosh.com/t/15-tracking-upload-progress/22286

If you really stuck then the below code works on snack (react-native in the browser) - just add all the dependancies at the bottom when prompted and run it on choosen platform:

App.js

import React, { useState } from "react";
import { Modal, View, StyleSheet, Button, Text } from "react-native";
import * as Progress from "react-native-progress";


const colors = { primary: "#3498db" };

function UploadScreen({ onDone, progress = 0, visible = false }) {
  return (
    <Modal visible={visible} transparent>
      <View style={styles.container}>
        {progress < 1 ? (
          <Progress.Bar
            color={colors.primary}
            progress={progress}
            width={200}
          />
        ) : (
          // Replacing LottieView with a Text message for Snack preview
          <Text style={styles.message}>Upload Complete!</Text>
        )}
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    flex: 1,
    justifyContent: "center",
    backgroundColor: "rgba(0,0,0,0.7)"
  },
  message: {
    color: colors.primary,
    fontSize: 18,
    fontWeight: "bold"
  }
});

export default function App() {
  const [visible, setVisible] = useState(true);
  const [progress, setProgress] = useState(0);

  // Simulate upload progress
  React.useEffect(() => {
    if (progress < 1) {
      const interval = setInterval(() => {
        setProgress((prev) => Math.min(prev + 0.1, 1));
      }, 500);
      return () => clearInterval(interval);
    }
  }, [progress]);

  return (
    <View style={{ flex: 1, justifyContent: "center" }}>
      <Button title="Show Upload Screen" onPress={() => setVisible(true)} />
      <UploadScreen
        visible={visible}
        progress={progress}
        onDone={() => setVisible(false)}
      />
    </View>
  );
}
3

Hi, yes, and I solved it.

Feel free to check my repo for the code:

Basically not even XMLHttpRequest was working, so I went with an “extra manual” implementation :smiley:

1 Like
4

Thank you so much !! it works !! the only problem is that when I push the button the bar appears before to charge the data. I ll let you know if I solve the thing! :slight_smile:

5

Thank you for sharing the entire project !! Did you complete the all course? I am in the second part of the backend

6

Sorry, I don’t understand what you mean :see_no_evil:
What bar? Appears before what?
By “charge the data” you mean “upload the data”?

I haven’t done the progress bar yet, but what I’ve noticed is that if I try to add a listing more than once, to test, the progress bar will start at 100% before it goes back to 0%.
Maybe that’s what you mean.
setting uploadProgress back to zero when you hide the modal shall do the trick:
const formDataWithoutImg = { title, price, categoryId: category.id, description, location }

    try {
        const response = await listingsApi.createListing(data, formDataWithoutImg, setUploadProgress)
        setIsModalVisible(false)
        setUploadProgress(0) //---> try this

        alert('Success')
    } catch (error) {
        console.error('Error creating listing:', error)
        alert('Error saving your listing')
    }
}

Ref your question in the 2nd comment, no, I haven’t finished, I spent some hours trying to find a solution for getting the progress data.

Note: in the end the problem with the XMLHttpRequest solution was an error in the response, saying that location must be of type object. I tried parsing it, but no luck. The problem persists with my solution, I only didn’t notice because as it is, the createListing function is not returning anything (if you console.log this —>
const response = await listingsApi.createListing(data, formDataWithoutImg) you’ll get undefined)

Now that I have it, I can move on :sunglasses:

7

immagine
immagine591×1280 43.3 KB

look at this. Is what I wanted to say :smiley: The problem is that is not charging, but since we are in a simulation I understand that we can move on right?