Uncaught TypeError: Cannot set property 'onchange' of nullの解決方法

前提・実現したいこと

RubyonRailsをメインにアプリを作っています。
現在cssを使用し画像を配置しようとしているのですが、
下記エラー文が出てしまい、配置画像が表示されません。

どのようにすればよいのでしょうか。

発生している問題・エラーメッセージ

corde.self-f33d82277aeab6407e18cc2ce607b2f0801475396ae27d6328035c8edc0fc594.js?body=1:4 Uncaught TypeError: Cannot set property 'onchange' of null
    at HTMLDocument.<anonymous> (corde.self-f33d82277aeab6407e18cc2ce607b2f0801475396ae27d6328035c8edc0fc594.js?body=1:4)
    at fire (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3233)
    at Object.fireWith [as resolveWith] (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3363)
    at Function.ready (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3583)
    at HTMLDocument.completed (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3618)
(anonymous) @ corde.self-f33d82277aeab6407e18cc2ce607b2f0801475396ae27d6328035c8edc0fc594.js?body=1:4
fire @ jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3233
fireWith @ jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3363
ready @ jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3583
completed @ jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3618

該当のソースコード

js--------
$(function() {
	var file = document.querySelector('#getphoto');

	file.onchange = function (){
		var fileList = file.files;
		if (file.files[0] == null) {
			document.querySelector('#preview').src = "";
		} else {
			//読み込み
			var reader = new FileReader();
			reader.readAsDataURL(fileList[0]);

			//読み込み後
			reader.onload = function  () {
				document.querySelector('#preview').src = reader.result;
				$('#preview').css("display", "inline-block");
			};
		};
	};

	$("#preview").draggable({
		containment: "parent",
		drag: function(e, ui) {
			$(".x_offset").text(ui.offset.left);
			$(".y_offset").text(ui.offset.top);
		}
	});

});

ーーーーーーーーー
html-------
<%= javascript_include_tag "corde.js" %>

試したこと

js内にあるfunctionが原因かと思い、名前を変えてみたのですが、下記別のエラー文が出ます。

エラー文
Uncaught SyntaxError: Unexpected token {
ーーーーーー
js--------
$(function() {
	var file = document.querySelector('#getphoto');

	file.onchange = myfunction (){　　**←ここに×がつきます。**
		var fileList = file.files;
		if (file.files[0] == null) {
			document.querySelector('#preview').src = "";
		} else {
			//読み込み
			var reader = new FileReader();
			reader.readAsDataURL(fileList[0]);
			// ファイル複数個取得

			//読み込み後
			reader.onload = myfunction  () {
				document.querySelector('#preview').src = reader.result;
				$('#preview').css("display", "inline-block");
			};
		};
	};

	$("#preview").draggable({
		containment: "parent",
		drag: myfunction(e, ui) {
			$(".x_offset").text(ui.offset.left);
			$(".y_offset").text(ui.offset.top);
		}
	});

});