react fine uploader not binding to form

Question

I'm trying to include fine uploader in my react app using react fine uploader. I need my image dropzone to bind to my form, so that images will be sent to the backend when I press submit along other form data. (So that I can correctly assign any images to the right database item).

For some reason this is not happening, and fineuploader tries to POST the images right away.

this is my ImagesUploader component:

import React from "react";

import FineUploaderTraditional from "fine-uploader-wrappers";
import Gallery from "react-fine-uploader";
import "react-fine-uploader/gallery/gallery.css";

const uploader = new FineUploaderTraditional({
  options: {
    core: { multiple: false },
    deleteFile: {
      enabled: true,
      debug: true,
      disableCancelForFormUploads: true
    },
    form: {
      interceptSubmit: true,
      autoUpload: false,
      element: document.getElementById("upload-area")
    },
    callbacks: {
      onComplete: function(id, name, response) {
        if (response.success) {
          console.log("UPLOAD SUCCESS");
        } else {
          console.log("problem uploading stuff");
        }
      }
    }
  }
});

const ImagesUploader = props =>
  <div id="upload-area">
    <Gallery uploader={uploader} />
  </div>;

export default ImagesUploader;

This is the component with the form that uses the component above:

import PropTypes from "prop-types";
import React from "react";
import { connect } from "react-redux";
import { reduxForm, SubmissionError } from "redux-form";

import Field from "../Users/Field";
import { SubmitButton, Title } from "../Users/styles";

import * as f from "../../libs/functions";
import { saveitem } from "../../actions/itemActions";
import ImagesUploader from "../ImagesUploader/ImagesUploader";

import { currentitem } from "../../reducers/combined/currentitem";

const doSaveItem = (data, dispatch, props) => {
  return dispatch(saveitem(props.item.id, data)).catch(response => {
    throw new SubmissionError(f.errorsFromProps(response));
  });
};

const itemForm = props => {
  // inspect(props, "form props");
  const { errors, handleSubmit, pristine, reset, submitting } = props;
  return (
    <form
      onSubmit={handleSubmit(doSaveItem)}
      action="/FORMimage"
      id="qq-form"
      method="post"
      enctype="multipart/form-data"
    >
      <Field
        name="title"
        type="text"
        placeholder="Titolo"
        label="Titolo"
        errors={errors}
      />
      <Field
        name="description"
        type="text"
        placeholder="descrizione"
        label="Descrizione"
        errors={errors}
      />
      <ImagesUploader />
      <SubmitButton type="submit" disabled={pristine || submitting}>
        Save
      </SubmitButton>
    </form>
  );
};

itemForm.propTypes = {
  item: PropTypes.object
};

const itemInitializedForm = reduxForm({
  form: "item"
})(itemForm);

export default connect(
  state => ({
    initialValues: state.item
  }),
  { load: currentitem }
)(itemInitializedForm);

Answer 1

React Fine Uploader uses the non-UI (core) version of Fine Uploader. This means all UI features native to Fine Uploader are absent, such as form support. If you want to submit files to Fine Uploader via your form, you'll need to do this the "react way". That involves passing an onSubmit function prop to your <form>. This function should call event.preventDefault() to prevent the post to the server. Additionally, you'll need to send whatever form data is present to Fine Uploader using the addFiles API method (for files) and setParams for params. You can actually pass the non-file form data alongside the files by including those as a 2nd parameter (formatted as an object) to addFiles.

I can actually see an additional component being added to React Fine Uploader, something like <FormUploader> that handles all of this for you. But, alas, I have not created such a component yet.