CODEWITHSUNDEEP
javascriptreactjsamazon-web-servicesamazon-s3axios
Jingyi Wang
Jingyi Wang

Reputation: 956

Axios: Uploading to s3 resolves before upload finishes

I'm uploading an image to s3 through a signed url. The promise resolves immediately with undefined but the upload continues. The only way I know when an upload is finished is to check if compare upload progress with file size. I don't think this is the way it should be done. Am I missing anything?

This is my react code.

import { API } from "aws-amplify";
...

  const post = async e => {
    e.preventDefault();
    setIsSubmitting(true);

    let params = { body: { content: values.text } };
    if (values.file) params.body = { ...params.body, img: values.file.name };

    API.post(API_NAME, POST_URL, params)
      .then(response => {
        if (!params.body.img) {
          history.push(`/${username}`);
          return;
        }
        const options = {
          headers: { "Content-Type": "image/*" },
          onUploadProgress: progressEvent => console.log(progressEvent.loaded)
        };
        console.log(`Uploading file to ${response.url}`);
        axios.put(response.url, values.file, options);
      })
      .then(response => {
        console.log("Successfully created post.");
        console.log(response);
      })
      .catch(err => {
        alert(err.message);
        setIsSubmitting(false);
      });
  };

Output: https://i.imgur.com/Kb5tfrY.jpg

Upvotes: 0

Views: 387

Answers (1)

Karlan
Karlan

Reputation: 353

axios.put(response.url, values.file, options)

This is also a promise. Maybe you can chain the then call after this promise.

axios.put(response.url, values.file, options).then(response => {
        console.log("Successfully created post.");
        console.log(response);
      })

Upvotes: 1

Related Questions