# Create a Drag n' Drop file-uploading area on a webpage

**URL:** <https://forum.pinegrow.com/t/create-a-drag-n-drop-file-uploading-area-on-a-webpage/3710>\
**Category:** General\
**Created:** [January 23, 2020, 12:06am UTC](https://forum.pinegrow.com/t/create-a-drag-n-drop-file-uploading-area-on-a-webpage/3710 "2020-01-23T00:06:39Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\
**Post date:** [January 23, 2020, 12:06am UTC](https://forum.pinegrow.com/t/create-a-drag-n-drop-file-uploading-area-on-a-webpage/3710/1 "2020-01-23T00:06:39Z")

</div>

I’ve searched but have not found any function or feature in Pinegrow to create a drag and drop (D&D) file-uploading area on a webpage (see my attachment). Does this capability exist anywhere in the PG app? If not, has anyone built their own D&D for a site and care to share your how to? I’d like the object to upload to a specific folder on my site for client retrieval.

(Meanwhile, I’ll continue to Google until I find something that will work for me).

 ![Screen Shot 2020-01-22 at 6.55.40 PM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/d/d72c366b8bef0ff1cec00ea25ad5a3346b88b8b4.png)

---

<div class="post-metadata">

**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\
**Post date:** [January 23, 2020, 4:04am UTC](https://forum.pinegrow.com/t/create-a-drag-n-drop-file-uploading-area-on-a-webpage/3710/2 "2020-01-23T04:04:59Z")

</div>

Basically this is a form feature. Pretty sure it requires some sort of PHP coding. I have an account with Jotforms which has an upload widget you can use on their forms, so that’s what I use when I need to have this on a client’s website. They do offer a free plan. Some other form companies also have free plans with the ability to accept file uploads (thought the number and size is probably limited.)

I found this answer in Quora, which looks pretty complete  
[https://www.quora.com/How-do-I-make-a-website-where-users-can-upload-data](https://www.quora.com/How-do-I-make-a-website-where-users-can-upload-data)

My advice, unless this just something personal you want for yourself, I’d tell the client it’s an add-on service with an additional monthly fee, and then use that money to pay for a service that allows you to embed forms/widgets into your websites to accept file uploads.

---

<div class="post-metadata">

**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\
**Post date:** [January 24, 2020, 8:37pm UTC](https://forum.pinegrow.com/t/create-a-drag-n-drop-file-uploading-area-on-a-webpage/3710/3 "2020-01-24T20:37:45Z")

</div>

Thank AGAIN for your time and advice @Printninja.

I talked to my friend Ray Borduin at WebAssist and their Databridge has a file upload feature that allows for a drag and drop and since I already use their extension in Dreamweaver, I used it. One can drag a file over the browse button and it senses the filename and will upload it… not slick but it works, See my latest project to review: [https://rjrwebz.com/encorebakery/uploads.html](https://rjrwebz.com/encorebakery/uploads.html).

---

<div class="post-metadata">

**Author:** ![SureWeb](https://avatars.discourse-cdn.com/v4/letter/s/71e660/32.png) [@SureWeb](https://forum.pinegrow.com/u/SureWeb)\
**Post date:** [January 24, 2020, 9:34pm UTC](https://forum.pinegrow.com/t/create-a-drag-n-drop-file-uploading-area-on-a-webpage/3710/4 "2020-01-24T21:34:14Z")

</div>

> **[How To Make A Drag-and-Drop File Uploader With Vanilla JavaScript — Smashing...](https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/)**
>
> In this article, we'll be using "vanilla" ES2015+ JavaScript (no frameworks or libraries) to complete this project, and it is assumed you have a working knowledge of JavaScript in the browser. This example should be compatible with every evergreen...

---

<div class="post-metadata">

**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\
**Post date:** [January 24, 2020, 11:00pm UTC](https://forum.pinegrow.com/t/create-a-drag-n-drop-file-uploading-area-on-a-webpage/3710/5 "2020-01-24T23:00:19Z")

</div>

Site looks great. I did spot a couple of typos on the Pastries page…

What’s not to love about a tempting fruit-laden pastry garnished with a sprinkle of powdered sugar, accompanied with a hot tea, a _ **favotite coffeee** _ blend or other beverage?

---

<div class="post-metadata">

**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\
**Post date:** [January 26, 2020, 2:33am UTC](https://forum.pinegrow.com/t/create-a-drag-n-drop-file-uploading-area-on-a-webpage/3710/6 "2020-01-26T02:33:02Z")

</div>

Thanks for spotting this @Printninja - I haven’t run a spell-checker on the site yet. Near-final site: [rjrwebz.com/encorebakery](http://rjrwebz.com/encorebakery)
