Issues uploading in custom wizard plugin

Dev
1

Morning y’all, I’m at the end of my third night in the last 5 trying to figure out how to allow for PDF uploads in the Custom Wizard plugin. I asked for help over in the plugins category days ago, but never heard from anyone so trying over here to hopefully discover a solution.

In reading all of the code and everything I could find on Stack Overflow my best guess is the utilities-lite.js.es6 where you find…

canUpload = files && canUpload && !types.includes("text/plain");
const canUploadImage = canUpload && files.filter(f => f.type.match('^image/'))[0];
const canPasteHtml = Discourse.SiteSettings.enable_rich_text_paste && types.includes("text/html") && !canUploadImage;

return { clipboard, types, canUpload, canPasteHtml };
}

All signs have pointed here because of the f.type.match argument. I’ve tried dozens of solutions over the past week and this play on the regex surrounding ‘\image/’ is the latest. Sadly, after yet another rebuild I’m sitting here wishing I’d gone to bed 6 hours ago… again.

  canUpload = files && canUpload && !types.includes("text/plain");
  const canUploadImage = canUpload && files.filter(f => f.type.match('/^image\/(gif|jpe?g|png)$|^application\/(pdf|msword)$|^text\/plain$/i;'))[0];
  const canPasteHtml = Discourse.SiteSettings.enable_rich_text_paste && types.includes("text/html") && !canUploadImage;

  return { clipboard, types, canUpload, canPasteHtml };
}

Have any of you solved this problem before? Am I on the right track? Am I entirely off base?

Either way, I couldn’t thank you enough if you would be willing to share the right answer. Even if you can just share a clue. Anything, please. I desperately need to get back to taking care of customers and doing dev work, but I’ve been so stuck for so many days I’m struggling to keep up.

Thanks for your time,
James

2

You’ll want to do 2 things here, which are independent of making changes to the custom-wizard plugin.

1 Create a theme component which overrides the wizard-field-image.hbs template in core (it’s not in the custom-wizard plugin) [Note that we’re doing this to change the ‘accept’ field in the input, unfortunately there’s not a less obstrusive way to do this at this time that I’m aware of]

<script type="text/x-handlebars" data-template-name="wizard/templates/components/wizard-field-image">
  {{#if field.value}}
    {{component previewComponent field=field fieldClass=fieldClass wizard=wizard}}
  {{/if}}

  <label class="wizard-btn wizard-btn-upload {{if uploading 'disabled'}}">
    {{#if uploading}}
      {{i18n "wizard.uploading"}}
    {{else}}
      {{i18n "wizard.upload"}}
      {{d-icon "picture-o"}}
    {{/if}}

    <!-- Note the addition of application/pdf here-->
    <input disabled={{uploading}} type="file" accept="image/*,application/pdf" style="visibility: hidden; position: absolute;" />
  </label>
</script

2 Add ‘pdf’ to the list of authorized extensions in your settings

1066×382 39 KB

Be aware that letting people you don’t trust upload pdfs is a dangerous thing.

You might need some additional finagling to display an acceptable preview / placeholder image, since the uploader thing will try to display an image preview and that won’t work

that’s out of scope of my free tier, though :blush:

8 Likes
3

Thank you so much for this @gdpelican. I was desperate and you’ve given me quite a clue here. Also totally understand that even open source has its limits. As a capitalist, I fully support the need for you and every developer on meta to make money. It’s just that you either have more time than money or more money than time and I currently fall in the former category. Plus, though the learning curve here has been impossibly steep, I’m having a blast figuring out how to develop on Discourse. After nearly 9 years in the WordPress world and the past 5 exclusively focused on the Genesis Framework, I hit a lengthy plateau that left me feeling extraordinarily bored. Discourse has proved to be the perfect challenge to spur the next phase in my professional growth.

Bio aside, this is exciting. In trying to solve the problem throughout the week I’ve been forking @angus’ code and modifying from there. Hadn’t considered the option to create a theme component that could do the job.

The last even more obtrusive solution I tried before that last regex modification produced the same upload screen in your final screenshot. Unfortunately, PDFs were still greyed out/unavailable for upload after I clicked the button, but it’s heartening to see I might have been on the right track. In case it helps you at all, that solution was to replace the code in assets/javascripts/wizard/lib/utilities-lite.js.es6 in the Custom Wizard Plugin with the code from app/assets/javascripts/discourse/lib/utilities.js.es6 in Discourse.

I’ll give your suggestion a go and hope for the best.

Again, thank you!

4

I added utilities-lite for the purposes of the editor component. You won’t need it for the problem you’re trying to solve.

@gdpelican’s solution is a good start. I suggest you build on that by creating a new wizard component (an ember component, not a theme component) for uploading files.

  1. Copy wizard-field-image.js.es6 and wizard-field-image.hbs to create wizard-field-upload.js.es6 and wizard-field-upload.hbs in the plugins’ wizard/components and wizard/templates/components.

  2. Remove the parts of the template and component relevant to preview functionality (for the initial version at least).

  3. Make the changes @gdpelican suggested to allow for pdf uploads.

  4. Add upload to the list of CustomWizard::Field.types in lib/types.

  5. Submit a PR and I’ll review it.

3 Likes
5

Done. Also put CustomWizard::Field.types in alphabetical order to make it bit more intuitive.

Thank you, @angus!