undefined method `inject' for nil:NilClass

[dcalixto]

Hello, after follow the docs and the demo for multiple files upload seems very confusing use shrine with uppy js
in the docs is written to use this method

  def create


  new_photos_attributes = params[:files].inject({}) do |hash, file|
    hash.merge!(SecureRandom.hex => { image: file })
  end
    
    photos_attributes = item_params[:photos_attributes].to_h.merge(new_photos_attributes)
    item_attributes  = item_params.merge(photos_attributes: photos_attributes)

    @item = current_user.items.build(item_attributes)
 
    respond_to do |format|
      if @item.save
  

       format.html { redirect_to item_url(@item), notice: "Item was successfully created." }

      else
        format.html { render :new, status: :unprocessable_entity }

      end
    end
  end

But when the action POST is called in the logs show up this undefined method message

undefined method `inject' for nil:NilClass

the view, so i has no idea whats wrong, since i followed the docs and the exemple app.

Someone can point what i did that's wrong?

     <div class="Uppy form-group">
               <%= f.fields_for :photos, Photo.new do |p| %>
               <%=  p.hidden_field :image, class: 'upload-data ', value: p.object.cached_image_data %>
               <%= p.file_field :image, class: 'attachment-field', multiple: true %>
               <%= p.check_box    :_destroy unless p.object.new_record? %><%end %>
               <%=  file_field_tag "files[]", multiple: true %>
                </div>
              <div class="UppyProgressBar"></div>
              <script src="/assets/uppy.min.js"></script>
              <script type="text/javascript">
                window.addEventListener("DOMContentLoaded", function() {
                  "use strict";
                  document.querySelector(".Uppy").innerHTML = "";
                  const hiddenInput = document.querySelector(".upload-data");
                  const uppy = new Uppy.Uppy({
                    debug: true,
                    autoProceed: true,
                  });
                  uppy.use(Uppy.Dashboard, {
                    target: ".Uppy",
                    inline: true,
                    height: 200,
                    inputName: "files[]",
                    replaceTargetContent: true,
                  });
                  uppy.use(Uppy.ProgressBar, {
                    target: ".UppyProgressBar",
                    hideAfterFinish: false,
                  });
                  uppy.use(Uppy.XHRUpload, {
                    endpoint: "/upload",
                    // formData: true,
                    headers: {
                      "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    },
                    // fieldName: 'user[avatar]',
                  });
                  uppy.on("file-added", (file) => {
                    console.log(file);
                    uppy.setFileMeta(file);
                  });
                  uppy.on("upload-success", function(file, response) {
                    console.log("SUCCESS");
                    var uploadedFileData = JSON.stringify(response.body);
                 
                    var hiddenField = document.createElement('input')
                    hiddenField.type = 'hidden'
                    hiddenField.name = 'item[photos_attributes][' + Math.random().toString(36).substr(2, 9) + '][image]'
                    hiddenField.value = uploadedFileData
                    document.querySelector('form').appendChild(hiddenField)
                  });
                });
              </script>