Django Using Default Form & File Submission with Drag and Drop functionality - django

Question

I have a django application that allow user to upload their image and then another dialog opens to collect user data related to them. After the dialog form has been submitted, I have added the javascript eventlistener to successfully submit the form with data and it redirects to the form's action attribute.
I wanna implement the same functionality, if user drop their image in the browser then dialog opens to collect user data, then do the same as above and redirect to the form's action attribute.
How can I achieve it?
Here is my code
#--urls.py
from django.urls import path
from . import views
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('', views.index, name='index'),
path('success/', views.success_function, name='success page'),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
#--views.py
def index(request):
form = userForm()
return render(request, 'polls/hello_world.html', {'form': form})
def success_function(request):
if request.method == 'POST':
form = userForm(request.POST, request.FILES)
user_files = request.FILES.getlist('django_image_field')
if form.is_valid():
images_data = []
for eachfile in user_files:
#handle_uploaded_file(eachfile)
file_path = file_upload(eachfile)
img_details = {'file_path': file_path, 'file_name': eachfile.name}
images_data.append(img_details)
return render(request, 'polls/success.html', {'data': images_data})
else:
print(form.errors)
return HttpResponse("Not valid form")
else:
return HttpResponse("Not a valid method")
--under forms.py
class NameForm(forms.Form):
your_name = forms.CharField(required=False, label='Your name', max_length=100)
django_image_field = forms.ImageField(required=True,
label="",
widget=forms.ClearableFileInput(attrs={
'multiple': True,
'id':'file-input'
}))
--#inside index
<form enctype="multipart/form-data" action="{% url 'success' %}" id="myform" method="POST">
{% csrf_token %}
{{ form.django_image_field }}
<dialog id="user_dialog">
<form method="dialog" id="more_details">
</h6>
<p>Enter Name: </p>
{{ form.your_name.label_tag }}
{{ form.your_name }}
<button id="submit_btn" type="submit">Submit</button>
</form>
</dialog>
</form>