I'm doing a chat application, which opens a file (via file input) and then converts it to DATA URI. (I'm using PubNub) when I send the string, I get a 'URI too long' error. How can I compress the URI, or at least capture this error? (try..catch does not seem to work)
//LOCAL GLOBAL VAR TECHNIQUE
var rethtml = "";
function encodeImageFileAsURL() {
var filesSelected = document.getElementById('inputImg').files;
if (filesSelected.length > 0) {
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var srcData = fileLoadedEvent.target.result; // <--- data: base64
var newImage = document.createElement('img');
newImage.src = srcData;
//shortening the name, and also making the local variable public (for other purposes)
rethtml = newImage.outerHTML;
//CHANGING LOCAL IMG
document.getElementById("imgTestLocal").innerHTML=rethtml;
//SENDING TO SERVER CHAT
pubnub.publish({channel : channel,message : rethtml});
}
fileReader.readAsDataURL(fileToLoad);
}
}.fileContainer {
overflow: hidden;
position: relative;
width:50px;
height:50px;
}
img {
display:inline-block;
width:30px;
height:30px;
}
.fileContainer [type=file] {
cursor: inherit;
display: block;
font-size: 999px;
filter: alpha(opacity=0);
min-height: 100%;
min-width: 100%;
opacity: 0;
position: absolute;
right: 0;
text-align: right;
top: 0;
}
#bwui_file{
background-color:#222;
color:#fff;
display:block;
padding:0;
margin:10px;
width:30px;
height:30px;
transition:500ms;
font-size:15pt;
text-align:center;
border:none;
outline:none;
border-radius:50%;
}
.fileContainer:hover > #bwui_file {
margin:5px;
width:40px;
height:40px;
background-color:#fff;
color:#222;
font-size:20pt;
transition:500ms;
}<html lang="en-US">
<body>
Ele funciona perfeitamento aqui (carregando a imagem localmente) mas quando eu tento enviar uma imagem muito pesada, somente a local carrega..
<div class="fileContainer">
<input type="button" value="➕" id="bwui_file"/>
<input id="inputImg" type="file" onchange="encodeImageFileAsURL();" />
</div>
LOCAL:
<div id="imgTestLocal" width="10px" height="10px"></div>
PUBNUB (preciso deste para o chat):
<div id="imgTest" width="10px" height="10px"></div>
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.0.11.min.js"></script><script>varpubnunb;pubnub=newPubNub({publishKey:'demo',subscribeKey:'demo'});function$(id){returndocument.getElementById(id);}varbox=$('content'),channel='snippet';//CHATRECEIVEpubnub.addListener({message:function(obj){document.getElementById("imgTest").innerHTML=obj.message;
alert(obj.message);
}});
pubnub.subscribe({channels:[channel]});
</script>
</body>
</html>