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" %>
          <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" id="tags-container">
          <div class="header">
            <%= f.label :tag_string, "Tags" %>

            <span class="options">
              <i id="face" class="fas"></i>
              <span class="count"></span>
              <a href="javascript:void(0)"><i id="open-edit-dialog" class="fas fa-arrows-alt" title="detach" data-shortcut="shift+e"></i></a>
            </span>
          </div>

          <div>
            <%= f.text_area :tag_string, :size => "60x5", :spellcheck => false, :"data-autocomplete" => "tag-edit", :"data-shortcut" => "e", :value => params[:tag_string] %>
          </div>
          <%= render "related_tags/buttons" %>
        </div>

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

        <%= render "related_tags/container" %>
      <% end %>
    <% else %>
      <h2 style="margin-bottom: 1em;">You <%= CurrentUser.user.upload_limited_reason %></h2>
    <% end %>
  </div>
</div>

<% content_for(:html_header) do %>
  <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;
      }

      Danbooru.Upload.dropzone = new Danbooru.Dropzone("#filedropzone", {
        paramName: "upload[file]", 
        url: "/uploads/preprocess", 
        createImageThumbnails: false,
        addRemoveLinks: false,
        maxFiles: 1,
        maxFilesize: maxFilesize,
        timeout: 0,
        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() {
              var buf = new Danbooru.SparkMD5.ArrayBuffer();
              buf.append(this.result);
              var hash = buf.end();
              $("#upload_md5_confirmation").val(hash);
            });
            reader.readAsArrayBuffer(file);
          });
          this.on("success", function(file) {
            $("#filedropzone").addClass("success");
          });
          this.on("error", function(file, msg) {
            $("#filedropzone").addClass("error");
          });
        }
      });
    });
  </script>
<% end %>

<%= render "uploads/secondary_links" %>