How to capture error: SERVER RESPONDS REQUEST-URI TOO LONG, STATUS = 414

Asked

Viewed 40 times

1

I’m making a chat application, which opens a file (via file input) and then converts to DATA URI. (I am 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 doesn’t 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>

var pubnunb;
		pubnub = new PubNub({ publishKey : 'demo', subscribeKey : 'demo' });
		
		function $(id) { return document.getElementById(id); }
		var box = $('content'), channel = 'snippet';
		
    //CHAT RECEIVE
		pubnub.addListener({
		  message: function(obj) {
			  document.getElementById("imgTest").innerHTML=obj.message;
		    alert(obj.message);
        
		  }});
      pubnub.subscribe({channels:[channel]});
      
      

</script>

</body>

</html>

javascript html

  • That one return rethtml; does not make any sense, because the function is in onchange.

  • That one return rethtml; yet does not make any sense, because the function is in onchange.

  • truth, because all the value I need is in "rethtml = newImage.outerHTML" {e... has been edited}

No answers

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.