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/
Related
I have a form made with simple_form that accept csv file to be converted it in an xlsx file (operating some operation to manipulate data).
<%= simple_form_for order, url: convert_orders_url, html: {multipart: true} do |f| %>
<%= f.file_field :file %>
<%= f.submit "Convert" %>
<% end %>
In my controller:
def convert
filename = #call to function that return the file path
send_file filename
end
The problem I have is that I need to upload multiple file one by one.
Anyway every time I need to reload the page manually cause I cannot submit the form multiple times and I can't reload the page in the controller because it raise a Double Render Error, because of the "send_file".
Is there a way to submit a form multiple time without reload the page in Ruby on Rails?
You can use remote: true on your form to submit the form using AJAX without reloading the page. However, with file uploads you'll find that remote: true won't work out of the box and you'll need something like remotipart.
I need to upload a file in rails without any gems, so I decided just to use
<%= file_field 'upload', 'datafile' %></p>
without any form and etc. Just file_field and in controller I tried to catch it with
name = params[:upload][:datafile].original_filename
it shows me an error:
undefined method `original_filename' for "me.jpg":String
my params:
"upload"=>{"datafile"=>"me.jpg"}
It seems that I cannot use only file_field alone without any form, can I? Or I should alway include it into a form? If yes, is it possible to do it without using a form?
Please verify you have added multipart: true option in your form_tag or not.
Syntax:-
<%= form_tag '/upload', multipart: true do %>
<label for="file">File to Upload</label> <%= file_field_tag "file" %>
<%= submit_tag %>
<% end %>
if you are not using form you should use FormTagHelper file_field_tag
this might help you FormTagHelper/file_field_tag
In my form, a user can upload images as part of the form but if that form fails validation, all of those images are lost.
Is there a way to repopulate those fields with the images they've submitted?
Yes, there's a way. For example, you can use CarrierWave. It has built in functionality to solve this issue. Code snippet right from README:
<%= form_for #user, :html => {:multipart => true} do |f| %>
<p>
<label>My Avatar</label>
<%= f.file_field :avatar %>
<%= f.hidden_field :avatar_cache %>
</p>
As you can see there's a hidden field. Basically, CarrierWave saves a copy avatar between requests inside of avatar_cache field. On the form re-rendering it pulls image from the cache (if there's any). If you don't want to use CarrierWave, you could learn how to implement similar solution from it's sources.
This has had me stumped all day.
My app provides for the upload of documents, once uploaded it runs create.js.erb and adds the new record to the page.
My HTML looks like this,
<div id="doc_upload">
<%= form_for Document.new, remote: true do |f| %>
<%= f.file_field :file, multiple: true, name: "document[file]" %>
<%= f.hidden_field :plot_id %>
<%= f.submit 'upload' %>
<% end %>
</div>
I have a create.js.erb file in the documents directory. I am presently using JQuery file upload and the drag and drop file upload causes no issues. However when I use this form to manually select a file and upload I get:
a 406 HTTP error
the page redirects to /documents
when i go back, the file has been successfully uploaded and saved.
The headers are as follows.
Request URL:http://localhost:3000/documents
Request Method:POST
Status Code:406 Not Acceptable
Request Headersview source
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8}
my controller is:
def create
#document = Document.create(params[:document])
respond_to do |format|
format.js
end
end
As I said this really has me scratching my head, as the Ajax request doesnt seem to be firing. Does this mean that it may be something to do with the unobtrusive JS no picking up the remote true data type. That is the only reason that I can think of the redirection.
If so how I confirm and fix this?
Any help would be great.
Ross
You have to add :multipart => true if you have file upload in your form.
but you cannot post a multipart form via AJAX
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