2

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.

captainsac
  • 2,484
  • 3
  • 27
  • 48
vkc
  • 83
  • 1
  • 1
  • 9
  • use ajax file upload plugin you can't do it in this way https://github.com/jchild3rs/AjaxFileUpload – kaxi1993 Jun 12 '15 at 05:05
  • @kaxi1993, can you post an answer for this.. since i am newbee in this and i need this task to be done now. – vkc Jun 12 '15 at 05:10
  • @kaxi1993, but i cannot use php for this since i am using beego – vkc Jun 12 '15 at 05:12

2 Answers2

1

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.

Mahesh Jasti
  • 572
  • 3
  • 18
  • nodejs is server side javascript and probably the best solution for this problem. – Rob Jun 12 '15 at 05:20
  • @Mahesh, since i am using Beego as my web framework. Is there any functionality that i can achieve this in beego only. – vkc Jun 12 '15 at 05:30
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 ()

Stef K
  • 469
  • 8
  • 13