Upload Progress with Refile Javascript Discussion
Hello Chris, is there a good gem to build a progress bar? (for example, show % complete based on how many episodes you've watched)
As long as you can calculate the percentage, all you need is some CSS. Bootstrap ships with a progress bar and all you need to do is set the width to the percentage complete. http://getbootstrap.com/com...
You can find many others if you're not using Bootstrap and you just google "css progress bar"
Hi Chris,
I tried to implement the immediate showing of the image from the cache, but it's not working. When I check the rendered code in my browser, I don't see the member_cache_id for the hidden field (in your example it's film_cache_id. The hidden field looks like this:
<input value="{}" type="hidden" name="member[image]">
I double checked the form field, it's exactly the same as the upload field in your example:
<%= f.attachment_field :image, direct: true %>
I also set the :image_cache_id in the allowed params of the member controller
So I'm not sure why the member_image_id is not set in the hidden field.
my code is at:
https://github.com/acandael...
greetings,
Anthony
Hey Chris, do you know of a way to directly post to refile from a mobile app?
If you pass the same parameters to the URL as the HTML form that gets generated it will work. Of course, you will need to make sure the mobile user has a way to authenticate as a user for that request by setting a cookie or using an API token. Mobile apps talking to a Rails app are basically the same as your browser, you just have to worry about things like cookies/API tokens.
For anyone using the latest version of refile (0.5.3), you will need to access cache_id differently because this is what gets returned.
<input value="{" id":"8c27104d22efe3de9b463bc8757e39ed2b632337e06628c2d8adf22c7b45","filename":"img_0741.jpg","content_type":"image="" jpeg","size":1064417}"="" type="hidden" name="user[image]">
image_info = $("input[name='user[image]']").val()
image_id = JSON.parse(image_info).id
Hi Chris, is there a way to make the image_uploads.js.coffee script more generic, so that it's not only fetching film_image_id images but also for instance new_article_image_id images ?
greetings,
Anthony
found a solution with:
image_value = JSON.parse $("[id$=_image_cache_id]").val()
found a solution to print the filename of an uploaded file on this page:
https://github.com/elabs/re...
just generate a migration to add a filename field to the table, for example:
add_column :news_articles, :document_filename, :string
now you can read out filenames like this:
<%= link_to @news_article.document_filename, attachment_url(@news_article, :document) %>
Hi Chris :D, can you upload a tutorial on how to store the images on AWS using Refile (n00b here)
Thanks :)
I can but it might take a while. In the meantime, you can check out their backend section. It pretty much walks you through it all. Just need to know your Key and bucket name from AWS. Just create your S3 bucket first and fill in the rest.
Hello Chris,
I added your coffee script for displaying upload progess, but it returns an NaN error
$(document).on "upload:progress", "form", (e) ->
detail = e.originalEvent.detail
percentComplete = Math.round(detail.loaded / detail.total * 100)
$("#image").text("#{percentComplete}% uploaded")
Any ideas?
Thanks!
Change the percent complete line to:
percentComplete = Math.round(detail.progress.loaded / detail.progress.total * 100)
Notice how "progress" was added after the detail in between the loaded and total.
Seems like the solution to show a preview image will not work any longer the latest version of refile. Even with Olivier 's suggestion to get the image id using the below code will not work as you will get a 403 (forbidden error).
image_info = $("input[name='user[image]']").val()
image_id = JSON.parse(image_info).id
Urls for version 0.6+ are signed with a token. Hence the new url will be:
imageUrl = '/attachments/' + token + '/cache/fill/360/360/' + imageId + '/image'
Will update this post if I find a way to do this. Or if anyone else has a solution, please do share.
Yeah, with the new token system, this might be a piece of data you can get somewhere. I'd ask on the Refile Github issues and see what you find out. If you find a solution, let me know!
Chris, if I upload a file with <%= form.attachment_field :message_attachment, direct: true, presigned: true, class: "choosefile" %> it gets uploaded to my s3 bucket (so everything seems to be working fine), yet when I display the filenames with url pathlike <%= link_to "#{message.message_attachment_filename}", attachment_url(message, :message_attachment),:target => "_blank" %>, it's served from my app (href=/attachments/....) instead of S3. Can you guess where things go wrong? Based on refile description files shouldn't hit my app at all with these settings.
That's actually how it's supposed to work actually because it provides you the ability to generate different image sizes on the fly. The downside to this is it requires you to setup a CDN so that it doesn't have to generate the image every single request. You can check out the readme for some more information on that.