Evanss
Evanss

Reputation: 23563

Progress for Slingshot is NaN or 1 (Meteor + React)

Im using Meteor, Slingshot and React. Slingshot's image upload to Amazon is working but I cant get the progress indication to work.

When I console.log(upload.progress()) the log returns NaN until the upload is complete, at which point it returns 1. For a progress indicator I need a % to work with.

import React from "react";
const upload = new Slingshot.Upload("myImageUploads");

class Uploader extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.handleUpload = this.handleUpload.bind(this);
    }

    handleUpload() {
        const file = this.fileInput.files[0];

        upload.send(file, function(error, downloadUrl) {
            if (error) {
                console.error("Error uploading");
                alert(error);
            } else {
                console.log("Success!");
                console.log(downloadUrl);
                Meteor.call(
                    "user.updatePic",
                    {
                        imgUrl: downloadUrl
                    },
                    err => {
                        if (err) {
                            console.error(err);
                        }
                    }
                );
            }
        });

        setInterval(() => {
            console.log(upload.progress());
        }, 100);
    }

    render() {
        return (
            <div>
                <input
                    type="file"
                    name="Uploader"
                    id="input"
                    ref={input => (this.fileInput = input)}
                />
                <button
                    type="button"
                    className="btn btn--iconOnly"
                    onClick={this.handleUpload}
                >
                    Upload
                </button>
            </div>
        );
    }
}

export default Uploader;

Upvotes: 1

Views: 97

Answers (0)

Related Questions