Rails 6 require an explicit save before attaching file; which causes my page to reload endlessly with this package.

[andrew-oko-odion]

The My File upload handler

  async uploadAvatar(upload) {
    const URI = `${process.env.API}/${process.env.ACCOUNT_UPDATE_URI}`;

    const res = await fetch(URI, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
        Authorization: this.props.token
      },
      body: JSON.stringify({ avatar: upload.file.name })
    });

      try {
	  if (res.ok) {
	      const data = await res.json();
	      console.log(data);
	      console.log("Avatar Uploaded, try to render it");
	      this.props.dispatch(userSuccess({ ...data }));
	      // message.success("update successfully");
	      this.setState({avatarStatus: "upload successfull"})
	  } else {
	      const data = res.statusText();
	      console.log(data);
	  }
      } catch {
	  console.log("Some network error occored");
      }
  }

The File Upload Componenet

			<Col sm={2} xs={2}> 
			    <ActiveStorage
				endpoint={{
				    path: "users",
				    host: process.env.UPLOAD_URI,
				    model: "User",
				    attribute: "avatar",
				    method: "PUT",
				    protocol: "https"
				}}
				headers={{ Authorization: this.props.token }}
				directUploadsPath="/rails/active_storage/direct_uploads"
				onSubmit={user => this.setState({ avatar: user.avatar })}
				render={({ handleUpload, uploads, ready }) => (
				    <div>
					<label>
					    <div className="avatar-item">
						{!isEmpty(this.props.userData.avatar_url) ? (
						    <img
						    className="thumbnail-image"
							       src={
							       process.env.API + this.props.userData.avatar_url
							       }
						    />
						) : (
						    <span>
							<Icon type="plus" style={{ fontSize: "20px" }} />
							<div style={{ fontSize: "13px" }}>
							    Upload Avatar
							</div>
						    </span>
						)}
						
						<input
						type="file"
						      disabled={!ready}
						      onChange={e => handleUpload(e.currentTarget.files)}
						/>
						{uploads.map(upload => {
						    switch (upload.state) {
							case "waiting":
							    return (
								<span key={upload.id}>
								    <Spin indicator={loadingIcon} />
								</span>
							    );
							case "uploading":
							    return (
								<span key={upload.id}>
								    <Spin indicator={loadingIcon} />
								</span>
							    );
							case "error":
							    return (
								<span key={upload.id}>
								    Error uploading {upload.file.name}:{" "}
								    {upload.error}
								</span>
							    );
							case "finished":
							    return (
								<React.Fragment>
								    <span key={upload.id}>
									<Icon type="check" />
									{ this.uploadAvatar(upload) }
									{this.state.avatarStatus && <p> done </p>}
								    </span>
								</React.Fragment>
							    );
						    }
						})}
					    </div>
					</label>
				    </div>
				)}
			    />
			</Col>

I am using nextjs ^9.0.5-canary.1
yarn 1.152
and node 12.2.0

[andrew-oko-odion]

@cbothner how can I fix this problem