Multi Step Form with Image Uploader

Multi step form with image uploader

Actually I solved my problem. Here's working code for multistep forms with file uploading using carrierwave

if params[:user][:img_path]
  @uploaded = params[:user][:img_path]
  params[:user].delete(:img_path)
end
session[:user_data].deep_merge!(params[:user]) if params[:user]
@user = User.new(session[:user_data])    

if @uploaded
  # here how validation will work
  @user.img_path = @uploaded
end
@user.current_stage = session[:register_stage]
if @user.valid?
  if @user.last_stage?
    @user.img_path  = session[:img] if @user.last_stage?
    @user.save
  else  
    @user.next_stage
  end
  # now we can store carrierwave object in session
  session[:img] = @user.img_path
  session[:register_stage] = @user.current_stage
end

Save multiple image in react with a multiple step form

You seem to be treating formData as a plain object but for posting multipart/form-data, you should be using a FormData instance.

First, create formData as a ref so it's not recreated for every render. You can also create a function to pass to your components for adding files

// in ProductForm
const formData = useRef(new FormData());

const addFoto = (file) => {
  formData.current.append("foto", file);
};

Now you can pass the addFoto function to your components

<Basics addFoto={addFoto} />

and use it in your Media component

export default function Media({ addFoto }) {

  const handleChange = (file) => {
    addFoto(file);
  };

  // ...

Finally, back in your ProductForm component, post the data like this

// no custom headers required
axios.post(`${URL}/api/productos`, formData.current);

Where can I temporarily store file uploads in a React multi step form?

Add state to the parent component that houses all the form steps and then store all of the form data in local state. Once you are ready to submit, use the state values to submit.

You can store a file in react state just like you would any other form input. The file will be a variable obtained from event.target.files

---

Related Topics