python flask upload file with ajax

flask_upload_ajax

<!-- source: http://stackoverflow.com/questions/18334717/how-to-upload-a-file-using-an-ajax-call-in-flask -->
<!-- yang perlu diingat, button yang untuk trigger dipisah dari form2 yang mau di-submit -->

<!-- html -->
<form id="upload-file" method="post" enctype="multipart/form-data">
    <fieldset>
        <label for="file">Select a file</label>
        <input name="file" type="file">
    </fieldset>
    <fieldset>
        <button id="upload-file-btn" type="button">Upload</button>
    </fieldset>
</form>

<!-- javascript ajax -->
$(function() {
    $('#upload-file-btn').click(function() {
        var form_data = new FormData($('#upload-file')[0]);
        $.ajax({
            type: 'POST',
            url: '/uploadajax',
            data: form_data,
            contentType: false,
            cache: false,
            processData: false,
            async: false,
            success: function(data) {
                console.log('Success!');
            },
        });
    });
});

<!------------------------------------------------ contoh -------------------------------------->

<!-- contoh sendiri yang jadi -->
// upload multiple form using jquery
$(document).ready(function() {
    $("#sendAll").click(function() {
        // data diolah disini kemudian passing as json ke python
        var filename = $("input[name='filename']").val();
        var comment = $("textarea[name='message']").val();
        var photos = new FormData($("#imageform")[0]);
        // console.log(filename);
        // console.log(comment);
        // console.log(photos);
        photos.append("filename", filename);
        photos.append("comment", comment);

        // send via ajax this data
        $.ajax({
            url: "/upload_page",
            type: "POST",

            // progress handling start
            xhr: function() {  // Custom XMLHttpRequest
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) { // Check if upload property exists
                myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
            } else {
                console.log("Upload progress is not supported!");
            }
            return myXhr;
            },

            // ajax events
            // beforeSend: beforeSendHandler,
            // success: completeHandler,
            // error: errorHandler,
            // progress handling ends

            data: photos,
            cache: false,
            // async: false,
            processData: false,
            contentType: false,
            success: function(response) {
                // console.log(response);
                // window.location.reload(true);
                console.log("hai")
                // harusnya clear semua form
                $("input[name='filename']").val("");
                $("textarea[name='message']").val("");
                $(":file").val("");
                $("progress").attr({"value": 0, "total": 100});
            }
        });
    });
});

function progressHandlingFunction(e) {
    if (e.lengthComputable) {
        console.log("hai progress!");
        console.log(e.loaded);
        console.log(e.total);
        $("progress").attr({value: e.loaded, max: e.total});
    }
}

<!-- contoh form2 yang di-submit (ada 3 form) -->
<form action="/upload_test" method="POST" id="filenameform">
    <input type="text" name="filename" class="span3" id="filename-trigger" placeholder="Add File Name Here">
    <button type="submit" class="btn btn-large" style="display: none;">Add Filename</button>
</form>

<form action="/upload_page" enctype ='multipart/form-data' id="imageform" method="POST">
  <button type="submit" class="btn btn-large" id="file-trigger">Upload File</button>
  <input type="file" id="photos" name="photos">
</form>

<form action="/upload_test" method="POST" id="commentform">
<fieldset>
  <legend>Message to Reviewer</legend>
  <textarea name="message" rows="4" placeholder="Add message here"></textarea>
  <button type="submit" class="btn btn-primary btn-large" id="comment-trigger" style="display: none;">Submit</button>
</fieldset>
</form>

<!-- button trigger -->
<button type="submit" class="btn btn-primary btn-large" id="sendAll">Submit</button>