Django request.FILE 返回无

Question

My html template
<form method="post" action="" enctype="multipart/form-data" class="form-group">
    {% csrf_token %}

<h1 class="m-3 text-center">New Post</h1>

<div id="tui-image-editor-container" style="min-height:750px;"></div>
<!--<input type="file" name="name" value="" />-->
<div class="row m-2">
    <input type="datetime-local" class="form-control-lg col m-2" name="date" default="" />
    <input type="text" class="form-control-lg col m-2" name="location" placeholder="Where are You ?" />
</div>
<div class="row m-2">
    <input type="text" class="form-control col m-2" name="hashtags" placeholder="Hashtags" />
    <input type="text" class="form-control col m-2" name="tags" placeholder="Tag Your Friends" />
</div>

<div class="row m-4">
    <input type="submit" class="btn btn-primary btn-lg col" id="abc" value="Create">
</div>

Javascript File

document.querySelector(".tui-image-editor-load-btn").setAttribute("name", "PostedImage")

views.py

def newpost_view(request,email,*args,**kwargs):
    if request.method == 'POST':
        newpost = {
            'date':request.POST['date'],
            'location':request.POST['location'],
            'hashtags':[f['value'] for f in json.loads(request.POST['tags'])],
            'tags':[f['value'] for f in json.loads(request.POST['hashtags'])]
            }
        print(newpost)
        print(request.FILES.get('PostedImage'))
    id = email[0:5]
    variables={'id':id}
    return render(request,'newpost.html',variables)

I want to get the Image from the input. the element itself is added via javascript, because I am using a Vanilla image manipulation snippet It gets rendered fine and my browser shows the element with the name tag added as "PostedImage" . But it shows up as an error as request.FILE['PostedImage'] shows up empty. Is it that i can't add elements once the page is loaded or I can't add name tags after and django is not reading them? I can't do this using a form because the form cannot utilize an existing input field but adds it's own. Appreciate any help on this. I have read previous threads on this type of question:

1. My form has the enctype tag added
2. My Submit button has type='Submit

My form after it gets rendered in the Browser : the first 30 lines:

<form method="post" action="" enctype="multipart/form-data" class="form-group">
        <input type="hidden" name="csrfmiddlewaretoken" value="p9fvVLz33sM0Ok6OUzQcHPKgUVksAlSwjZQ6y7bBCURWdWdWd0wQuH84ULUPsWIn">
        <h1 class="m-3 text-center">New Post</h1>

        <div id="tui-image-editor-container" style="min-height: 750px; width: 100%; height: 100%;" class="tui-image-editor-container bottom">
            <ul class="tui-image-editor-help-menu top"><li tooltip-content="ZoomIn" class="tie-btn-zoomIn tui-image-editor-item help enabled"><svg class="svg_ic-menu"><use xlink:href="#ic-zoom-in" class="normal use-default"></use><use xlink:href="#ic-zoom-in" class="disabled use-default"></use><use xlink:href="#ic-zoom-in" class="hover use-default"></use></svg></li><li tooltip-content="ZoomOut" class="tie-btn-zoomOut tui-image-editor-item help enabled"><svg class="svg_ic-menu"><use xlink:href="#ic-zoom-out" class="normal use-default"></use><use xlink:href="#ic-zoom-out" class="disabled use-default"></use><use xlink:href="#ic-zoom-out" class="hover use-default"></use></svg></li><li tooltip-content="Hand" class="tie-btn-hand tui-image-editor-item help enabled"><svg class="svg_ic-menu"><use xlink:href="#ic-hand" class="normal use-default"></use><use xlink:href="#ic-hand" class="disabled use-default"></use><use xlink:href="#ic-hand" class="hover use-default"></use></svg></li><li class="tui-image-editor-item"><div class="tui-image-editor-icpartition"></div></li><li tooltip-content="History" class="tie-btn-history tui-image-editor-item help enabled"><svg class="svg_ic-menu"><use xlink:href="#ic-history" class="normal use-default"></use><use xlink:href="#ic-history" class="disabled use-default"></use><use xlink:href="#ic-history" class="hover use-default"></use></svg><div class="tie-panel-history"><ol class="history-list"></ol></div></li><li tooltip-content="Undo" class="tie-btn-undo tui-image-editor-item help"><svg class="svg_ic-menu"><use xlink:href="#ic-undo" class="normal use-default"></use><use xlink:href="#ic-undo" class="disabled use-default"></use><use xlink:href="#ic-undo" class="hover use-default"></use></svg></li><li tooltip-content="Redo" class="tie-btn-redo tui-image-editor-item help"><svg class="svg_ic-menu"><use xlink:href="#ic-redo" class="normal use-default"></use><use xlink:href="#ic-redo" class="disabled use-default"></use><use xlink:href="#ic-redo" class="hover use-default"></use></svg></li><li tooltip-content="Reset" class="tie-btn-reset tui-image-editor-item help"><svg class="svg_ic-menu"><use xlink:href="#ic-reset" class="normal use-default"></use><use xlink:href="#ic-reset" class="disabled use-default"></use><use xlink:href="#ic-reset" class="hover use-default"></use></svg></li><li class="tui-image-editor-item"><div class="tui-image-editor-icpartition"></div></li><li tooltip-content="Delete" class="tie-btn-delete tui-image-editor-item help"><svg class="svg_ic-menu"><use xlink:href="#ic-delete" class="normal use-default"></use><use xlink:href="#ic-delete" class="disabled use-default"></use><use xlink:href="#ic-delete" class="hover use-default"></use></svg></li><li tooltip-content="DeleteAll" class="tie-btn-deleteAll tui-image-editor-item help"><svg class="svg_ic-menu"><use xlink:href="#ic-delete-all" class="normal use-default"></use><use xlink:href="#ic-delete-all" class="disabled use-default"></use><use xlink:href="#ic-delete-all" class="hover use-default"></use></svg></li></ul>
            <div class="tui-image-editor-controls">
                <div class="tui-image-editor-controls-logo">
                    <img src="https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png">
                </div>
                <ul class="tui-image-editor-menu"><li tooltip-content="Resize" class="tie-btn-resize tui-image-editor-item normal"><svg class="svg_ic-menu"><use xlink:href="#ic-resize" class="normal use-default"></use><use xlink:href="#ic-resize" class="active use-default"></use><use xlink:href="#ic-resize" class="hover use-default"></use></svg></li><li tooltip-content="Crop" class="tie-btn-crop tui-image-editor-item normal"><svg class="svg_ic-menu"><use xlink:href="#ic-crop" class="normal use-default"></use><use xlink:href="#ic-crop" class="active use-default"></use><use xlink:href="#ic-crop" class="hover use-default"></use></svg></li><li tooltip-content="Flip" class="tie-btn-flip tui-image-editor-item normal"><svg class="svg_ic-menu"><use xlink:href="#ic-flip" class="normal use-default"></use><use xlink:href="#ic-flip" class="active use-default"></use><use xlink:href="#ic-flip" class="hover use-default"></use></svg></li><li tooltip-content="Rotate" class="tie-btn-rotate tui-image-editor-item normal"><svg class="svg_ic-menu"><use xlink:href="#ic-rotate" class="normal use-default"></use><use xlink:href="#ic-rotate" class="active use-default"></use><use xlink:href="#ic-rotate" class="hover use-default"></use></svg></li><li tooltip-content="Draw" class="tie-btn-draw tui-image-editor-item normal"><svg class="svg_ic-menu"><use xlink:href="#ic-draw" class="normal use-default"></use><use xlink:href="#ic-draw" class="active use-default"></use><use xlink:href="#ic-draw" class="hover use-default"></use></svg></li><li tooltip-content="Shape" class="tie-btn-shape tui-image-editor-item normal"><svg class="svg_ic-menu"><use xlink:href="#ic-shape" class="normal use-default"></use><use xlink:href="#ic-shape" class="active use-default"></use><use xlink:href="#ic-shape" class="hover use-default"></use></svg></li><li tooltip-content="Icon" class="tie-btn-icon tui-image-editor-item normal"><svg class="svg_ic-menu"><use xlink:href="#ic-icon" class="normal use-default"></use><use xlink:href="#ic-icon" class="active use-default"></use><use xlink:href="#ic-icon" class="hover use-default"></use></svg></li><li tooltip-content="Text" class="tie-btn-text tui-image-editor-item normal"><svg class="svg_ic-menu"><use xlink:href="#ic-text" class="normal use-default"></use><use xlink:href="#ic-text" class="active use-default"></use><use xlink:href="#ic-text" class="hover use-default"></use></svg></li><li tooltip-content="Mask" class="tie-btn-mask tui-image-editor-item normal"><svg class="svg_ic-menu"><use xlink:href="#ic-mask" class="normal use-default"></use><use xlink:href="#ic-mask" class="active use-default"></use><use xlink:href="#ic-mask" class="hover use-default"></use></svg></li><li tooltip-content="Filter" class="tie-btn-filter tui-image-editor-item normal"><svg class="svg_ic-menu"><use xlink:href="#ic-filter" class="normal use-default"></use><use xlink:href="#ic-filter" class="active use-default"></use><use xlink:href="#ic-filter" class="hover use-default"></use></svg></li></ul>

                <div class="tui-image-editor-controls-buttons">
                    <div style="background-color: #fff;border: 1px solid #ddd;color: #222;font-family: 'Noto Sans', sans-serif;font-size: 12px">
                        Load
                        <input type="file" class="tui-image-editor-load-btn" name="PostedImage">
                    </div>
                    <button class="tui-image-editor-download-btn" style="background-color: #fdba3b;border: 1px solid #fdba3b;color: #fff;font-family: 'Noto Sans', sans-serif;font-size: 12px">
                        Download
                    </button>
                </div>
            </div>

the last 20:

<div class="row m-2">
    <input type="datetime-local" class="form-control-lg col m-2" name="date" default="">
    <input type="text" class="form-control-lg col m-2" name="location" placeholder="Where are You ?">
</div>
<div class="row m-2">
    <tags class="tagify form-control col m-2 tagify--noTags tagify--empty" tabindex="-1">
        <span contenteditable="" tabindex="0" data-placeholder="Hashtags" aria-placeholder="Hashtags" class="tagify__input" role="textbox" aria-autocomplete="both" aria-multiline="false"></span>

    </tags><input type="text" class="form-control col m-2" name="hashtags" placeholder="Hashtags">
    <tags class="tagify form-control col m-2 tagify--noTags tagify--empty" tabindex="-1">
        <span contenteditable="" tabindex="0" data-placeholder="Tag Your Friends" aria-placeholder="Tag Your Friends" class="tagify__input" role="textbox" aria-autocomplete="both" aria-multiline="false"></span>

    </tags><input type="text" class="form-control col m-2" name="tags" placeholder="Tag Your Friends">
</div>

<div class="row m-4">
    <input type="submit" class="btn btn-primary btn-lg col" id="abc" value="Create">
</div>

Answer 1

You are creating an element on submission, as I see from the view, you are trying to get PostImage element but it is not there because it is not created at the moment of processing the request in the backend, what I would do is ceate the image input with PostImage as a name, and instead of creating it with js, i would put it in the html code and hide it,like this:

<input type='file' name='PostImage' hidden>

and when you make a submission you can make your input visible using Js DOM.