when i use this approach redux warns of a mutation on the File object's lastModifiedDate field

[scamden]

I have read that you should only use primitives in the redux store and perhaps this is why? any thoughts on this?

[BBB]

@scamden can you give me some more details please? What version of redux/ redux-form are you using?

Are you manipulating the files at all?

[scamden]

absolutely, sorry for the lack of detail. we're using redux form 6.1 and redux 3.6, i'm not manipulating the files and thats what's odd. what ends up mutated is the last modified date. despite the date seemingly not changing the reference of the date object on the file object is changing. even between calling my async action creator and dispatching the action. i assumed that somehow the File object generates the date on demand or something strange like that, but would love it if there's another explanation. the reason for the error btw is our use of redux-immutable-state-invariant, i don't believe it would fail without that.

[imyagnesh]

@BBB I am getting the same issue.

i am getting following error when i upload the file second time.

Uncaught Error: A state mutation was detected between dispatches, in the path form.SkillForm.values.files.0.lastModifiedDate. This may cause incorrect behavior.

following is my code snippet

import { PropTypes } from 'react';
import Dropzone from 'react-dropzone';

const style = {
  dropZoneStyle: {
    borderWidth: '2px',
    borderColor: 'black',
    borderStyle: 'dashed',
    borderRadius: '4px',
    padding: '30px',
    width: '100%',
    transition: 'all 0.5s',
  },
  innerDropZoneStyle: {
    textAlign: 'center',
  },
};

const DropzoneInput = (field) => {
  const files = field.input.value;
  return (
    <div>
      <Dropzone
        name={field.name}
        onDrop={(filesToUpload, e) => {
          const acceptedFiles = [ ...filesToUpload ];
          field.input.onChange(acceptedFiles);
        }}
        style={style.dropZoneStyle}
      >
        <p style={style.innerDropZoneStyle}>Drop an image or click to select a file to upload.</p>
      </Dropzone>
      {field.meta.touched &&
    field.meta.error &&
    <span className="error">{field.meta.error}</span>
  }
  {
  files && Array.isArray(files) && (
    <ul>
      {files.map((file, i) => <li key={i}>{file.name}</li>)}
    </ul>
  )
  }
    </div >
  );
};

DropzoneInput.propTypes = {
  field: PropTypes.object,
};

export default DropzoneInput;

[scamden]

Ya I ended up creating a primitive only version of the file object to store in state

…

On Wed, Dec 7, 2016 at 10:19 PM yagneshmodh ***@***.***> wrote: @BBB <https://github.com/BBB> I am getting the same issue. i am getting following error when i upload the file second time. Uncaught Error: A state mutation was detected between dispatches, in the pathform.SkillForm.values.files.0.lastModifiedDate. This may cause incorrect behavior. following is my code snippet import { PropTypes } from 'react'; import Dropzone from 'react-dropzone'; const style = { dropZoneStyle: { borderWidth: '2px', borderColor: 'black', borderStyle: 'dashed', borderRadius: '4px', padding: '30px', width: '100%', transition: 'all 0.5s', }, innerDropZoneStyle: { textAlign: 'center', }, }; const DropzoneInput = (field) => { const files = field.input.value; return ( <div> <Dropzone name={field.name} onDrop={(filesToUpload, e) => { const acceptedFiles = [ ...filesToUpload ]; field.input.onChange(acceptedFiles); }} style={style.dropZoneStyle} > <p style={style.innerDropZoneStyle}>Drop an image or click to select a file to upload.</p> </Dropzone> {field.meta.touched && field.meta.error && <span className="error">{field.meta.error}</span> } { files && Array.isArray(files) && ( <ul> {files.map((file, i) => <li key={i}>{file.name}</li>)} </ul> ) } </div > ); }; DropzoneInput.propTypes = { field: PropTypes.object, }; export default DropzoneInput; — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABE5mDKvHiaHdmLmLsK0DMvCSwBpUCOsks5rF6FmgaJpZM4KzGnW> .

[BBB]

@yagneshmodh I'd suggest making an issue with the redux-immutable-state-invariant it seems like it is the root of your issue.

[ifranke]

See the same problem with redux-immutable-state-invariant in file type input. Problem occurs in any variations with DropZone or with simple file input...

[dannymcpherson]

Is the primitive only version sufficient for uploading the file?

[scamden]

@dannymcpherson it's not. i send the real file to an action where it begins the upload but stores only the primitive version in state

[jhonatasobrinho]

Any new implementation regarding this issue? I tried almost every solution to this but none of them worked :(

[linde12]

Actually i think this is valid. I don't think it's redux-immutable-state-invariant's fault either.

It looks like lastModifiedDate is being "changed" (the date is the same but the reference points to another Date instance) in the File which is why redux-immutable-state-invariant is saying that someone mutated state.

File.lastModifiedDate is deprecated and is never equal to itself (file.lastModifiedDate === file.lastModifiedDate // always false) that's why redux-immutable-state-invariant complains about it being mutated. I still think it should be handled by redux-form though.

Maybe redux-form can have explicit support for handling files. Putting the File instances in the store, IMHO, is a nasty thing to do either way.

[AuthorProxy]

So any workarounds? Now only is ignoring at redux-immutable-state-invariant works for me.

[gss-patricia]

I've the same issue._

[vonkanehoffen]

@AuthorProxy @gss-patricia as mentioned here: leoasis/redux-immutable-state-invariant#38 you can set redux-immutable-state-invariant to ignore the node of your redux store containing the file. Just init it with the relevant path. Something like:

const middleware = immutableStateInvariantMiddleware({
            ignore: [
                'wherever.your.storing.your.file',
            ]
        })

[AuthorProxy]

@gss-patricia @vonkanehoffen

yes it's ok for one simple form, but I should write something like this for forms with dynamic fields:

form.trip-edit-expenses.values.expenses[1].receiptFileBlob
form.trip-edit-expenses.values.expenses[2].receiptFileBlob
form.trip-edit-expenses.values.expenses[3].receiptFileBlob
form.trip-edit-expenses.values.expenses[4].receiptFileBlob
form.trip-edit-expenses.values.expenses[5].receiptFileBlob

and because form has dynamic fields and redux-immutable-state-invariant doesn't support regex, I should write something like this: form.trip-edit-expenses.values.expenses which ignore every other field together with receiptFileBlob, which works but kill all redux-immutable-state-invariant features.

And it's just one form, I have a lot of forms which accepts files, and even if regex will be supported it's looks more like a hack then a prefereble behaviour for a common usecase

[abolognino]

instead of storing the File in the store I create an URL for the file and store that in the store

onDrop = (filesAccepted) => {
    const file = filesAccepted[0];
    const url = URL.createObjectURL(file);
    this.props.fileSelected({name: file.name, url: url}); /* this dispatches an action */
};

then when I need the actual content I simply retrieve it like this:

const blob = await fetch(file.url).then(r => r.blob());

[NwawelAIroume]

instead of storing the File in the store I create an URL for the file and store that in the store

onDrop = (filesAccepted) => {
    const file = filesAccepted[0];
    const url = URL.createObjectURL(file);
    this.props.fileSelected({name: file.name, url: url}); /* this dispatches an action */
};

then when I need the actual content I simply retrieve it like this:

const blob = await fetch(file.url).then(r => r.blob());

getting an error when trying to get the dataURL
Uncaught (in promise) TypeError: Failed to fetch

[NwawelAIroume]

@gss-patricia @vonkanehoffen

yes it's ok for one simple form, but I should write something like this for forms with dynamic fields:

form.trip-edit-expenses.values.expenses[1].receiptFileBlob
form.trip-edit-expenses.values.expenses[2].receiptFileBlob
form.trip-edit-expenses.values.expenses[3].receiptFileBlob
form.trip-edit-expenses.values.expenses[4].receiptFileBlob
form.trip-edit-expenses.values.expenses[5].receiptFileBlob

and because form has dynamic fields and redux-immutable-state-invariant doesn't support regex, I should write something like this: form.trip-edit-expenses.values.expenses which ignore every other field together with receiptFileBlob, which works but kill all redux-immutable-state-invariant features.

And it's just one form, I have a lot of forms which accepts files, and even if regex will be supported it's looks more like a hack then a prefereble behaviour for a common usecase

import {isImmutableDefault} from "@reduxjs/toolkit";
const isImmutable = (value) => isImmutableDefault(value) || value instanceof File

in the getDefaultMiddleware add this

...
immutableCheck: {
          isImmutable: isImmutable,
...
}