Joseph-N/Gemfile

## application.css
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require bootstrap
 *= require dropzone
 *= require_tree .
 */

## application.html.erb
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>DropzoneRails</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
    <%= csrf_meta_tags %>

  </head>

  <body>

    <div class="container">
      <div class="header">
        <ul class="nav nav-pills pull-right">
          <li class="active"><a href="#">Tutorial Link</a></li>
        </ul>
        <h3 class="text-muted">Rails - File upload with Dropezone.js & Paperclip</h3>
      </div>
      <%= yield %>

      <div class="footer">
        <p>&copy; Company 2014</p>
      </div>

    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
  </body>
</html>

## 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, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, 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.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require dropzone.min
//= require turbolinks
//= require_tree .

## Gemfile
source 'https://rubygems.org'

# default gems here
#---------------------------

# add paperclip and bootstrap

gem "paperclip", "~> 4.1"
gem 'bootstrap-sass', '~> 3.1.1'


## new.html.erb
<%= form_for(@upload, html: { multipart: true, class: "dropzone"}) do |f|  %>
  <div class="fallback">
    <%= f.file_field :image %><br>
    <%= f.submit "Upload" %>
  </div>
<% end %>

<br>

## routes.rb
DropzoneRails::Application.routes.draw do
  root 'uploads#new'
  resources :uploads
end

## updated_upload.js
$(document).ready(function(){
	// disable auto discover
	Dropzone.autoDiscover = false;

	// grap our upload form by its id
	$("#new_upload").dropzone({
		// restrict image size to a maximum 1MB
		maxFilesize: 1,
		// changed the passed param to one accepted by
		// our rails app
		paramName: "upload[image]",
		// show remove links on each image upload
		addRemoveLinks: true,
		// if the upload was successful
		success: function(file, response){
			// find the remove button link of the uploaded file and give it an id
			// based of the fileID response from the server
			$(file.previewTemplate).find('.dz-remove').attr('id', response.fileID);
			// add the dz-success class (the green tick sign)
			$(file.previewElement).addClass("dz-success");
		},
		//when the remove button is clicked
		removedfile: function(file){
			// grap the id of the uploaded file we set earlier
			var id = $(file.previewTemplate).find('.dz-remove').attr('id');

			// make a DELETE ajax request to delete the file
			$.ajax({
				type: 'DELETE',
				url: '/uploads/' + id,
				success: function(data){
					console.log(data.message);
				}
			});
		}
	});
});

## upload.rb
class Upload < ActiveRecord::Base
	has_attached_file :image, :styles => { :medium => "300x300>",:thumb => "100x100>" }

	validates_attachment 	:image,
				:presence => true,
				:content_type => { :content_type => /\Aimage\/.*\Z/ },
				:size => { :less_than => 1.megabyte }
end

## uploads.js
$(document).ready(function(){
	// disable auto discover
	Dropzone.autoDiscover = false;

	// grap our upload form by its id
	$("#new_upload").dropzone({
		// restrict image size to a maximum 1MB
		maxFilesize: 1,
		// changed the passed param to one accepted by
		// our rails app
		paramName: "upload[image]",
		// show remove links on each image upload
		addRemoveLinks: true
	});
});

## uploads_controller.rb
class UploadsController < ApplicationController
  def new
  	@upload = Upload.new
  end

  def create
  	@upload = Upload.create(upload_params)
  	if @upload.save
  	  render json: { message: "success" }, :status => 200
  	else
  	  #  you need to send an error header, otherwise Dropzone
          #  will not interpret the response as an error:
  	  render json: { error: @upload.errors.full_messages.join(',')}, :status => 400
  	end
  end

  private
  def upload_params
  	params.require(:upload).permit(:image)
  end
end

## uploads_controller_update.rb
class UploadsController < ApplicationController
  def new
    @upload = Upload.new
  end

  def create
    @upload = Upload.create(upload_params)
    if @upload.save
      # send success header
      render json: { message: "success", fileID: @upload.id }, :status => 200
    else
      #  you need to send an error header, otherwise Dropzone
      #  will not interpret the response as an error:
      render json: { error: @upload.errors.full_messages.join(',')}, :status => 400
    end
  end

  def destroy
    @upload = Upload.find(params[:id])
    if @upload.destroy
      render json: { message: "File deleted from server" }
    else
      render json: { message: @upload.errors.full_messages.join(',') }
    end
  end

  private
  def upload_params
    params.require(:upload).permit(:image)
  end
end
	/*
	* This is a manifest file that'll be compiled into application.css, which will include all the files
	* listed below.
	*
	* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
	* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
	*
	* You're free to add application-wide styles to this file and they'll appear at the top of the
	* compiled file, but it's generally better to create a new file per style scope.
	*
	*= require_self
	*= require bootstrap
	*= require dropzone
	*= require_tree .
	*/
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>DropzoneRails</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="author" content="">

	<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
	<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
	<%= csrf_meta_tags %>

	</head>

	<body>

	<div class="container">
	<div class="header">
	<ul class="nav nav-pills pull-right">
	<li class="active"><a href="#">Tutorial Link</a></li>
	</ul>
	<h3 class="text-muted">Rails - File upload with Dropezone.js & Paperclip</h3>
	</div>
	<%= yield %>

	<div class="footer">
	<p>© Company 2014</p>
	</div>

	</div> <!-- /container -->


	<!-- Bootstrap core JavaScript
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	</body>
	</html>
	// 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, vendor/assets/javascripts,
	// or vendor/assets/javascripts of plugins, if any, 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.
	//
	// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
	// about supported directives.
	//
	//= require jquery
	//= require jquery_ujs
	//= require dropzone.min
	//= require turbolinks
	//= require_tree .
	source 'https://rubygems.org'

	# default gems here
	#---------------------------

	# add paperclip and bootstrap

	gem "paperclip", "~> 4.1"
	gem 'bootstrap-sass', '~> 3.1.1'
	<%= form_for(@upload, html: { multipart: true, class: "dropzone"}) do \|f\| %>
	<div class="fallback">
	<%= f.file_field :image %><br>
	<%= f.submit "Upload" %>
	</div>
	<% end %>

	<br>
	DropzoneRails::Application.routes.draw do
	root 'uploads#new'
	resources :uploads
	end
	$(document).ready(function(){
	// disable auto discover
	Dropzone.autoDiscover = false;

	// grap our upload form by its id
	$("#new_upload").dropzone({
	// restrict image size to a maximum 1MB
	maxFilesize: 1,
	// changed the passed param to one accepted by
	// our rails app
	paramName: "upload[image]",
	// show remove links on each image upload
	addRemoveLinks: true,
	// if the upload was successful
	success: function(file, response){
	// find the remove button link of the uploaded file and give it an id
	// based of the fileID response from the server
	$(file.previewTemplate).find('.dz-remove').attr('id', response.fileID);
	// add the dz-success class (the green tick sign)
	$(file.previewElement).addClass("dz-success");
	},
	//when the remove button is clicked
	removedfile: function(file){
	// grap the id of the uploaded file we set earlier
	var id = $(file.previewTemplate).find('.dz-remove').attr('id');

	// make a DELETE ajax request to delete the file
	$.ajax({
	type: 'DELETE',
	url: '/uploads/' + id,
	success: function(data){
	console.log(data.message);
	}
	});
	}
	});
	});
	class Upload < ActiveRecord::Base
	has_attached_file :image, :styles => { :medium => "300x300>",:thumb => "100x100>" }

	validates_attachment :image,
	:presence => true,
	:content_type => { :content_type => /\Aimage\/.*\Z/ },
	:size => { :less_than => 1.megabyte }
	end
	class UploadsController < ApplicationController
	def new
	@upload = Upload.new
	end

	def create
	@upload = Upload.create(upload_params)
	if @upload.save
	render json: { message: "success" }, :status => 200
	else
	# you need to send an error header, otherwise Dropzone
	# will not interpret the response as an error:
	render json: { error: @upload.errors.full_messages.join(',')}, :status => 400
	end
	end

	private
	def upload_params
	params.require(:upload).permit(:image)
	end
	end