How to upload a image file using ajax by using prototype.js plugin, I need to display those image after it is uploaded please help to solve this problem.
Thanks
You will need something on the server, too.
I recommend using paperclip for storing the files on your server.
Once you have it set up, you should make your ajax generate one form with a "file" field. Also, remember that the form must be multipart.
<% form_for #picture, :html => { :multipart => true } do |f| %>
<%= f.file_field :file %>
<%= f.submit "Submit" %>
<% end %>
If you just need to upload one file, you probably don't need full AJAX - only plain javascript - for showing/hiding the form. Like this:
<%= link_to_function 'Show/Hide image upload') do |page|
page.visual_effect :toggle_blind, 'upload_image'
end
%>
<div id='upload_image' style='display:none'>
<% form_for #picture, :html => { :multipart => true } do |f| %>
<%= f.file_field :file %>
<%= f.submit "Submit" %>
<% end %>
</div>
Notice that for hiding/showing the div I'm using a Scriptaculous effect, not just prototype - scriptaculous gets included by default on rails anyway.
you can use remote_form_for with a file upload plugin like attachment_fu or paperclip and then render the image back on the view once it is uploaded. May be using update_page in controller.
https://github.com/JangoSteve/remotipart
Remotipart is a Ruby on Rails gem enabling AJAX file uploads with jQuery in Rails 3.0 and Rails 3.1 remote forms. This gem augments the native Rails jQuery remote form functionality enabling asynchronous file uploads with little to no modification to your application.
gem 'remotipart', '~> 1.0'
bundle install
Related
I am trying to use Dropzone.js to upload files within my Rails app.
It seems that if I use the standard setup, the entire form becomes an image upload field. However, my form contains other fields as well. I only want to use Dropzone.js in a file_field area.
Steps I've used are:
Gemfile
gem 'rails-assets-dropzonejs', source: 'https://rails-assets.org'
application.js
//= require dropzonejs
application.css
*= require dropzonejs
_form.html.erb
<%= form_for #activity, html: {class: 'ui form'} do |f| %>
<!-- Fields like this one don't need to be dropzone fields -->
<div class="field">
<%= f.label :name %>
<%= f.text_field :name %>
</div>
<!-- The following field does -->
<div class="field">
<%= f.label :gallery_images %>
<%= f.file_field :gallery_images, multiple: true, class: 'drop' %>
<%= f.hidden_field :gallery_images_cache %>
</div>
<% end %>
activities.coffee
$ ->
$('.drop').dropzone({ url: "/activities/post" });
As you can see, I'm trying to bind Dropzone to the 'drop' class which I've attached to the file_field. However, this doesn't seem to work correctly and I am seeing no errors in the console.
Anyone have an idea how I'd get Dropzone.js to work for a file_field within a Rails form? Or can I only bind it to the entire form?
Any help is much appreciated! Thanks!
You need to permit the :file param. Most probably there will be code something along the line of
private
def activities_params
params.permit(:name, ...other_params)
end
Add :file to the permit method
private
def activities_params
params.permit(...other_params, :file)
end
This is the code in _image_fields.html.erb
<div class="nested-fields">
<div class="image-fields"> <%= image_tag f.object.image_url(:thumb) if f.object.image_url.present? %>
<%= f.file_field :image %>
<%= f.hidden_field :image_cache %> </div> <div class="add-language-spacing"> <%= link_to_remove_association 'Remove Image', f, id: 'remove_photo' %> </div>
This is where i'm rendering that partial in _profile_form.html.erb
<p id="tag">Add Some Photos!</p>
<div>
<%= f.fields_for :images do |image| %>
<%= render "image_fields", f: image %>
<% end %>
</div>
And then finally, in profile/edit.html.erb
<div class="profile-form">
<h1 class="page-title">Update Profile</h1>
<%= render 'profile_form' %>
</div>
My uploader looks like this
# Create different versions of your uploaded files:
process resize_to_fit: [300,300]
version :thumb do
process resize_to_fill: [200,200]
end
The thumb version only shows up after I press update profile and then refresh the page. For whatever reason it won't show the thumbnail version when I press choose file.
This is the confusing part of webdevelopment when you are starting out: what is executed in the client (browser) and what is executed on the server.
1) You are using cocoon to build a form, this means all data inside the form is only processed on the server once you submit the form.
2) You are using carrierwave, which explicitly only works in ruby on the server.
So together this means: only after submitting the form to the server, your uploader will create the thumbnail, and thus only after submitting the image_url will be defined.
What you want is, once you select the image, it will show a thumbnail, before uploading it to the server, and this means you either need
ajax to immediately post to the server (and let it render the thumbnail)
a javascript solution, which will read the contents of the file and show it (client-side, in the browser), before sending it to the server
Personally I do not believe cocoon is the right tool for the job here. I would suggest using something like
jquery-file-upload
dropzonejs
The following page successfully uses ajax and jquery-file-uploader to upload an image:
<%= javascript_include_tag "/assets/jquery.js" %>
<%= javascript_include_tag "/assets/jquery_ujs.js" %>
<%= javascript_include_tag "/assets/jquery-fileupload/jquery.iframe-transport.js" %>
<%= javascript_include_tag "/assets/jquery-fileupload/jquery.fileupload.js" %>
<%= javascript_include_tag "/assets/jquery-fileupload/basic.js" %>
<%= javascript_include_tag "/assets/jquery-fileupload/vendor/tmpl.js" %>
<%= javascript_include_tag "/assets/profiles.js" %>
<%= form_for #profile, :html => {:id => "the_form", :multipart => true},
:authenticity_token => true, remote: true do |f| %>
<%= f.file_field :pic, :id => "filer", :multiple => true %>
<% end %>
However, I am now trying to render the form via ajax. So a user goes to the page, clicks on a button that says "display form", and ajax renders the form on the page. When I do this, the form no longer works. When someone selects a file, the server doesn't do anything. I tried adding a submit button, but then for some weird reason the request is submitted as html and not with ajax. How do I get jquery-file-uploader to work with the ajax rendered form?
Here is the coffee script file being called by the final javascript_include_tag:
jQuery ->
$('#the_form').fileupload
dataType: "script"
That you're loading the form with Ajax, I think your fileupload function is not binding to your DOM element. This is a common issue with Ajax, which can be solved by delegating the bind to document, rather than the object specifically:
$('document').fileupload(
'option',
'fileInput',
$('input:file')
);
From this resource
JS
The real issue is that JQuery / Javascript performs its element bindings on page load. This means if your element isn't loaded initially, it doesn't exist to JS. The way around this is to bind to the document, or another container, and delegate down to its children
you definitely need to look at this http://os.alfajango.com/remotipart/
because rails donot support ajax file upload , but using this gem you can achieve it.
I've been trying to upload an image using ajax, but maybe I'm doing it wrong
<%= simple_form_for #note, remote: true do |f|%>
<%= f.text_area :content%>
<%= f.file_field :picture %>
<%= f.submit "save"%>
<%end%>
but every time I hit save... it is not doing the upload, it goes to the show action instead of displaying the alerts that I have in the file create.js.erb (it does have the multipart parameter in the form label.
Is it possible to upload an image using this way? or should I check the jquery-file-upload library?
Thanks in advance
Javier
You can not use Ajax for a file upload. But you can use e.g. the fileupload plugin for jQuery http://blueimp.github.com/jQuery-File-Upload/
I had the same problem --> form_tag with remote: true does not make an ajax request
You can use jquery.form plugin for file upload through ajax. Here is a link for that.
http://jquery.malsup.com/form/
Basically when I include and use a file uploader in my form it seems to cancel out the :remote => true functionality and processes the action as HTML in place of JS. any ideas?
I was just faced with the same issue and found the following alternatives to make it work:
Gem remotipart => http://www.alfajango.com/blog/rails-3-ajax-file-uploads-with-remotipart/
jQuery Plugin 'jaxy' => https://github.com/adamlogic/jquery-jaxy
I think I like the first option better. But it's good to have options. =)
You can't upload files via AJAX, so apparently your request comes as plain HTML, because you don't have anything specific to :js and rails thinks it's just a plain HTML POST request.
https://github.com/JangoSteve/remotipart
gem 'remotipart', '~> 1.2'
and then bundle install
//= require jquery.remotipart
sample_layout.html.erb
<%= form_for #sample, :html => { :multipart => true }, :remote => true do |f| %>
<div class="field">
<%= f.label :file %>
<%= f.file_field :file %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
in Controller
def create
respond_to do |format|
if #sample.save
format.js
end
end
end
create.js.erb
// Display a Javascript alert
alert('success!');
<% if remotipart_submitted? %>
alert('submitted via remotipart')
<% else %>
alert('submitted via native jquery-ujs')
<% end %>
AJAX image uploads do not work, at least not in the standard way.
There are newer, HTML5 techniques that make it work, and workarounds using <iframe>
There is a great library that does multiple file ajax upload with progress meter and degrades to use different techniques depending on the browser.
AJAX Upload library: http://valums.com/ajax-upload/
It will require a little extra work, but the result can be really nice!