Joseph-N · July 7, 2022 16:53 · phortx · Aug 21, 2017 · nghoapc · Jan 11, 2018
diff --git a/application.css b/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 .
 */
diff --git a/application.html.erb b/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>
diff --git a/application.js b/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 .
diff --git a/Gemfile b/Gemfile
 source 'https://rubygems.org'

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

 # add paperclip and bootstrap

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

diff --git a/new.html.erb b/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>
diff --git a/routes.rb b/routes.rb
 DropzoneRails::Application.routes.draw do
  root 'uploads#new'
  resources :uploads
 end
diff --git a/updated_upload.js b/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);
 				}
 			});
 		}
 	});	
 });
diff --git a/upload.rb b/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
diff --git a/uploads.js b/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
 	});	
 });
diff --git a/uploads_controller.rb b/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
diff --git a/uploads_controller_update.rb b/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