feat: Do you know if there is a value to show how many files are loaded into the component or if there is already a file loaded?

[jhangmez]

Describe the feature you'd like to request

I am using the UploadDropzone component, but I have a problem that I've tried to fix in various ways, but I couldn't find anything that works. Maybe it's because I'm a junior programmer, but I can't find how to visually show that a file is loaded into the component. Let me explain: when the component is initialized, it is in step 1, but when I load a file into the component, I can't find a value to use a logic behind it to suggest to the user that there is now a file ready to upload, except after pressing the purple button to upload the image, which has a bool for the change.

I have already tried with Ready, but that value is always true and it doesn't work for me as such.

---

I will upload it in Spanish as well, in case the idea I'm explaining above is not entirely clear.

Estoy utilizando el componente UploadDropzone, pero tengo un problema, el cual he intentado corregir de diversas maneras, pero no encontré algo que me sirva, quizás porque soy un junior programando, pero no encuentro como mostrar gráficamente que un archivo esta cargado al componente, me explico, cuando se inicializa el componente esta en el paso 1, pero cuando cargo un archivo al componente, no encuentro un valor para poder utilizar una logica detras para sugerir al usuario que ahora existe un archivo listo para subir, sino hasta luego de presionar el boton morado para subir imagen, que existe un bool para el cambio.

Ya he intentado con Ready, pero ese valor siempre esta en true y no me sirve como tal.

Describe the solution you'd like to see

That there is a value that serves as an intermediate step, to know how many files are loaded or if there are any files loaded into the component.

---

Que exista un valor que sirva como paso intermedio, para saber cuantos archivos están cargados o de plano si existe archivo(s) cargados al componente.

Additional information

No response

👨‍👧‍👦 Contributing

• 🙋‍♂️ Yes, I'd be down to file a PR implementing this feature!

[markflorkowski]

We don't currently include the file list/count to the content functions, but you could do something like this:

"use client";

import { useState } from "react";
import { UploadDropzone } from "~/utils/uploadthing";

export default function Home() {
  const [fileCount, setFileCount] = useState(0);

  return (
    <UploadDropzone
      endpoint="videoAndImage"
      onDrop={(files) => {
        setFileCount(files.length);
      }}
      config={{ appendOnPaste: true, mode: "manual" }}
      content={{
        button: (a) => {
          if (fileCount < 1) {
            return "Select files";
          }
          return `Upload ${fileCount} file${fileCount > 1 ? "s" : ""}`;
        },
      }}
    />
  );
}

Note:onDrop will soon be deprecated in favor of onChange. It will still work until the next major though.

It's not a bad idea to potentially add this into the content functions cc @juliusmarminge

[jhangmez]

Hi, thanks for you reply, it works perfectly, i don't know about onDrop, but now it does.