Edit: I solved the problem myself - see below
I have a form where I upload images using the add_picture_to_project_path route included in my projects_controller.rb. This method is exectuing the file upload in the model and then returning some Json to my controller. Once this is done I want to render the add_picture_to_project.js.erb file but I have the following issue. There is only the ruby code that is working, the javascript is not responding at all.
routes.rb
patch '/addLocalPicture', to: 'projects#add_picture_to_project', as: :add_picture_to_project
show.html.haml
= bootstrap_form_tag(url: add_picture_to_project_path,method: :patch, html: { :multipart => true }) do |f|
.form-group
%input{type:'file', multiple: true, name:"picture", id:"fileupload"}
= hidden_field_tag 'stock_id', "5da481f45d5f4443c644f89f"
= hidden_field_tag 'project_id', @project._id
= hidden_field_tag 'company_id', @company._id
= f.submit("Valider", class: 'simple-btn')
projects_controller.rb
def add_picture_to_project
picture_params = {
stock_id: params[:stock_id],
project_id: params[:project_id],
company_id: params[:company_id],
}
@picture = Picture.upload_picture(params[:picture], picture_params, bearer_token)
model: picture.rb
def self.upload_picture tempfile, picture_params, bearer_token
params = {
"photoUploadS3" => UploadIO.new(File.open(tempfile.path), MIME::Types.type_for(tempfile.path), File.basename(tempfile.path)),
"stock_id" => picture_params[:stock_id],
"project_id" => picture_params[:project_id],
"company_id" => picture_params[:company_id],
"filename" => File.basename(tempfile.path),
"size" => File.size(tempfile.path)
}
# Create the HTTP objects
uri = URI("#{ENV['API_HOST']}/pictures/addLocalPicture")
req = Net::HTTP::Post::Multipart.new uri.path, params
req.add_field("Authorization", "Bearer #{bearer_token}") #add to Headers
res = Net::HTTP.start(uri.hostname, uri.port) do |http|
res = http.request(req)
response = eval(encode_utf8(res.body))
return response.to_struct
end
end
This is rendering the add_picture_to_project.js.erb which is only executing the ruby content... Maybe it is because of the file names ?
add_picture_to_project.js.erb
console.log("hello");
<%= say "hello #{@picture}" %>
In my terminal I get
Rendering projects/add_picture_to_project.js.erb
______________________________________
/ "hello #<OpenStruct \
| stock_id=\"5da43c644f89f\ |
| ", |
| project_id=\"5da0c75300c |
| a\", |
| company_id=\"5caddb3d127 |
| 3\", |
| filename=\"RackMultipart20191105-536 |
| 84-1um4lsk.jpg\", size=412324, |
| unique_filename=\"ff3f2720-001a-11ea |
| -8828-01b6885e7183-RackMultipart2019 |
| 1105-53684-1um4lsk.jpg\", |
| created_at=\"2019-11-05T22:24:13.926 |
| Z\", |
| updated_at=\"2019-11-05T22:24:13.926 |
| Z\", status=1, |
| user_id=\"5d9f3817602ef027\" |
| , |
| projects=[\"5300ca |
\ \"]>" /
--------------------------------------
Rendered projects/add_picture_to_project.js.erb
What should I change to have my javascript executed?
Answer: My issue was in the picture.js file - I had my datatype set to Json when it should be 'script'. This fix my issue. I leave my question here so that people can have more information on how to setup net http multipart file upload with the jquery file uploader.
$('#fileupload').fileupload({
dataType: 'script',
done: function (e, data) {
console.log(data);
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
Answer: My issue was in the picture.js file - I had my datatype set to Json when it should be 'script'. This fix my issue. I leave my question here so that people can have more information on how to setup net http multipart file upload with the jquery file uploader.
$('#fileupload').fileupload({
dataType: 'script',
done: function (e, data) {
console.log(data);
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});