CODEWITHSUNDEEP
javascriptreactjsnext.jsreact-dropzone
Eoin O' Toole
Eoin O' Toole

Reputation: 49

Using react-dropzone with nextjs - input with type "file" multiple property stuck on false for server render, how can I set it to true?

I'm using react-dropzone on a nextjs project and currently when I server render a dropzone component I get the error:

"index.js:2178 Warning: Prop multiple did not match. Server: "false" Client: "true"

I've tried setting multiple={true} on the component but no luck. However, when I set multiple={false} on the component the client render works fine but has disabled the multi file upload (as expected)

Any ideas on why it isn't rendering with multiple={true} for a full server render?

React, NextJS project with react-dropzone

Tried setting multiple={true} on component. Tried rebuilding project.

Setting multiple={false} works but disables the required functionality. 

<Dropzone multiple={true} onDrop={this.onDrop}>
  {({ getRootProps, getInputProps }) => (
    <StyledDropzone>
      <DropPoint {...getRootProps()}>
        <input {...getInputProps()} />
        <p>Drag and drop some images to upload</p>
      </DropPoint>
      <FilePreviewer>
        <Thumbs>{thumbs}</Thumbs>
      </FilePreviewer>
    </StyledDropzone>
  )}
</Dropzone>

Upvotes: 3

Views: 3566

Answers (1)

ja0nz
ja0nz

Reputation: 2101

For SSR set it like a native element:

<input {...getInputProps()} multiple />

Upvotes: 0

Related Questions