Uppy You can only upload

i’m trying to upload multiple images with Shrine an Uppy, and when i drop the files on dashboard show up this error:

[Uppy] You can only upload:

Ive tried to get the fileData from Shrine and add it on form post here is the exemple:

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('input[type=file]').forEach(fileInput => {
    if (fileInput.multiple) {
      multipleFileUpload(fileInput)
    } else {
      singleFileUpload(fileInput)
    }
  })
})


const singleFileUpload = (fileInput) => {
  const imagePreview = document.getElementById(
    fileInput.dataset.previewElement
  );
  const formGroup = fileInput.parentNode;

  formGroup.removeChild(fileInput);

  const uppy = fileUpload(fileInput);

  uppy
    .use(FileInput, {
      target: formGroup,
      locale: { strings: { chooseFiles: "Choose file" } },
    })
    .use(Informer, {
      target: formGroup,
    })
    .use(ProgressBar, {
      target: imagePreview.parentNode,
    })
    .use(ThumbnailGenerator, {
      thumbnailWidth: 600,
    });

  uppy.on("upload-success", (file, response) => {
    const fileData = uploadedFileData(file, response, fileInput);

    // set hidden field value to the uploaded file data so that it's submitted with the form as the attachment
    const hiddenInput = document.getElementById(
      fileInput.dataset.uploadResultElement
    );
    hiddenInput.value = fileData;
  });

  uppy.on("thumbnail:generated", (file, preview) => {
    imagePreview.src = preview;
  });
};

const multipleFileUpload = (fileInput) => {
  const formGroup = fileInput.parentNode;

  const uppy = fileUpload(fileInput);

 uppy.use(Uppy.Dashboard, {
    target: formGroup,
    inline: true,
    height: 300,
    replaceTargetContent: true,
  });

  uppy.on("upload-success", (file, response) => {
    const hiddenField = document.createElement("input");

    hiddenField.type = "hidden";

       hiddenField.name = 'item[photos_attributes][' + Math.random().toString(36).substr(2, 9) + '][image]';
    hiddenField.value = uploadedFileData(file, response, fileInput);

    document.querySelector("form").appendChild(hiddenField);
  });
};

const fileUpload = (fileInput) => {

         const uppy = new Uppy.Uppy({
    id: fileInput.id,
    autoProceed: true,
    restrictions: {
      allowedFileTypes: fileInput.accept.split(","),
    },
  });


    uppy.use(Uppy.XHRUpload, {
      endpoint: "/upload", // Shrine's upload endpoint
    });
 

  return uppy;
};

const uploadedFileData = (file, response, fileInput) => {
  if (fileInput.dataset.uploadServer == "s3") {
    const id = file.meta["key"].match(/^cache/(.+)/)[1]; // object key without prefix

    return JSON.stringify(fileData(file, id));
  } else if (fileInput.dataset.uploadServer == "s3_multipart") {
    const id = response.uploadURL.match(//cache/([^?]+)/)[1]; // object key without prefix

    return JSON.stringify(fileData(file, id));
  } else {
    return JSON.stringify(response.body);
  }
};

// constructs uploaded file data in the format that Shrine expects
const fileData = (file, id) => ({
  id: id,
  storage: "cache",
  metadata: {
    size: file.size,
    filename: file.name,
    mime_type: file.type,
  },
});

the HTML:

<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>

i’m still confused on how to proceed to pass the files in the form.