Custom styling and supressing image preview

[kbaum]

Because I am using cloudinary for raw attachments, i do not need to show the image preview. I also need to completely style the look and feel of the file upload and the remove link:

http://grab.by/pkNO

Is it possible to suppress the image preview with the attachinary file uploader javascript? I imagine i could get all of this done by hiding the elements with css.

The other question i have is that i am not sure that it even makes sense for me to use the attachinary js widget. I need the ability to:

1) upload multiple files 2) upload directly from the browser 3) drag and drop files into the uploader 4) see some type of progress bar when attaching files

Does it make sense to use attachinary or something else like jquery.cloudinary?

thx!

[kbaum]

Ok. I am going to answer my own questions and close this one out. Attachinary is definitely what i should be using and it is completely customizable. Looking at the code, there is an html template you can pass to attachinary which is rendered each time one adds/removes a file:

  template = """
    <label class="attachments">
      Attachments:
    </label>
    <% for(var i=0; i<files.length; i++){ %>
      <div class="file">
        <span class="filename">
          <span>
            Proposal_Aug08.PDF
          </span>
        </span>
        <a class="remove_file" data-remove="<%= files[i].public_id %>" href="#">
          <!-- had to include the data remove on the inner span because click event was not bubbling up -->
          <span data-remove="<%= files[i].public_id %>">
            ×
          </span>
        </a>
      </div>

    <% } %>
    <a class="add_file" href="#">
      +
    </a>
    """

  $fileInput.attachinary
      template: template

[90caiosantos]

hey Kbaum, there is no attachinary.js in my lib/assets/javascript folder, so i add this file with our modification to lib/assets/javascripts/attachinary.js.coffee, but nothing change... i'm trying to set my upload field looks like Basic Plus UI of jQuery-File-Upload

[kbaum]

Not sure what you mean.

On Wed, Apr 29, 2015 at 3:37 PM, 90caiosantos notifications@github.com wrote:

hey Kbaum, this directory Attachinary was not created in my app, where do i change that?

Reply to this email directly or view it on GitHub: https://github.com/assembler/attachinary/issues/69#issuecomment-97556117

[90caiosantos]

Sorry man, i edited my last comment... can you help me with that? @kbaum

[kbaum]

@90caiosantos - attachinary.js comes from the gem and rails should find it as it will look in all vendor directories.

[90caiosantos]

thats how attachinary looks like in my app using:

<%= f.attachinary_file_field :photos %>

thats how it supposeto look?

[kbaum]

Don't remember honestly.  Are there any stylesheets that come with attachinary? Are they getting applied?

On Sat, May 2, 2015 at 6:53 PM, 90caiosantos notifications@github.com wrote:

thats how attachinary looks like in my app using: <%= f.attachinary_file_field :photos %> thats how it supposeto look?

Reply to this email directly or view it on GitHub: https://github.com/assembler/attachinary/issues/69#issuecomment-98413472

[mikemerritt]

@90caiosantos Did you ever figure out how to get the proper aspect ratio for the image?

[orlando]

@mikemerritt what you can do is set the preview to crop, as @kbaum said you can change the template by changing the jquery attachinary plugin config

This is what I have in my app:

$.attachinary.config.template = '\
  <ul>\
    <% for(var i=0; i<files.length; i++){ %>\
      <li>\
        <% if(files[i].resource_type == "raw") { %>\
          <div class="raw-file"></div>\
        <% } else { %>\
          <img\
            src="<%= $.cloudinary.url(files[i].public_id, { "version": files[i].version, "format": "jpg", "crop": "fill", "width": 250, "height": 250 }) %>"\
            alt="" width="100" height="100" />\
        <% } %>\
        <a href="#" data-remove="<%= files[i].public_id %>"><i class="md md-clear md-2x"></i></a>\
      </li>\
    <% } %>\
  </ul>\
';

Notice the configuration and how I change the size, also I put a bigger image in a smaller container to get the "2x" rendering feel.

[orlando]

@90caiosantos attachinary doesn't include styles for the image preview, you have to do this yourself.

This is how we style it in the app I'm working on.

[cosydney]

hi @orlando , they way you styled it is pretty cool, would you mind sharing the stylesheet ?

[orlando]

@cosydney Sure, here is it https://gist.github.com/orlando/2416c754572b3d51a31ee008f6cb4a14. There are some variables like $space, but you should be able to customize it to your needs. Also, I'm using bootstrap, so some styles are related to it

[cosydney]

Wow thanks for the quick response ! As I was waiting I did something where I played with the css and X :

[orlando]

@cosydney Great, glad it worked for you