upload spree

upload_spree.js

<style>
	.select2-container.select2-container-multi {
		width: 100%;
	}
</style>

<%= form_for [:admin, @product], :method => :put, :html => {:multipart => true} do |f| %>
    <fieldset class="no-border-top">
        <%= f.field_container :option_types do %>
            <%= f.label :option_type_ids, Spree.t(:option_types) %>
            <%= f.hidden_field :option_type_ids, :value => @product.option_type_ids.join(',') %>
        <% end %>
        <input type="hidden" value="true" name="variant_page"/>
        <%- if protect_against_forgery? -%>
            <input type="hidden" name="authenticity-token" id="authenticity-token" value="<%= form_authenticity_token %>"/>
        <%- end -%>
        <div class="form-buttons filter-actions actions" data-hook="buttons">
            <%= button Spree.t('actions.update'), 'icon-refresh' %>
        </div>

    </fieldset>
<% end %>
<div id="accordion">

</div>

<script>
	$(document).ready(function () {
		var $form = $("form.edit_product");
		var form_action = $form.attr("action");
		var product_name_id = form_action.split('/')[3];
		var api_url = window.location.protocol + "//" + window.location.host + '/api/';

		var cross_array = function (option_types) {
			for (var i in option_types) {

			}
		}
		var fetch_types_in_array = function (json) {
			var option_types = [];
			for (var i in json) {
				var option_values = json[i].option_values;
				option_types[i] = [];
				for (var j in option_values) {
					var value = {
						id: option_values[j].id,
						name: option_values[j].name,
						option_type_id: option_values[j].option_type_id,
						option_type_name: option_values[j].option_type_name,
						option_type_presentation: option_values[j].option_type_presentation,
						presentation: option_values[j].presentation
					};
					option_types[i].push(value);
				}// end for j
			}// end for i
			cross_array(option_types);
		};
		var get_types = function (ids) {
			$.getJSON(api_url + 'option_types/', {ids: ids, 'token':  Spree.api_key}).done(function (json) {
				fetch_types_in_array(json);
			});
		};
		var get_product = function (product_name_id) {
			$.getJSON(api_url + 'products/' + product_name_id , {'token':  Spree.api_key}).done(function (json) {
				var ids = "";
				for (var key in json.option_types) {
					ids += json.option_types[key].id + ","
				}
				get_types(ids);
			});
		};
		var start = function () {
			get_product(product_name_id);
		};
		start();

		$form.submit(function (e, data) {
			e.preventDefault();
			$.ajax({
				url: form_action,
				dataType: "json",
				type: "post",
				method: "PUT",
				data: {
					product: {
						option_type_ids: $("#product_option_type_ids").val()
					},
					authenticity_token: $('[name=authenticity_token]').val()
				}
			}).fail(function (data) {
				console.log("FAIL");
			}).success(function (data) {
				console.log("SUCCESS");
				// TODO Tell the user that this action will override the changes that he has done
				start();
				//console.log(data);
			});
		});// Form Submit
	});// Document ready
</script>