Uppy get initialize with uploaded files

[dcalixto]

How to get and initialize uppy with uploaded files?

i’m trying to the the uploaded files to remove or edit but, just show the uploaded file without name and without option to remove

as mentioned on github i added addFile and then getFile, but still not showing the files

  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: Uppy.locales.pt_BR,
    })
    .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,
    locale: {
      strings: {
        dropPasteFiles: "Adicionar fotos: %{browse}",
        myDevice: "Meus Arquivos",
        dropHint: "Arraste e solte aqui",
        addMore: "Mais",
      },
    },
  });

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

    hiddenField.type = "hidden";

    hiddenField.name = "item[photos_attributes][][image]";
    hiddenField.value = uploadedFileData(file, response, fileInput);

    document.querySelector("#uppy-form").appendChild(hiddenField);
  });
};

const fileUpload = (fileInput) => {
  const uppy = new Uppy.Uppy({
    id: fileInput.id,
    //autoProceed: true,
    autoProceed: false,
    locale: {
      strings: {
        browse: "выберите ;-)",
      },
    },
    locale: Uppy.locales.pt_BR,
    restrictions: {
      //allowedFileTypes: fileInput.accept.split(","),
      minNumberOfFiles: 1,
      maxNumberOfFiles: 10,
    },
  });

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



  uppy.addFile({
    id: fileInput,
    name: fileData.url,
    type: fileInput.type,
    data: fileData.data,
    source: "Local",
    isRemote: false,
  });

    uppy.getFiles().forEach((fileInput) => {
    uppy.setFileState(fileInput.id, {
      progress: { uploadComplete: true, uploadStarted: true },
    });
  });
  uppy.setOptions({
    autoProceed: true,
  });
  uppy.upload().then((result) => {
        console.log("Additional files have been uploaded", result)
});
  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,
  },
});