0

I am developing a chrome extension with an option page. On that page I put an upload image option but can't get the file to load in javascript. I have tried many solutions (1st solution, 2nd solution ...) but none worked. The strange thing is, that even an "onclick" attribute in the html code doesn't call the corresponding function. Here is an example of the code:

HTML example:

<input type="file" name="uploadImage" id="uploadImage" />
<button type="submit" id="imageUpload-btn" onclick="myFunction();">Upload</button>

javascript example:

jQuery("#imageUpload-btn").click(function(){
    var image = new Image();
    image.src = jQuery("#uploadImage").val();
    alert(image.src);
    image.onload = function(){
        alert("on load");
    }
    image.onerror = function(){
        alert("error");
    }
});

I get the path of the file in the first alert, but then always the error alert. The function "myFunction()" is not called, but if I open the file directly in a browser the "onclick" trigger works and "myFunction()" is called.

What am I doing wrong or what am I missing?

Community
  • 1
  • 1
Marko
  • 441
  • 1
  • 15
  • 24
  • The value of a file input is not the actual path to the file (due to browser security). Do you intent to upload this image via ajax? – Musa Oct 13 '13 at 18:28
  • If it is possible i would like to upload it with only javascript and save it in chrome.storage. I have tried a code, that stored the image in localStorage (html5, i tjik that it was the one from this page [link](http://robnyman.github.io/html5demos/localstorage/)), but it doesn't work in the option page of the chrome extension, but if i open the option.html file directly in the browser it works fine. It must be something with the – Marko Oct 14 '13 at 09:22

1 Answers1

0
<form name="Upload" action="#" enctype="multipart/form-data" method="post">
   <p>Filename: <INPUT type="file" name="submitfile" id = "submitfile" />
   <INPUT type="button" value="Send" onClick="checkSize();" />
   </form>

here you are using enctype="multipart/form-data" in this type we dont have opertunity to use 

 im.src = document.getElementById('submitfile').value;

you need to go for apache.commons.fileupload ServletFileUpload.isMultipartContent(request); which is totally java related.

3bu1
  • 977
  • 12
  • 30
  • Thanks, but I know how to make a form and use a server side code (PHP, JSP, ...) to get the POST or GET action, but I need the browser side code with javascript, because i don't have a server and need to upload it on browser side. – Marko Oct 14 '13 at 06:58