File input isn't available

[ted-dino]

Hi, thank you for creating this amazing package.
I am trying this to my nextjs project but i am getting this error:
Invariant Violation: Uploady - Context. File input isn't available

here is my code.

 const popoverData = [
    {
      id: 2,
      name: "Import 3D Model",
      allowedFiles: "",
    },
    {
      id: 3,
      name: "Import Orthophoto",
      allowedFiles: "",
    },
    {
      id: 4,
      name: "Import Point Cloud",
      allowedFiles: ".laz,.las",
    },
    {
      id: 7,
      name: "Import Contour Lines",
      allowedFiles: "",
    },
  ];

import Uploady from "@rpldy/uploady";
import { getMockSenderEnhancer } from "@rpldy/mock-sender";
import UploadButton from "@rpldy/upload-button";

const mockSenderEnhancer = getMockSenderEnhancer({ delay: 1500 });

return (
    <ul className="absolute -right-36 top-20 w-full max-w-[176px] rounded-lg overflow-hidden z-10 drop-shadow-lg">
      {data.map((item, index) => (
        <div key={item.id}>
          <li
            className="relative py-2 px-3 bg-dark-4 text-start hover:bg-dark-2 text-white dark:text-black"
            onClick={() => popoverEvent(item.name)}
          >
            {item.id === 4
              ? (
                <Uploady
                  destination={{ url: "[upload-url]" }}
                  enhancer={mockSenderEnhancer}
                >
                  <UploadButton>Upload Files</UploadButton>
                </Uploady>
              )
              : item.name}
          </li>
          {index !== data.length - 1 && <hr className="border-[#373737]" />}
        </div>
      ))}
    </ul>
  );

my nextjs package.json

"dependencies": {
    "@next/font": "^13.0.5",
    "@rpldy/mock-sender": "^1.4.1",
    "@rpldy/upload-button": "^1.4.1",
    "@rpldy/uploady": "^1.4.1",
    "@types/react": "18.0.25",
    "@types/react-dom": "18.0.9",
    "eslint": "8.28.0",
    "eslint-config-next": "13.0.5",
    "next": "13.0.5",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "4.9.3",
  },

Was anyone else affected by this, I'm wondering.

[yoavniran]

hey @ted-dino
thanks!
As for your issue. This error is strange. I dont see an obvious reason for it.
The only thing I'd suggest adding is the noPortal prop to the Uploady element, since you're using SSR (nextjs).

Can you create a minimal reproducing example (on codesandbox for example) that I can check?

[ted-dino]

@yoavniran here is a sample of minimal sandbox.
https://codesandbox.io/p/sandbox/elated-rgb-z8dyw8?welcome=true

btw, i forgot to mention that i am using nextjs page dir. but if i remove the map function it works just fine, like this.

return (
    <Uploady
      destination={{ url: "[upload-url]" }}
      enhancer={mockSenderEnhancer}
    >
      <UploadButton>Upload Files</UploadButton>
    </Uploady>
  );

[ted-dino]

i think i figure it out. so here in my code i have this on each element onClick={() => popoverEvent(item.name)}, the purpose of this code is to close the popover when they click the element. i think it is showing the error because the file doesnt exists anymore because i set the visibility of the popover to false? please let me know what you think @yoavniran . thanks!

const popoverEvent = (name?: string) => {
    togglePopover(false);
  };

[yoavniran]

Its a little hard to understand. I opened the sandbox you provided but didnt see an error. did you fix it there already?
In any case, what you wrote makes sense. I generally recommend rendering the Uploady provider high up in the application hierarchy so it doesnt get re-rendered or removed. Then you can optionally render the upload components (ie UploadButton) wherever needed.

[ted-dino]

Hi @yoavniran , sorry for the late reply, here is the updated sample.
https://stackblitz.com/edit/stackblitz-starters-udanjf?file=pages%2Findex.js

[yoavniran]

Hey @ted-dino
I hope you managed to sort this out. I missed your reply here.
Indeed, the issue is most likely like you wrote, putting the Uploady in the popover is causing the file input to be unmounted when the popover is closed.

Its not a good practice to re-render the Uploady provider and therefore recommended to place it above parts of the app the are likely to be unmounted.
The upload component itself, button, d&d, etc. you can re-render as needed, of course.

[ted-dino]

hey @yoavniran , yeah, i managed to implement a workaround to make it function but now im in the process of refactoring my code due to recent design changes. i also have another question. If it is not appropriate to ask it here, please let me know and I can delete this post and create a new discussion. my question is, can i create a custom sender for example, using Axios, where I can customize the upload process before it's sent?

[yoavniran]

@ted-dino The answer is yes. But please open a new discussion thread and ask this question there, so we can add more details.
I'd like to understand the type of customization you're after

[ted-dino]

great! i will create a new discussion now. thanks @yoavniran