Redirects to and/or reloads the current Redux Form

There seems to be a bug where if you have a file attached with some text, despite the AJAX response (on success and/or on error), the Redux Form will reload. It’ll take over the promise, refresh and push back to the form.

If the current behavior is a bug, please provide the steps to reproduce.

1. Create a Redux Form with some input fields: file, text, text, text
2. Make an AJAX request to an API
3. API responds with success or error
4. The form seems to override the promise, refresh and/or redirect back to the same form

Not redirecting properly on success (does the same thing for API errors, where it’ll just refresh the page): https://youtu.be/rvQLn0dJtMg

As you can see in the video, despite the bad redirect and the missing notification, the form still submits successfully.

What is the expected behavior? Expected to redirect to the specified push in browserHistory. By disabling React-Dropzone, the form works properly…

Proper redirecting and notification on success: https://youtu.be/gsX6Oo_3XTM

Please mention other relevant information such as the browser version, Operating System and react-dropzone version. OS: Linux Mint 18.1 Browser: Chrome Version 61.0.3163.79 Using the Create React App with: react v15.6.1 react-dropzone v.4.1.0 react-redux v5.0.6 react-router v3.0.4 redux v3.7.2 redux-form v7.0.3 redux-thunk v2.2.0

BlogForm.jsx:

  handleFormSubmit = formProps => {
    const formData = CreateFormData(formProps); // creates a "new formData" with formProps
    const config = ConfigAuth(); // sets the headers for authentication

   this.props.addNewPost(formData, config);
};

postActionCreators.jsx

export const addNewPost = (id, formData, config) => {	
  return dispatch => {
     app.post(`/api/create/post`, formData, config)
     .then(({ data: { message } }) => {
        dispatch({ type: AUTH_SUCCESS, payload: message }); // displays a success notification
	redirectToBlog(); // pushes browserHistory back to '/blog/page?pageId=1'
     })
     .catch(err => {
	dispatch({ type: AUTH_ERROR, payload: err }); // displays an error notification with the API response
	console.error(err); // logs the error to the console
      });
};

[mattcarlotta]

Problem has been resolved! The problem was the create-react-app was automatically refreshing because of a new file being added to a monitored public/uploads folder. Anything gets added to it, the CRA refreshes the app. 3 days of debugging and it finally hit me while I was walking my dog that this could cause the refresh…

For those who may run into the same issue, here’s a way to temporarily disable the auto reload… https://github.com/facebookincubator/create-react-app/issues/2519#issuecomment-318867289

For those who want to reproduce the redirect/error for themselves, here’s a stripped down app with API: https://github.com/mattcarlotta/dropzone-test/tree/dropzone-redirect-problem

To install and run:

• You must have monogDB community edition installed
• You must add an empty uploads folder to: client/public (ex: dropzone-test/client/public/uploads)
• While at the root of the dropzone-test folder: npm i
• CD into the client folder: npm i
• CD back to the root of the dropzone-test folder: npm run dev to start instances of mongoDB, the front-end app and the API.

To reproduce the redirect error:

• Navigate to blog (will attempt to load any submitted posts)
• Click on the “Create a Post” button
• While at the form, upload an image that is relatively large
• Fill out the remaining fields with any text
• Click the Submit button

For those who want a solution to the problem (note: the above example will still not work in production due to the CRA’s compiling for production methods. The solution below addresses this issue.): https://github.com/mattcarlotta/dropzone-test

To install and run:

• Same steps as above, except create a public folder at the root folder and inside that folder create an uploads folder. (ex: dropzone-test/public/uploads)

Solution:

• Inside client/.env.development there’s a REACT_APP_API variable
• Images are now loaded via this variable: <img src={process.env.REACT_APP_API + image.path} alt={image.name} /> which will point to: http://localhost:5000/public/uploads/example.png in client/src/blog/renderPosts.jsx
• Express serves these files via an app.js static controller:

app.use('/public', express.static('public'));

In short, the problem is NOT with react-dropzone, but with the create-react-app in conjunction with where files are saved once uploaded. My apologies!

[headzoo]

Thanks again for providing so much detail. I setup a dummy app using create-react-app and so far everything works as expected. The app redirects to the new post after submitting the form. But of course I’ve only created a simple dummy app.

I’ve pushed the dummy app to a repo and sent you an invite. Can you update the form/reducers/actions/etc to better reflect how your app works so we recreate the problem? I’ll pull your changes and try again.

https://github.com/headzoo/dropzone-test