Drag Upload


settings.py - /path/projectdir/theproject
STATIC_URL = 'static/'

urls.py - /path/projectdir/theapp
path('drag-upload', views.drag_upload, name='drag_upload'),
path('drag-upload-post', views.drag_upload_post, name='drag_upload_post'),

template.html - /path/projectdir/theapp/templates
<link href="https://activetechsystems.com/cdn/apps/drag-upload/drag-upload.css" type="text/css" rel="stylesheet" />
<script src="https://activetechsystems.com/cdn/apps/drag-upload/drag-upload.js" type="text/javascript" ></script>

<div class="container">
    <div class="file_upload">
        <form action="/drag-upload-post" class="dragdrop">
            {% csrf_token %}
            <div class="dd-message needsclick" style="font-family: Arial;">
                DROP FILES HERE<br /><br /> OR CLICK TO UPLOAD<br />
                <br /> jpg, jpeg, png - Max. 1 MB
            </div>
        </form>
    </div>
</div>

views.py - /path/projectdir/theapp
def drag_upload(request): 
    return render(request, 'templates-forms/drag-upload.html', { 'title': 'Drag Upload' } )

def drag_upload_post(request):
    from django.conf import settings
    from django.core.files.storage import FileSystemStorage
    import os

    allowed_max_size = 1024 * 1024
    allowed_extensions_arr = ['jpg', 'jpeg', 'png']

    file_size = request.FILES['file'].size
    file_extension = os.path.splitext(request.FILES['file'].name)[1][1:].strip().lower()

    if file_extension in allowed_extensions_arr and file_size <= allowed_max_size:
        fs = FileSystemStorage()
        filename = fs.save(slug_it(request.FILES['file'].name), request.FILES['file'])

        uploaded_path_file = str(settings.BASE_DIR)+fs.url(filename)
        new_path_file = str(settings.BASE_DIR)+str(settings.STATIC_URL)+'uploads/'+slug_it(request.FILES['file'].name)
        os.rename(uploaded_path_file, new_path_file)
        return HttpResponse('Ok')
    else: 
        return HttpResponse(request.FILES['file'].create_error) # mimic create error to show x mark

def slug_it(x):
    x = x.replace(' ', '-')
    return x.lower()

Drag Upload Test