Django and Uikit combine to make a no-refresh upload with a progress bar

Previous uploads are rough, so improve on the user experience.

Also, combine Django for location upload.

This is done in two steps, the first time to upload to the TMP directory,

The second time, the files under TMP are transferred to the standard directory.

form.py

File_path = forms. Charfield (        required=True,        label=u" upload file ",        widget= forms. TextInput (            attrs={                'rows': 2,                '  class'uk-width-1-2',            }        ),    

Upload.html

{# file_path #}<Divclass= "Uk-form-row">                                <Divclass= "Uk-form-label">{{Form.file_path.label_tag}} {% for error in Form.file_path.errors%}<spanclass= "Uk-badge Uk-badge-danger">{{Error}}</span>{% endfor%}</Div>                                <DivID= "Upload-drop" >                                    {# <Iclass= "Uk-icon-cloud-upload uk-icon-medium"></I>Drag the file to this or #}<inputID= "Upload-select"name= "Upload-select"type= "File">                                    <inputtype= "text"ID= "File_path"name= "File_path"value=""Hidden/>                                </Div>                                <DivID= "ProgressBar"class= "Uk-progress Uk-hidden">                                    <Divclass= "Uk-progress-bar"style= "width:0%;">0%</Div>                                </Div>                            </Div><Script>     $(function(){        varProgressBar= $("#progressbar"), Bar=Progressbar.find ('. Uk-progress-bar'), Settings={single:false, Filelimit:1, Action:'/version/file_upload/', //Upload URLAllow :'*. (War|zip)', //Allow War and zipLoadstart:function() {bar.css ("width", "0%"). Text ("0%"); Progressbar.removeclass ("Uk-hidden"); }, Progress:function(percent) {percent=Math.ceil (percent); Bar.css ("width", Percent+"%"). Text (Percent+"%"); }, Allcomplete:function(response) {Uploadfilename=Response.replace (/\"/G,"") Bar.css ("width", "100%"). Text ("100%"); $("#upload-select"). After ("<div class= ' uk-alert ' data-uk-alert> uploaded file: <span class= ' uk-text-success ' >" +Uploadfilename+ "</span></div>"); $("#file_path"). attr ("value", Uploadfilename);        }        }; varSelect=Uikit.uploadselect ($ ("#upload-select"), settings), Drop=Uikit.uploaddrop ($ ("#upload-drop"), settings); });</Script>

views.py

defFileUpload (Request): Files= Request. Files.getlist ('files[]') File_name_list= []     forFinchfiles:destination='d:/temp/'  #Windows        #destination = '/tmp/' # Linux        if  notos.path.exists (destination): os.makedirs (destination) with open (destination+f.name,'wb+') as Destination: forChunkinchf.chunks (): Destination.write (chunk) file_name_list.append (f.name)returnRender_to_json_response (','. Join (File_name_list))

Then, in the overall commit, you can use File_path = form.cleaned_data[' File_path '] to take out the second time to send to the back end of the file name.

See:

Django and Uikit combine to make a no-refresh upload with a progress bar