File Upload Story - Literate Code Map(c) Andy Bulka 2019«singlepage/urls.py»urlsSTART HERE: when user clicks on file upload link/fileupload ->views.fileupload1* main user start point/upload_file ->views.upload_file/file_upload_uml/<str:event>/ ->views.file_upload_umlurlpatterns« singlepage.views.py»views1.return render(request,"fileupload.html", {"object_list": None})2.def fileupload(request):3.Calculates an "event" based on the user name and date, and stores alluploaded files in a directory UPLOAD_DIR/event.form = FileUploadForm(request.POST, request.FILES or None)file = request.FILES['file']event =calc_upload_eventdir(request.user, datetime.datetime.now())dir = os.path.join(UPLOAD_DIR, event)path = os.path.join(dir, file.name)handle_uploaded_file(file, path)A1.return HttpResponse(json.dumps(data), content_type="application/json")Typical AJAX HttpResponse is<class 'dict'>: {'status': 'success','file': 'display_model.py','event': 'admin-1-2019-04-17-12:12:47'}def upload_file(request, uid=None):A1.This should be changed to using memcache rather than the local file system!path = os.path.join('uploaded', file.name) # work out diros.makedirs(os.path.dirname(path)) # and create dirwith open(path, 'wb+') as destination: ... destination.write(chunk) # writes out filedef handle_uploaded_file(file, path=None):4.6.Called when all files have been successfully uploaded."event" gives us a way to refer to those files.Combines custom plantumltext (which initially will be blank) into a UML diagram based onpathsimage_url, generated_plant_uml_text =uploaded_local_paths_to_uml_url(paths, custom_plant_uml_text, ..., options_uml)then where do we go?well, we render the "fileupload_uml.html" templateform = MyFileUploadForm(initial={"custom_plant_uml_text": ""})which isclass MyFileUploadForm(forms.Form):custom_plant_uml_text = forms.CharField(label="Additional custom plantuml text", required=False, widget=forms.Textarea)Note that it is not inheriting from forms.ModelFormreturn render(request,"fileupload_uml.html",5.{"python_text": python_text,# "show_python_text": True,"generated_plant_uml_text": generated_plant_uml_text,"custom_plant_uml_text": None,"image_url": image_url,"form": form,"event": event,"paths_ro": paths_ro,},def file_upload_uml(request, event):«singlepage/templates/fileupload.html»fileuploadChange /upload-target to your upload address, in this case it is "upload_file"for each file3.<form action="{% url 'upload_file' %}" class="dropzone" id="myAwesomeDropzone">{% csrf_token %}</form>once all files have been uploadedfunction submit_upload_uml_event()event = last_upload_eventwindow.location.href = 'file_upload_uml/[object Event]'4.javascript«singlepage/templates/fileupload_uml.html»fileupload_umlActually displays the UML diagram. The only thing we uploadvia the form is the custom plantuml. The "event" parameter of the urllets us find the source files etc.<form action={% url 'file_upload_uml' event %} method="POST">upload_file() is called multiple times, once for each filepassing back (in the AJAX response) the first calculated eventto the javascript so that all subsequent files get put into thesame event/directoryviews.fileupload_uml()4.is called automaticallyafter the initial file upload, to render theinitial UML.views.fileupload_uml()6.is called by the userpressing "Generate UML" button on subsequentrenderings, as the UML is refined, by fiddlingwith custom plantuml text.(the user cannot edit info/classes etc inthe uploaded Python files themselves)1.fileupload()2.fileuploadtemplate render3.upload_file(data)once for each file via AJAX4.file_upload_uml/[object Event]once all have been uploaded5.fileupload_uml(image_url, form, etc.)template render UML6.file_upload_uml/[object Event]to regenerate the UML