How do I set up an input block that can accept drag-and-dropped files from end user?

General
1

Is there a way to allow end users to drag and drop files onto a page for to be processed?

The only input element I could find that allows for file upload is via browsing local files (instead of drag and drop).

2

Hello @btangonan,

Welcome to the builder.io forum.

Currently, there isn’t a direct way to add a block that accepts drag-and-drop input. However, you can consider creating your own custom component for this purpose.

You can find more information on creating custom components here: Custom Components Documentation.

3

This is super helpful. Thanks!

Can I use something like DnD Kit as a part of a custom component?

4

Hello @btangonan,

We haven’t tested the integration of DnD Kit yet. However, we don’t see any reason why it wouldn’t work. You are welcome to try it out, and if you encounter any challenges, we’ll be more than happy to help!

5

Thanks, I’m trying to test it out. The folder structure in this Builder tutorial looks different after installing @builder/react.

Which .tsx file do I paste the code snippet for the builder component into?

6

Hello @btangonan,

Can you share a screenshot of your project directory structure?

7

Screenshot 2024-03-08 at 11.36.28 AM
Screenshot 2024-03-08 at 11.36.28 AM1166×704 95.4 KB

8

Hello @btangonan,

You can create your components in the components directory and import them in the builder-registry.tsx.

9

Great, I got my demo working locally. Is there documentation on how to publish the test site online?

10

Hello @btangonan,

Great news that your demo is running smoothly locally! To take it online, the next step is to build the production version of your app. Once that’s done, you can deploy it with a hosting provider like Vercel. Let me know if you need further guidance on the process!

11

Yes, I would love further guidance in this process. How do I build and deploy?

12

Hello @btangonan,

To build and deploy a React Next.js project, you’ll follow these general steps:

  1. Choose a Hosting Provider: Next.js applications can be deployed to various hosting providers like Vercel, Netlify, AWS, DigitalOcean, etc. For this example, let’s use Vercel.

  2. Deploy to Vercel:

    a. Install the Vercel CLI:

    npm install -g vercel
# or
yarn global add vercel

    b. Log in to Vercel:

    vercel login

    c. Navigate to your Next.js project directory and deploy using Vercel:

    vercel

    Follow the prompts to deploy your application. Vercel will provide you with a URL where your app is deployed.

  3. Monitor and Manage Your Deployment: After deploying, you can monitor and manage your deployment through the hosting provider’s dashboard. Vercel, for example, provides a dashboard where you can manage deployments, domains, environment variables, etc.

That’s it! Feel free to let us know if you have any further questions!