Hi,
I need help in adding cropper with image dropper.
Drag and drop files here or click
to browse your files.
Maximum File Size: 4GB.
</form>
<div class="error text-red">
<%= error_tag f, :listing_images %>
</div>
</div>
<div
class='listing-d-images'
data-url-delete='<%= HomepieWeb.Router.Helpers.listing_path(HomepieWeb.Endpoint, :listing_image_delete, @workflow_listing.id, "") %>'
data-url-delete-temp='<%= HomepieWeb.Router.Helpers.listing_workflow_path(HomepieWeb.Endpoint, :listing_image_delete, @workflow_listing.id, "") %>'
data-url-cover='<%= HomepieWeb.Router.Helpers.listing_path(HomepieWeb.Endpoint, :listing_image_put, @workflow_listing.id, "") %>'
data-signature-url='<%= HomepieWeb.Router.Helpers.upload_signature_path(HomepieWeb.Endpoint, :create_signature_post) %>'
data-save-url='<%= HomepieWeb.Router.Helpers.listing_path(HomepieWeb.Endpoint, :upload_image_post, @workflow_listing.id) %>'
data-csrf_token='<%= @ctoken %>'
>
<%= for image <- @workflow_listing.listing_images do %>
<% isImage = String.starts_with?(image.content_type, "image/") %>
<div class='image-wrap-0 <%= if image.cover, do: " cover", else: "" %>' data-id="<%= image.id %>">
<span class='text-green cover-show'>Cover Photo</span>
<div class='image-wrap <%= if Enum.member?(@images_flagged_for_delete, "#{image.id}"), do: "deleting" %>'>
<%= if isImage do %>
<div class='listing-image' style="background-image: <%= Homepie.Properties.ListingImage.css_urls(image) %>"></div>
<% else %>
<div class='listing-image'>
<video class="listing-image-video">
<source src="<%= Homepie.Properties.ListingImage.original_url(image) %>" />
</video>
</div>
<% end %>
<span class='cover cover-show'>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="#FFF"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
</span>
<%= if !isImage do %>
<span class='cover cover-play-video'>
<svg enable-background="new 0 0 32 32" width="40" height="40" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g> <path clip-rule="evenodd" d="M0,16c0,8.836,7.164,16,16,16c8.837,0,16-7.164,16-16 c0-8.837-7.163-16-16-16C7.164,0,0,7.163,0,16z M30.031,16c0,7.72-6.312,14-14.031,14C8.28,30,2,23.72,2,16C2,8.28,8.28,2,16,2 C23.72,2,30.031,8.28,30.031,16z" fill-rule="evenodd"/> <path clip-rule="evenodd" d="M13.08,8.626c-0.056,0.134-0.079,0.276-0.075,0.419v13.942 c-0.024,0.887,1.07,1.38,1.702,0.742l6.899-6.999c0.382-0.386,0.382-1.043,0-1.429L14.715,8.31 C14.221,7.793,13.346,7.966,13.08,8.626C13.025,8.76,13.228,8.259,13.08,8.626C13.025,8.76,13.228,8.259,13.08,8.626 C13.025,8.76,13.228,8.259,13.08,8.626z M19.488,16.016l-4.494,4.559v-9.118L19.488,16.016z" fill-rule="evenodd"/> </g> </svg>
</span>
<% end %>
<div class='image-actions'>
<span class='delete pull-right <%= @workflow_listing.status == "approved" && "delete-temp-listing-image" || "delete-listing-image" %>'>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<g fill="#FFF" fill-rule="nonzero">
<path d="M2 6v8c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V6H2zM12 3V1c0-.6-.4-1-1-1H5c-.6 0-1 .4-1 1v2H0v2h16V3h-4zm-2 0H6V2h4v1z"/>
</g>
</svg>
</span>
<%= if isImage do %>
<span class='cover cover-listing-image' title='Set as cover photo'>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="#FFF"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
</span>
<% else %>
<span class='cover cover-play-video'>
<svg enable-background="new 0 0 32 32" width="40" height="40" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g> <path clip-rule="evenodd" d="M0,16c0,8.836,7.164,16,16,16c8.837,0,16-7.164,16-16 c0-8.837-7.163-16-16-16C7.164,0,0,7.163,0,16z M30.031,16c0,7.72-6.312,14-14.031,14C8.28,30,2,23.72,2,16C2,8.28,8.28,2,16,2 C23.72,2,30.031,8.28,30.031,16z" fill-rule="evenodd"/> <path clip-rule="evenodd" d="M13.08,8.626c-0.056,0.134-0.079,0.276-0.075,0.419v13.942 c-0.024,0.887,1.07,1.38,1.702,0.742l6.899-6.999c0.382-0.386,0.382-1.043,0-1.429L14.715,8.31 C14.221,7.793,13.346,7.966,13.08,8.626C13.025,8.76,13.228,8.259,13.08,8.626C13.025,8.76,13.228,8.259,13.08,8.626 C13.025,8.76,13.228,8.259,13.08,8.626z M19.488,16.016l-4.494,4.559v-9.118L19.488,16.016z" fill-rule="evenodd"/> </g> </svg>
</span>
<% end %>
</div>
</div>
</div>
<% end %>
</div>
</div>
its urgent.Please help
