Utknąłem na temat tego, co zrobić, aby załadować obraz w edytorze froala. Mam działającą dla Ciebie przesyłkę do wysyłania zdjęć do Google Cloud Storage dla innych sekcji mojej aplikacji, a teraz chcę mieć również możliwość załadowania zdjęć do edytora froala.Rails 4 - Jak załadować obraz w edytorze froala z carrierwave?
Oto co zrobiłem do tej pory
obraz po uplaoder
class PostImageUploader < CarrierWave::Uploader::Base
# Choose what kind of storage to use for this uploader:
storage :fog
# Override the directory where uploaded files will be stored.
# This is a sensible default for uploaders that are meant to be mounted:
def store_dir
"post-image"
end
# Add a white list of extensions which are allowed to be uploaded.
# For images you might use something like this:
def extension_white_list
%w(jpg jpeg gif png)
end
# Override the filename of the uploaded files:
# Avoid using model.id or version_name here, see uploader/store.rb for details.
def filename
"#{model.id}-#{original_filename}" if original_filename.present?
end
end
zrobiłem model po obrazu
class PostImage < ActiveRecord::Base
belongs_to :post
mount_uploader :image, PostImageUploader
validate :image_size
# Validates the size of an uploaded picture.
def image_size
if image.size > 5.megabytes
errors.add(:picture, "should be less than 5MB")
end
end
end
zrobiłem attach i detach metody w moim kontroler postu ale nie wiem, co w nich umieścić.
def attach
end
def detach
end
def image_params
params.require(:post_image).permit(:image)
end
Stworzyłem trasy do metod dołączania i odłączania, ale mogą one być błędne, ponieważ nie jestem pewien, czy nawet potrzebuję tych metod.
match '/guides/:guide_id/posts/attach' => 'posts#attach', :via => :create, as: :attach_guide_post_image
match '/guides/:guide_id/posts/detach'=> 'posts#detach', :via => :delete, as: :detach_guide_post_image
mój carriwewave inicjująca jest ustawiony i działa (bo używam go w innych miejscach na miejscu), więc nie sądzę, że trzeba dodać go. I nie sądzę, muszę dodać mój kontroler pocztowy new i create metody, ich ładny standard.
Stąd poszedłem do froala docs for image uploads, ale nie wiem, jakie wartości umieścić i które potrzebuję, a których nie potrzebuję. Moje pytania to komentarze napisane wielkimi literami.
<script>
$(function() {
$('.editor')
.froalaeditor({
// Set the image upload parameter.
imageUploadParam: 'image',
// 1. I'M GUESSING THIS IS THE PARAM PASSED
// Set the image upload URL.
imageUploadURL: <%= attach_guide_post_image_path =%>,
// 2. MADE THIS PATH IN THE ROUTES
// Set request type.
imageUploadMethod: 'POST',
// Set max image size to 5MB.
imageMaxSize: 5 * 1024 * 1024,
// Allow to upload PNG and JPG.
imageAllowedTypes: ['jpeg', 'jpg', 'png', 'gif']
})
.on('froalaEditor.image.beforeUpload', function (e, editor, images) {
// Return false if you want to stop the image upload.
//3. SO I PUT ERROR MESSAGE IN THESE?? IF SO SHOULD IT BE A POPUP OR TEXT ON THE SCREEN AND HOW
})
.on('froalaEditor.image.uploaded', function (e, editor, response) {
// Image was uploaded to the server.
})
.on('froalaEditor.image.inserted', function (e, editor, $img, response) {
// Image was inserted in the editor.
})
.on('froalaEditor.image.replaced', function (e, editor, $img, response) {
// Image was replaced in the editor.
})
.on('froalaEditor.image.error', function (e, editor, error, response) {
// Bad link.
else if (error.code == 1) { ... }
// No link in upload response.
else if (error.code == 2) { ... }
// Error during image upload.
else if (error.code == 3) { ... }
// Parsing response failed.
else if (error.code == 4) { ... }
// Image too text-large.
else if (error.code == 5) { ... }
// Invalid image type.
else if (error.code == 6) { ... }
// Image can be uploaded only to same domain in IE 8 and IE 9.
else if (error.code == 7) { ... }
// Response contains the original server response to the request if available.
});
});
</script>
Oto, co mam. Znam podstawowe JS i używam szyn przez około 6 miesięcy, więc jestem całkiem nowy w tym. Nigdy nie robiłem czegoś takiego w szynach i js i nie mogę znaleźć na nim solidnego przewodnika.
Powyżej jest to, co mam i utknąłem. Chciałbym uzyskać pomoc dotyczącą tego, co należy zrobić, aby przesyłać zdjęcia.
Nie ma jeszcze problemu. Po prostu nie wiem jak to zrobić. – Rob