Busy.org: Fix reply to comment with uploaded image

Note: PR not showing up on Utopian GUI, link here.

I love using photos and gifs when responding to comments. This led me to find a sort of strange bug #1596.

If you upload a new image in response to a comment it ends up being in the text box for the original post. This caused me to post an image in response to OP when I actually was sending a meme to a commenter.

The code changes needed weren't a lot but the process of finding the cause of the bug took me a while. The code seemed to be fine. However using the chrome dom inspector I realized that each text box used the same ID. Thus the first instance of the ID on the page was always used, even when the second instance was the one intended.

As a solution I added an optional parameter to the EditorInput component used across the Busy
site. It allows passing an ID to ensure each instance will be unique.

Use of component:

            <EditorInput
              inputRef={this.setInput}
              autosize={{ minRows: 3, maxRows: 6 }}
              value={body}
              onChange={this.handleBodyUpdate}
              onImageUpload={this.props.onImageUpload}
              onImageInvalid={this.props.onImageInvalid}
              inputId={`${this.props.parentPost.id}-comment-inputfile`}
            />

Component's use of ID:

          <input
          <label htmlFor="inputfile">
            type="file"
            id={this.props.inputId || 'inputfile'}
            accept="image/*"
            onChange={this.handleImageChange}
          />
          <label htmlFor={this.props.inputId || 'inputfile'}>

I have used the feature since the PR was merged and the problem seems to be fixed.

Busy.org on Github

---

Posted on Utopian.io - Rewarding Open Source Contributors

---