How do I modify frontend codes for upload feature

Question

I want to get updating info including upload file feature, for backend codes, it's above:

http.HandleFunc("/uploadHeadurlHandler", uploadHeadurlHandler)

file, image, err := r.FormFile("picture")
if err != nil {
    log.Println(" -- Failed to FormFile, err:", err)
    message(w, code.CodeMsg[code.CodeFormFileFailed])
    return
}

frontend side codes are below as:

<form action="/userinfo" method="post" enctype="multipart/form-data">
<table>
    <tr>
        <td>username</td>
        <td><input type="text" disabled="disabled" name="username" value="{{.Username}}"></td>
    </tr>
    <tr>
        <td>password</td>
        <td><input type="text" name="password"></td>
    </tr>
    <tr>
        <td>nickname</td>
        <td><input type="text" name="nickname" value="{{.Nickname}}"></td>
    </tr>
    <tr>
        <td>file</td>
        <td><input type="file" id="file" name="upload" value="{{.Headurl}}"></td>
    </tr>
</table>
<input type="submit" value="update">

<script>
    $("#file").on("change", function () {
        var formData = new FormData();
        formData.append("file", $("#file")[0].files[0]);
        $.ajax({
            url: "/uploadHeadurlHandler",
            type: "POST",
            data: {picture:formData},
            processData: false,
            contentType: false,
            success: function (response) {
                alert("upload success")
            }
        });
    });
</script>

now backend error is: Failed to FormFile, err: request Content-Type isn't multipart/form-data

I suspended there are some issues on frontend side, I'm a fresh on frontend, anyone can tell me how do I change the above frontend side.

This might help: https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload — Burak Serdar, Jul 19 '20 at 22:02

score 0 · Accepted Answer · answered Jul 19 '20 at 22:02

Your server is expecting a Content-Type of multipart/form-data, but that is not what your frontend is sending.

With jQuery, you need to set the data field to the actual FormData object you want to send. To set the correct name you're expecting on your server, you should also change the name to picture on your front-end.

When you apply these changes it looks like this:

<script>
    $("#file").on("change", function () {
        var formData = new FormData();
        formData.append("picture", $("#file")[0].files[0]); // <- changed the form file name 
        $.ajax({
            url: "/uploadHeadurlHandler",
            type: "POST",
            data: formData, // <- send the actual FormData object
            processData: false,
            contentType: false,
            success: function (response) {
                alert("upload success")
            }
        });
    });
</script>

That way, uploads should work. Then you need to rename the name of the input field in your HTML form to make sure they also work without JavaScript (if the action of the form is set correctly etc.):

<tr>
    <td>file</td>
    <td><input type="file" id="file" name="picture" value="{{.Headurl}}"></td>
</tr>

your answer solved my problem, thank you, have accepted – Frank Jul 20 '20 at 02:25 — Frank, Jul 20 '20 at 02:25

How do I modify frontend codes for upload feature

1 Answers1