# inline jquery / js to an external file.

**URL:** <https://forum.kirupa.com/t/inline-jquery-js-to-an-external-file/635559>\
**Category:** programming\
**Created:** [November 16, 2016, 1:47pm UTC](https://forum.kirupa.com/t/inline-jquery-js-to-an-external-file/635559 "2016-11-16T13:47:32Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ajoo](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@ajoo](https://forum.kirupa.com/u/ajoo)\
**Post date:** [November 16, 2016, 1:47pm UTC](https://forum.kirupa.com/t/inline-jquery-js-to-an-external-file/635559/1 "2016-11-16T13:47:32Z")

</div>

Hi all !

Back with yet another small (I hope) issue. Below is a working jquery snippet which shows a preview of an image once the image is selected. It is however causing a CSP conflict because of the “ **this** ” parameter used in `onchange="readURL(this)"`. Please can someone explain how to get this working by making the jquery external to the file and not using the “ **this** ” keyword.

HTML

```
Select the file to upload: <input type="file" name="userfile" onchange="readURL(this)" /><br>
			        <img id="image" src="#" alt="load_image" />
				<input type="submit" name="upload" value="upload">
	</form>

```

JS

```
		<script>
		function readURL(input){
			if (input.files && input.files[0]) 
			{
				var reader = new FileReader();
				reader.onload = function (e) {
				  $('#image')
					.attr('src', e.target.result)
					.width(200)
					.height(200);
				};
				reader.readAsDataURL(input.files[0]);
			}else{
				alert( "File not selected or browser incompatible." );
			}
		alert("Error");	
		}
	</script>

```

Any help appreciated.  
Thanks all.

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [November 16, 2016, 1:59pm UTC](https://forum.kirupa.com/t/inline-jquery-js-to-an-external-file/635559/2 "2016-11-16T13:59:38Z")

</div>

Just remove the this. It’s not being used.

---

<div class="post-metadata">

**Author:** ![ajoo](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@ajoo](https://forum.kirupa.com/u/ajoo)\
**Post date:** [November 16, 2016, 2:09pm UTC](https://forum.kirupa.com/t/inline-jquery-js-to-an-external-file/635559/3 "2016-11-16T14:09:52Z")

</div>

Hi senocular ! Thanks for the response. Sorry there was a small mistake I made in my code. I forgot to pass give an argument to the function. I have made the change. this is passed to the readURL function as input.Kindly have another look.

Thanks.

---

<div class="post-metadata">

**Author:** ![ajoo](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@ajoo](https://forum.kirupa.com/u/ajoo)\
**Post date:** [November 16, 2016, 2:37pm UTC](https://forum.kirupa.com/t/inline-jquery-js-to-an-external-file/635559/4 "2016-11-16T14:37:52Z")

</div>

Hi ! I managed to do it myself. Find below the code for the same. If there is any issue with it please let me know. Else for someone else like me I post the code below:

```
<html>
<head>
	<title>1. File Upload To Database</title>
	<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
	<meta charset=utf-8 />

</head>
<body>	
	<form action="#" method="POST" ENCTYPE="multipart/form-data">

		Select the file to upload: <input type="file" id="file" name="userfile" /><br> <!-- onchange="readURL()" /><br> -->
									<img id="image" src="#" alt="load_image" /><br>
									<input type="submit" name="upload" value="upload">
	</form>
	
	<script>
		$(window).load(function(){ 
			$('#file').change(function(){
			var files = !!this.files ? this.files : []; 
				if (files && files[0]) 
				{
					var reader = new FileReader();
					reader.onload = function (e) {
					  $('#image')
						.attr('src', e.target.result)
						.width(200)
						.height(200);
					};
					reader.readAsDataURL(files[0]);
				}else{
					alert( "File not selected or browser incompatible." );
				}
			});
		});	
	</script>

```

The onchange = “readURL()” has to be removed. An id=“file” had to be added.  
Thanks all
