Create a better file upload field

[BetrixDev]

I want a file input field with drag an drop capabilities.

Current

Current full-page drag on drop

Possible Future
https://uploader.sadmn.com

[abhishekverma276]

I can try it up, where is it located in the code? i couldn't locate in files...

[BetrixDev]

@abhishekverma276 Thank you for showing interest in contributing, and sorry for the late reply. The file this would be in is the upload-video-dialog.tsx where we have the file input for uploading a video.

src/app/videos/components/dialogs/upload-video-dialog.tsx

[abhishekverma276]

No problem, and thanks for the code path, i'll look into it and give my best.

[BetrixDev]

@abhishekverma276 Thank you, and please don't feel obligated, any help is appreciated.

[abhishekverma276]

Hi @BetrixDev , I hope you’re doing well. I wanted to give you an update regarding the issues I’ve been working on. I’ve tried my best to resolve the dependency conflicts in the project, but unfortunately, I haven’t been able to fully resolve them. Despite trying various approaches such as adjusting the versions and using the --force and --legacy-peer-deps flags, I’m still facing some challenges.

Missing Modules and Type Declarations:

@radix-ui/react-dialog
@radix-ui/react-tooltip
@tanstack/react-form
jotai
lucide-react
These modules cannot be found, or their type declarations are missing.

React Type Declarations:
There's a missing declaration file for React ('react'), causing an implicit any type warning.

JSX Type Issues:
Various JSX elements in your code are implicitly typed as any because the JSX.IntrinsicElements interface is missing.

Implicit any Type for Parameters:
Several parameters ('s', 'e', 'field', 'value', 'state', 'file') are implicitly assigned the any type, which is a TypeScript issue that could be fixed by explicitly typing them.

Missing children Property:
The children property is missing in objects of types RootCredenzaProps and CredenzaProps, but it is marked as required in those types.

[BetrixDev]

@abhishekverma276 Thank you for taking a look into things. I don't have a contributing guide yet so I understand you may run into issues. Type issues should not happen as the deployments run a type check and would error if anything was found and I also check before each commit. You may need to check you Typescript version in your ide and make sure it is the same as the project, as well as make sure your are using pnpm to install the dependencies as pnpms lock file will have all correct versions for each dependency.

[abhishekverma276]

@BetrixDev thanks for the guidance, most of them are resolved, i didn't know to use pnpm instead of npm. now i have changed the code, how can i run it to see if it's working?

I attempted to run the project using the pnpm run dev command, but encountered several issues while trying to initialize the environment.

Running the Project: Initially, I executed pnpm run dev to start both the Next.js and Trigger.dev environments concurrently.

Next.js initialized successfully and was available at http://localhost:3000.
However, the Trigger.dev environment encountered issues due to a missing login token and project reference.
Login Issue: The first attempt to run pnpm run dev:trigger failed because I wasn’t logged in. The system required me to authenticate via an authorization code, which I completed. After logging in, I faced another issue with a project reference.

Project Reference Problem: After logging in successfully, I faced a "404 Project not found" error. The Trigger.dev CLI couldn't find the project reference and used an incorrect one (proj_kgjuvdnaikcqgregnfjq), causing the environment initialization to fail.

Initialization Attempt: I attempted to reinitialize the project using pnpm dlx trigger.dev@latest init -p proj_cmoedytpeluqhuozksjp. This was done to ensure that the project reference was correctly set up. However, the system indicated that the project had already been initialized, citing an existing trigger.config.ts file.

Dev Environment Failures: When running pnpm dlx trigger.dev@latest dev, I encountered several critical errors related to invalid or missing environment variables, such as:

CLERK_SECRET_KEY
DATABASE_URL
STRIPE_SECRET_KEY
Others essential for the project’s functionality.