Yigit C. Bacakoglu Yazılım Mühendisi | Rubyist | Mekanist on Rails

  19/12/2013 at 09:46       by yigit     under ,

Selam arkadaşlar,

Bugünkü yazımda Rails ile basit bir dosya yükleme uygulaması yapacağız. Tamamladıktan sonra tanıdık bir websitesi ortaya cikacak. cikti.al :)


Başlangıç

Yeni projemizi oluşturarak başlayalım.

rails _3.2.13_ new ciktial
cd ciktial

Projemizde kullanacığımız gemleri Gemfile dosyamıza ekleyelim ve ardından bundle install ile yükleyelim.

gem 'dropzonejs-rails'
gem 'paperclip'

Daha sonra dropzone.js scriptini sayfalarımızda kullanmak için application.js dosyamıza ekleyelim:

//= require jquery
//= require jquery_ujs
//= require dropzone
//= require_tree .

Aynı şekilde css dosyasınıda application.css dosyamıza ekleyelim:

 *= require_self
 *= require dropzone/basic
 *= require_tree .

Scaffolding

Bildiğiniz gibi scaffold komutuyla Rails ile database tablosundan modellere, controllerdan route & html dosyalarına kadar herşey otomatik olarak oluşuyor. Bizde hızlıca gerekli dosyaları oluşturalım:

rails g scaffold photo attachment:attachment code:string
rake db:migrate

:attachment paperclip gem'i ile gelen bir helper veri tipidir ve paperclip'in istediği fieldları oluşturur.

Photo(id: integer, attachment_file_name: string, attachment_content_type: string, attachment_file_size: integer, attachment_updated_at: datetime, code: string, created_at: datetime, updated_at: datetime)

photo.rb modeline gerekli paperclip attachment ayarlarını yapalım:

class Photo < ActiveRecord::Base
  attr_accessible :attachment, :code
  has_attached_file :attachment, :styles => { :medium => "300x300>", :thumb => "100x100>" }, :default_url => "/images/:style/missing.png"
  
end

code kolonu her yükleme işlemi için unique olacak ve url'den o kodla gelindiği zaman, kodun bulunduğu dosyalar listelenecek.


dropzone.js için gerekli olan kullanım scriptini application.js dosyamıza ekleyelim.


Dropzone.options.photoDropzone = {
  paramName: "photo[attachment]",
  maxFilesize: 2,
  addRemoveLinks: true,
  init: function() {
    return this.on('removedfile', function(file) {
      if (file.xhr) {
        return $.ajax({
          url: "" + ($("#photo-dropzone").attr("action")) + "/" + (JSON.parse(file.xhr.response).id),
          type: 'DELETE'
        });
      }
    });
  }
};

Daha sonra html formumuzu hazırlayalım. app/views/photos/_form.html.erb

<%= "Kod:#{@photo.code}" %>
<%= form_for @photo, multipart: true, html: {class: :dropzone, id: 'photo-dropzone'} do |f| %>
    <%= f.hidden_field :code %>
<% end %>

ve photos_controller.rb dosyamızı düzenleyelim.

class PhotosController < ApplicationController

  # GET /photos/new
  # GET /photos/new.json
  def new
    @photo = Photo.new
    @photo.code = SecureRandom.hex(2)
    respond_to do |format|
      format.html # new.html.erb
      format.json { render json: @photo }
    end
  end

  # POST /photos
  # POST /photos.json
  def create
    @photo = Photo.new(params[:photo])

    respond_to do |format|
      if @photo.save
        format.html { redirect_to @photo, notice: 'Photo was successfully created.' }
        format.json { render json: @photo, status: :created, location: @photo }
      else
        format.html { render action: "new" }
        format.json { render json: @photo.errors, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /photos/1
  # DELETE /photos/1.json
  def destroy
    @photo = Photo.find(params[:id])
    @photo.destroy
    render nothing: true
  end
end

Ve yükleme işlemini başarıyla bitirdik. http://localhost:3001/photos/new adresine giderseniz fotoğraflarınız yükleyebilir ve silebilirsiniz.

uygulama resmi dropzone rails

Elimizdeki kod ile dosyaları listelemek için photos_controller.rb dosyamıza index action ekleyelim.

def index
@photos = Photo.where(:code => params[:code])
end

Şimdi http://localhost:3000/photos?code=KOD adresine giderseniz, o koda ait tüm resimleri görebilirsiniz.

Cikti.al 'a daha da benzemesi için daha çok emek gerekiyor. Şimdilik bu kadar, gerisi size kalmış :)

Kaynak Kodlar

Comment Rails ile Paperclip ve Dropzone.js kullanarak dosya yükleme uygulaması