将文件从本地存储上传到具有chrome扩展名的服务器

Question

How can I upload a file from users local storage to my web server with chrome Extension. I used a simple input tag of type file and when user clicks on it, file browser opens and the extension pop up disappears and nothing is uploaded. I am using google chrome on Ubuntu 15.04.

In my popup.html which loads when icon is clicked :

<form method="post" action="" id="smsCampForm">

  <input type="text" name="recipent_number" id="recipent_number" placeholder="Recipent numbers separated by commas" class="form-control" required>
  <input type="file" name="fileToUpload" class="form-control" placeholder="Upload Excel File">
  <select name="listToSendSms" id="listToSendSms"></select>
  <textarea name ="message_content" rows="5" maxlength="120"  id="message_content" placeholder="Message maximum 120 characters" class="form-control"  required></textarea>
  <input type="submit" id="smsSubmit" name="submit" value="Send SMS" class="btn btn-success"></input>
</form>

And I have a javascript file :

$("#smsCampForm").submit(function(event){
document.getElementById("smsSubmit").value = "Sending SMS...";
var formData = new FormData(this);
formData.append("chromeExtensionRequest","1");
$.ajax({
  url : myurl,
  type : 'POST',
  data : formData,
  processData : false,
  contentType : false,
  success : function(data,status){
    $("#smsResponse").html("<div class='alert alert-info'>"+data+"</div>");
    document.getElementById("smsSubmit").value = "Send SMS";
  }
});
event.preventDefault();
});
});

Answer 1

Since a popup is completely destroyed when it loses focus, your file picker basically doesn't trigger anything - all code is unloaded.

There is no way to prevent this behavior; therefore, you should offload this to something else, like a separate page loaded in a tab or the background page.