Ruby on Rails:JSが反映されない

前提・実現したいこと

プログラミング初心者です。
JSを反映させたいのですが、反映できません。
下記URLを参考にしています。
https://qiita.com/Hijiri-K/items/1a3f7137cf3186580447

＜追記＞
動きとしては、四角の枠内に画像をアップロードし（複数可）、枠内のみで画像をドラッグ＆ドロップで自由移動できる、ということを行いたいです。

mts10806さまから
「#getphotoや#previewがhtml内にありません」とありますが、
htmlにどのように記述すればよろしいのでしょうか。

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

エラーメッセージ等は特に出ていないです。
画面に反映されません。

該当のソースコード

<!-- new.html.erb -->
<div class="corde-visual">
</div>

<h1>コーデ登録</h1>
	<%= form_for(@corde_new) do |f| %>
		▷コーデ名
		<%= f.text_field :corde_name %>
		▷シーズン
		<%= f.radio_button :season, "春" %> 春
		<%= f.radio_button :season, "夏" %> 夏
		<%= f.radio_button :season, "秋" %> 秋
		<%= f.radio_button :season, "冬" %> 冬
		<%= f.submit'保存' %>
	<% end %>
<%= javascript_include_tag 'corde.js' %>

--------------
<!-- corde.js -->
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]);
		// ファイル複数個取得
		var filesLength = files.length;

		//読み込み後
		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);
	}
});

--------------------
<!-- application.js -->
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require rails-ujs
//= require activestorage
//= require turbolinks


--------------------
<!-- config/initializers/assets.rb -->
# Be sure to restart your server when you modify this file.

# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'

# Add additional assets to the asset load path.
# Rails.application.config.assets.paths << Emoji.images_path
# Add Yarn node_modules folder to the asset load path.
Rails.application.config.assets.paths << Rails.root.join('node_modules')

# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in the app/assets
# folder are already added.
# Rails.application.config.assets.precompile += %w( admin.js admin.css )

Rails.application.config.assets.precompile += %w( corde.js )

試したこと

サイト通り、再起動もかけました。
他の機能が影響しているかもと思い、消したり、書き順を変えたりもしました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

yu-smc

2019/03/10 09:23

ブラウザで実際に読み込まれているHTMLで、js読み込み記述はどうなっていますか？可能なら「ソースを表示」で該当のソースをご提示ください。

m.ts10806

2019/03/10 12:53

JavaScriptに書かれている#getphotoや#previewがhtml内にありませんが、そもそもどういう動きを実現させたいのでしょうか。「エラーメッセージがでていない」はどこを見て仰っていますか？

Masskaz

2019/03/11 08:33

>yu-smcさまブラウザで検証を見てみたところ、どうやら該当ソースが読み込まれていないみたいです。申し訳ありません。 >mts10806さま動きとしては、四角の枠内に画像をアップロードし（複数可）、枠内のみで画像をドラッグ＆ドロップで自由移動できる、ということを行いたいです。「#getphotoや#previewがhtml内にありませんが」とありますが、htmlにどのように記述すればよろしいのでしょうか。「エラーメッセージがでていない」というのは、rails sで読み込んだ？ブラウザ上に表示されていないといことで私は解釈しているのですが、エラーメッセージは他の場所にも出るのでしょうか。分からないことばかりで大変恐縮ですが、宜しくお願い致します。

m.ts10806

2019/03/11 08:51

質問は編集できますので適宜追記ください