get image and upload/save it in server location

Question

I have an beego application in which i have a requirement of uploading a image from client for to server location.

//Till now I have tried the following script
$("#fileupload").on("click",function(){
  $("#my_file").click();
  userImage = document.getElementById('fileupload');
  imgData = getBase64Image(userImage);
  localStorage.setItem("imgData", imgData);
});

<!--Html where i have kept option for image upload-->
<ul>
  <li style="margin-top:5px;">  .Hii vijay  </li>
  <li><input type="file" id="my_file" style="display: none;" /></li>
  <li><img id="fileupload" name="filetoupload" src="../../static/img/img.png"></li>
</ul>

using this script, when i click on empty image(click here to add) it is displaying a browse file option.After selecting the image no action taking place. My requirement is on selection of image from browse option, the selected image should be saved in server location.

Answer 1

See additional notes on bottom...

Relevant template markup:

<input type='file' id="imageInput" name="imageInput" accept="image/*"/>

Relevant JavaScript:

$('#imageInput').change(function(){
    var frm = new FormData();
    frm.append('imageInput', input.files[0]);
    $.ajax({
        method: 'POST',
        address: 'url/to/save/image',
        data: frm,
        contentType: false,
        processData: false,
        cache: false
    });
});

Beego controller handling the upload:

// relevant code
// file upload handling
file, header, er := this.GetFile("imageInput")
if file != nil {
    // some helpers 
    // get the extension of the file  (import "path/filepath" for this)
    extension := filepath.Ext(header.Filename)
    // full filename
    fileName := header.Filename
    // save to server`enter code here`
    err := this.SaveToFile("imageInput", somePathOnServer)
}

JavaScript:

Once the change event fires a new FormData object is being created. The file data is being appended to the form object, finally the code executes a POST request using Ajax.

Beego controller:

By using the .GetFile() method with "imageInput" as argument which is the HTML input control element you can get the file data.

By using the .SaveToFile() method with "imageInput" and a path as arguments, you can save the file to the server.

Note this refers to the controller. I create my Beego controllers using func (this *MainController) ControllerName ()

Answer 2

localStorage that you are using is something like cookies and would never be saved in server. It is per domain saved on the client side.

Also when you want to save the bit to server, you need to do a form post and you should be having some sort of server side code with handles the saving part like where to save and in which format.

Try exploring Php or ASP.NET or Jsp file upload - saving on server. With out server side code it would not be possible to push data using HTML and Javascript alone, as they are only client side scripts.

Update 1: html

<form action="/post/save" method="POST" enctype="multipart/form-data">
    <input type="file" name="images">
</form>

Controller

file, header, err := this.GetFile("images")
if err != nil {
    log.Println("error", err)
} else {
    log.Println("filename", header.Filename)
}

Try some docs on Beego GetFile method. But there seems to be a limitation there like by default, you cannot handle multiple uploaded files at a time.