# File Upload Dropzone

**URL:** <https://forum.djangoproject.com/t/file-upload-dropzone/1707>\
**Category:** Using Django\
**Created:** [March 28, 2020, 9:40pm UTC](https://forum.djangoproject.com/t/file-upload-dropzone/1707 "2020-03-28T21:40:31Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Atlasfreak](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/atlasfreak/32/768_2.png) [@Atlasfreak](https://forum.djangoproject.com/u/Atlasfreak)\
**Post date:** [March 28, 2020, 9:40pm UTC](https://forum.djangoproject.com/t/file-upload-dropzone/1707/1 "2020-03-28T21:40:31Z")

</div>

Hi Django community!  
I am currently implenting a file upload on my website and wanted to add a drag and drop zone but I couldn’t find any insturctions on how to build that incombination with django. My frontend is built using bootstrap and I already tried some implementations from the internet but none of them work how I hoped they would.  
Can anyone provide me some help? I am pretty new to website programming.

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [March 29, 2020, 2:08pm UTC](https://forum.djangoproject.com/t/file-upload-dropzone/1707/2 "2020-03-29T14:08:02Z")

</div>

It might be helpful if you provide a little more detail as to how you’re trying to do this - specifically, what libraries are you using for the client-side javascript and how you’re trying to accept the submission on the Django side. Also, it might be helpful if you explain what you mean by “none of them work how I hoped they would” - what is it that you’re trying to do, and how does the implementation you’re using differ from that?

Most of this work is going to be on the client side. For how you need to handle it on the Django side, see the documentation at: [https://docs.djangoproject.com/en/3.0/topics/http/file-uploads/](https://docs.djangoproject.com/en/3.0/topics/http/file-uploads/)

---

<div class="post-metadata">

**Author:** ![Atlasfreak](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/atlasfreak/32/768_2.png) [@Atlasfreak](https://forum.djangoproject.com/u/Atlasfreak)\
**Post date:** [March 29, 2020, 2:53pm UTC](https://forum.djangoproject.com/t/file-upload-dropzone/1707/3 "2020-03-29T14:53:28Z")

</div>

The Django side I already sorted out and tested it using the generic generated form which worked without any problems. On the client side I tried using [Dropzone.js](https://www.dropzonejs.com/) but as of right now I haven’t got it to work probably. It just created a grey box around my form and didn’t add any drag and drop features. I also tried some tutorials on how to implement Dropzone.js with Django but they were all 4-5 years old and didn’t work for me.

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [March 30, 2020, 12:45am UTC](https://forum.djangoproject.com/t/file-upload-dropzone/1707/4 "2020-03-30T00:45:15Z")

</div>

Ok, you’re now outside my realm of experiences. If I was working on this problem, my first step would be to get Dropzone working in a static page that isn’t managed by Django. (You could test it by still having that page post to Django if you need a target endpoint.) But from your description, my first impression is that there’s _something_ not quite set up right on the javascript side that could be resolved independently from Django.
