danbooru/app/views/uploads/new.html.erb

<div id="c-uploads">
  <div id="a-new">
    <h1>Upload</h1>

    <% if CurrentUser.can_upload? %>
      <div id="upload-guide-notice">
        <%= format_text(@upload_notice_wiki.try(&:body)) %>
      </div>

      <% unless CurrentUser.can_upload_free? %>
        <p>Upload limit: <strong><%= CurrentUser.user.presenter.upload_limit(self) %></strong>.</p>
      <% end %>

      <%= render "image" %>
      <%= render "related_posts", source: @source %>
      <%= render "sources/info" %>

      <div id="client-errors" class="error-messages ui-state-error ui-corner-all" style="display:none"></div>

      <%= form_for(@upload, :html => {:multipart => true, :class => "simple_form", :id => "form"}) do |f| %>
        <%= f.hidden_field :md5_confirmation %>
        <%= f.hidden_field :referer_url, value: params[:ref] %>

        <% if CurrentUser.can_upload_free? %>
          <div class="input">
            <label for="upload_as_pending">
              <%= f.check_box :as_pending, :checked => params[:as_pending].present? %>
              Upload for approval
            </label>
          </div>
        <% end %>

        <div class="input fallback">
          <%= f.label :file %>
          <%= f.file_field :file, :size => 50 %>
        </div>

        <div class="input" id="filedropzone">
          <div class="placeholder"><span>Drag and drop a file here</span></div>
        </div>

        <div class="input">
          <%= f.label :source %>
          <%= f.text_field :source, :size => 50, :value => params[:url] %>
          <%= button_tag "Similar", :id => "similar-button", :type => "button", :class => "ui-button ui-widget ui-corner-all sub gradient" %>
          <%= button_tag "Artist", :id => "find-artist-button", :type => "button", :class => "ui-button ui-widget ui-corner-all sub gradient" %>
          <span class="hint">You can enter a URL to have <%= Danbooru.config.app_name %> automatically download and process it</span>
        </div>

        <div class="input">
          <%= f.label :rating %>

          <fieldset class="ratings">
            <%= f.radio_button :rating, :e, :checked => (params[:rating] == "e") %>
            <%= f.label :rating_e, "Explicit", :title => "Hardcore porn, visible genitals" %>

            <%= f.radio_button :rating, :q, :checked => (params[:rating] == "q") %>
            <%= f.label :rating_q, "Questionable", :title => "Nudity, anything erotic" %>

            <%= f.radio_button :rating, :s, :checked => (params[:rating] == "s") %>
            <%= f.label :rating_s, "Safe", :title => "Everything else" %>
          </fieldset>
        </div>

        <div class="input">
          <%= f.label :parent_id, "Parent ID" %>
          <%= f.text_field :parent_id, :value => params[:parent_id] %>
        </div>

        <div class="input">
          <strong>Commentary</strong>
          <a href="#" id="toggle-artist-commentary">show »</a>

          <div class="artist-commentary" style="display: none;">
            <div class="input">
              <%= f.label :artist_commentary_title, "Title" %>
              <%= f.text_field :artist_commentary_title, :value => params[:artist_commentary_title] %>
            </div>

            <div class="input">
              <%= f.label :artist_commentary_desc, "Description" %>
              <%= f.text_area :artist_commentary_desc, :size => "60x5", :value => params[:artist_commentary_desc] %>
            </div>

            <div class="input">
              <label for="upload_include_artist_commentary">
                <%= f.check_box :include_artist_commentary, :checked => params[:include_artist_commentary].present? %>
                Include Commentary
              </label>
            </div>
          </div>
        </div>

        <div class="input">
          <div>
            <%= f.label :tag_string, "Tags" %>
            <%= f.text_area :tag_string, :size => "60x5", :spellcheck => false, :"data-autocomplete" => "tag-edit", :"data-shortcut" => "e", :value => params[:tag_string] %>
            <span id="open-edit-dialog" class="ui-icon ui-icon-arrow-1-ne" title="detach" style="display: none;" data-shortcut="shift+e"/>
          </div>

          <%= button_tag "Related tags", :id => "related-tags-button", :type => "button", :class => "ui-button ui-widget ui-corner-all sub gradient" %>

          <% TagCategory.related_button_list.each do |category| %>
            <%= button_tag "#{TagCategory.related_button_mapping[category]}", :id => "related-#{category}-button", :type => "button", :class => "ui-button ui-widget ui-corner-all sub gradient" %>
          <% end %>
        </div>

        <div class="input">
          <%= submit_tag "Submit", :id => "submit-button", :class => "large ui-button ui-widget ui-corner-all gradient", data: {disable_with: false} %>
        </div>

        <div id="related-tags-container">
          <h1>Related Tags <a href="#" id="toggle-related-tags-link" style="display: none;">&laquo;</a></h1>
          <div id="related-tags" class="related-tags">
          </div>
        </div>
      <% end %>
    <% else %>
      <h2 style="margin-bottom: 1em;">You <%= CurrentUser.user.upload_limited_reason %></h2>
    <% end %>
  </div>
</div>

<% content_for(:page_title) do %>
  Upload - <%= Danbooru.config.app_name %>
<% end %>

<% content_for(:html_header) do %>
  <script async src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.js"></script>
  <script async src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
  <script>
    $(function() {
      var enabled = true;
      var maxFilesize = <%= Danbooru.config.max_file_size.to_json %> / (1024 * 1024);

      if (!window.FileReader) {
        enabled = false;
      }

      if (!enabled) {
        $("#filedropzone").remove();
        return;
      }

      $("#filedropzone").dropzone({ 
        paramName: "upload[file]", 
        url: "/uploads/preprocess", 
        createImageThumbnails: false,
        addRemoveLinks: false,
        maxFiles: 1,
        maxFilesize: maxFilesize,
        acceptedFiles: "image/jpeg,image/png,image/gif,video/mp4,video/webm,.swf",
        previewTemplate: '<div class="dz-preview dz-file-preview"><div class="dz-details"><div class="dz-filename"><span data-dz-name></span></div><div class="dz-size" data-dz-size></div></div><div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div><div class="dz-error-message"><span data-dz-errormessage></span></div></div>',
        init: function() {
          $(".fallback").hide();
          this.on("drop", function(event) {
            $("#filedropzone .placeholder").hide();
          });
          this.on("complete", function(file) {
            $("#filedropzone .dz-progress").hide();
          });
          this.on("addedfile", function(file) {
            var reader = new FileReader()
            reader.addEventListener("loadend", function() {
              $("#upload_md5_confirmation").val(CryptoJS.MD5(CryptoJS.enc.Latin1.parse(this.result)).toString());
            });
            reader.readAsBinaryString(file);
          });
          this.on("success", function(file) {
            $("#filedropzone").addClass("success");
          });
          this.on("error", function(file, msg) {
            $("#filedropzone").addClass("error");
          });
        }
      });
    });
  </script>
<% end %>

<%= render "uploads/secondary_links" %>