0

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>
shank sharma
  • 29
  • 5
  • So basically you want if user drag an image and drop anywhere in **DOM** your dialog should open with image attached ? – Ankit Tiwari Dec 18 '22 at 13:36
  • @AnkitTiwari yes you are right I need the similar functionality – shank sharma Dec 18 '22 at 15:43
  • Does this answer your question? [How to set file input value when dropping file on page?](https://stackoverflow.com/questions/47515232/how-to-set-file-input-value-when-dropping-file-on-page) – Ankit Tiwari Dec 18 '22 at 17:43
  • am still doubting that, how onchange event will fire after setting the fileinput value to dropped files(acc. to post link) because dialog opens after the user selects file using input file button. so will expect the same dialog in screen after dropping image. – shank sharma Dec 19 '22 at 04:07
  • So instead of opening dialog **onchange** you can open that dialog in **drop** event becouse if you trigger onchange event in input type file it will ask user to select file again – Ankit Tiwari Dec 19 '22 at 04:40
  • 1
    ok. i need to implement it, thankyou for the support and help. – shank sharma Dec 19 '22 at 04:49

0 Answers0