Rails 5, Paperclip GEM Upload Multiple Images In one Action

22 views Asked by At

Good morning, I am running into a problem with my fails form. I have the following code in my form

<%= property_fields.file_field :images, multiple: true, class: "form-control", id: "input-file" %>

I am also using <%= form_for @listing, html: { multipart: true } do |f| %>

In my property model I have the following

has_attached_file :images, styles: { medium: "300x300>", thumb: "100x100>" }

and in my controller I am permitting the :images array

    def listing_params
      params.require(:listing).permit(
        :description,
        :title,
        :price,
        property_attributes: [
          :address,
          :city,
          :state,
          :zip,
          :square_footage,
          :garage_size,
          :bedrooms,
          :bathrooms,
          :property_type,
          images: []
        ]
      )
    end

The error I am receiving is *** Paperclip::AdapterRegistry::NoHandlerError Exception: No handler found for [#<ActionDispatch::Http::UploadedFile:0x00007f1782373278 @tempfile=#<Tempfile:/tmp/RackMultipart20231028-35870-nlibw8.png>, @original_filename="Screenshot from 2023-07-29 10-47-29.png", @content_type="image/png", @headers="Content-Disposition: form-data; name=\"listing[property_attributes][images][]\"; filename=\"Screenshot from 2023-07-29 10-47-29.png\"\r\nContent-Type: image/png\r\n">]

I believe the problem is because I want to be able to upload multiple images in one form submit action, what I end up with in my controller is an array of images that looks like this [#<ActionDispatch::Http::UploadedFile:0x00007f1782373278 @tempfile=#<Tempfile:/tmp/RackMultipart20231028-35870-nlibw8.png>, @original_filename="Screenshot from 2023-07-29 10-47-29.png", @content_type="image/png", @headers="Content-Disposition: form-data; name=\"listing[property_attributes][images][]\"; filename=\"Screenshot from 2023-07-29 10-47-29.png\"\r\nContent-Type: image/png\r\n">]

How can I make sure that paperclip accepts an array of images, or how can I create a custom handler to somehow handle multiple images. I want to be able to accept up to 5 images per property record.

I am using bootstraps file-input javascript library to handle the image uploading, so it allows me to select multiple images and shows a preview of each image before I submit the form, I want to still be able to use this library as its very neat and seems to work other than me saving the images array.

I've tried modifying my form field for multiple: true, asking chatGPT for advice but chatGPT 3.5 doesn't seem to understand the problem I am facing very well. I've also tried manually changing the way I am saving the images array but nothing has worked. I am still facing the same error message, no handler found for saving the array.

0

There are 0 answers