submit-design-files.jade

.mobile-redirect
  .mobile-redirect__title File upload is not available for mobile

  .mobile-redirect__body
    p Our team is working hard on new features, and file upload currently only works on the web. Please open this page on your desktop if you want to create a submission.

    a(ng-href="https://help.{{DOMAIN}}/hc/en-us/articles/219122667-Formatting-Your-Submission-for-Design-Challenges") Learn more about formatting your submission file

    a.tc-btn.tc-btn-s(ng-href="https://www.{{DOMAIN}}/challenge-details/{{submissions.challengeId}}/?type={{submissions.track}}") Back to Challenge Details

.panel-body
  p.tc-error-messages.submissions-access-error(ng-if="submissions.error", ng-bind="submissions.errorMessage")
  
  form.form-blocks(ng-if="!submissions.error", name="submissionForm", role="form", ng-submit="submissionForm.$valid && vm.uploadSubmission()", novalidate)
    .form-block.flex
      .form-block__instructions
        .form-block__title Files

        .form-block__text
          p Please follow the instructions on the Challenge Details page regarding what your submission, source, and preview files should contain.

          p Do not name any of your files "declaration.txt," as this is added by our system.

          p Please be sure to double-check that you have submitted the correct files and that your JPG files (if applicable) are in RGB color mode.

          a(ng-href="https://help.{{DOMAIN}}/hc/en-us/articles/219122667-Formatting-Your-Submission-for-Design-Challenges") Learn more about formatting your submission file.

      .form-block__fields
        .fieldset.files
          .upload
            .file-picker
              tc-fp-file-input(
                label-text="Submission",
                field-id="SUBMISSION_ZIP",
                file-type="zip",
                button-text="Add File",
                services="COMPUTER,GOOGLE_DRIVE,BOX,DROPBOX",
                show-file-type="true",
                placeholder="Attach all visible files as a single .zip file",
                mandatory="true",
                ng-model="vm.submissionForm.submissionZip",
                set-file-reference="vm.setFileReference(file, fieldId)"
              )
              
              .tc-error-messages(
                ng-show="submissionForm['SUBMISSION_ZIP'].$touched && submissionForm['SUBMISSION_ZIP'].$invalid",
                ng-messages="submissionForm['SUBMISSION_ZIP'].$error"
              )
                p(ng-message="filesize") File size may not exceed 500MB.

                p(ng-message="required") This is not the correct file format. Please select a .zip file.

            .file-picker
              tc-fp-file-input.tc-file-field(
                label-text="Source",
                field-id="SOURCE_ZIP",
                file-type="zip",
                button-text="Add File",
                services="COMPUTER,GOOGLE_DRIVE,BOX,DROPBOX",
                show-file-type="true",
                placeholder="Attach all visible files as a single .zip file",
                mandatory="true",
                set-file-reference="vm.setFileReference(file, fieldId)",
                ng-model="vm.submissionForm.sourceZip"
              )
              
              .tc-error-messages(
                ng-show="submissionForm['SOURCE_ZIP'].$touched && submissionForm['SOURCE_ZIP'].$invalid",
                ng-messages="submissionForm['SOURCE_ZIP'].$error"
              )
                p(ng-message="filesize") File size may not exceed 500MB.

                p(ng-message="required") This is not the correct file format. Please select a .zip file.
            .file-picker
              tc-fp-file-input.tc-file-field(
                label-text="Preview Image",
                field-id="DESIGN_COVER",
                file-type=".jpg,.jpeg,.png",
                button-text="Add File",
                services="COMPUTER,GOOGLE_DRIVE,BOX,DROPBOX",
                placeholder="Image file as .jpg or .png",
                mandatory="true",
                set-file-reference="vm.setFileReference(file, fieldId)",
                ng-model="vm.submissionForm.designCover"
              )

              .tc-error-messages(
                ng-show="submissionForm['DESIGN_COVER'].$touched && submissionForm['DESIGN_COVER'].$invalid",
                ng-messages="submissionForm['DESIGN_COVER'].$error"
              )
                p(ng-message="filesize") File size may not exceed 500MB.

                p(ng-message="required") This is not the correct file format. Please select a .jpg or .png file.

          tc-input.fieldset__input.submitterRank(
            label-text="Rank #",
            input-name="Submission_Rank",
            input-value="vm.submissionForm.submitterRank",
            input-pattern="vm.rankRegEx",
            update-value-on-blur="vm.setRankTo1(inputValue)"
          )

          .tc-error-messages(ng-show="submissionForm.Submission_Rank.$dirty && submissionForm.Submission_Rank.$invalid")
            p(ng-show="submissionForm.Submission_Rank.$error.pattern") Please enter a positive integer.

    .form-block.flex
      .form-block__instructions
        .form-block__title Notes

        .form-block__text
          p Type a short note about your design here. Explain revisions or other design elements that may not be clear.

      .form-block__fields
        .fieldset
          tc-textarea.tc-textarea(
            label-text="Comments",
            placeholder="My design tries to solve the problem with a particular idea in mind. The use of color is based on the provided brand guideline.",
            character-count="true",
            character-count-max="1000",
            value="vm.comments"
          )

    .form-block.flex
      .form-block__instructions
        .form-block__title Did you use custom fonts?

        .form-block__text
          p Check to see if your font is on the Studio Standard Fonts list. If it is, leave the URL field blank.

          p Read the #[a(ng-href="https://help.{{DOMAIN}}/hc/en-us/articles/217959447-Font-Policy-for-Design-Challenges") Studio Fonts Policy].

          p If your font is not on the list, you must provide the URL to the font page (not file) from one of the approved font websites in the dropdown box.

      .form-block__fields
        .fieldsets
          tc-form-fonts(form-fonts="vm.formFonts")

    .form-block.flex
      .form-block__instructions
        .form-block__title Did you use stock art?

        .form-block__text
          p If you used any stock photos in your design mocks, please provide the location and details so that the client can obtain them. Follow the guidelines at our #[a(ng-href="https://help.{{DOMAIN}}/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions") Studio Stock Art Policy].

      .form-block__fields
        .fieldsets
          tc-form-stockart(form-stockarts="vm.formStockarts")

    .panel-footer
      p Submitting your files means you hereby agree to the #[a(ng-href="https://www.{{DOMAIN}}/community/how-it-works/terms/", target="_blank") Topcoder terms of use] and to the extent your uploaded file wins a Topcoder Competition, you hereby assign, grant, and transfer to Topcoder all rights in and title to the Winning Submission (as further described in the terms of use).

      p.tc-error-messages(ng-show="vm.submissionForm.hasAgreedToTerms && submissionForm.$invalid") There are outstanding problems with this page. You must fix them before you can upload your submission.

      .checkbox.flex.center
        input(type="checkbox", ng-model="vm.submissionForm.hasAgreedToTerms", id="agree-to-terms", required)

        label(for="agree-to-terms") I understand and agree
      
      button.tc-btn.tc-btn-secondary(type="submit", ng-disabled="submissionForm.$invalid") Submit

modal.transition(show="vm.showProgress", background-click-close="false", style="background-color:white;")
  .upload-progress(ng-class="{'upload-progress--error': vm.errorInUpload}")
    .upload-progress__title
      p {{ vm.progressTitle }}

    img.upload-progress__image(src=require("../../../assets/images/skills/id-180.svg"), ng-hide="vm.errorInUpload")
    img.upload-progress__image--error(src=require("../../../assets/images/robot-embarresed.svg"), ng-show="vm.errorInUpload")

    p.upload-progress__message(ng-hide="vm.errorInUpload") {{ vm.uploadProgressMessage}}

    p.upload-progress__message--error(ng-show="vm.errorInUpload") Oh, that’s embarrassing! One of the files couldn’t be uploaded, I’m so sorry.

    //- progress-bar.upload-progress__progress-bar(completed="vm.uploadProgress", message="of 3 files uploaded")

    .upload-progress__preparing(ng-show="vm.preparing && !vm.errorInUpload") #[span Preparing...]
    .upload-progress__finishing(ng-show="vm.finishing && !vm.errorInUpload")
      p Finishing...
      
    .upload-progress__finished(ng-show="vm.finished && !vm.errorInUpload")

      .upload-progess__links
        a.tc-btn.tc-btn-s(ng-href="https://www.{{DOMAIN}}/challenge-details/{{submissions.challengeId}}/?type={{submissions.track}}") Back to the challenge

        a.tc-btn.tc-btn-s.tc-btn-ghost(ng-click="vm.refreshPage()") Add another design

        a.tc-btn.tc-btn-s.tc-btn-ghost(ng-href="http://studio.{{DOMAIN}}/?module=ViewSubmission&ct={{submissions.challengeId}}") View my submissions


    .upload-progress__error(ng-show="vm.errorInUpload") #[span File upload failed]

    .upload-progress__error-action(ng-show="vm.errorInUpload")
      button.tc-btn.tc-btn-s.tc-btn-ghost(type="button", ng-click="vm.cancelRetry()") Cancel

      button.tc-btn.tc-btn-s.tc-btn-secondary(type="button", ng-click="submissionForm.$valid && vm.uploadSubmission()") Try Again