Reputation: 10897
REVISION
As I have come to truly understand my question, I have modified this question in search for a better answer. Although this link was helpful for MIME types of the 'accept' attribute, my question stems deeper.
I am writing an application where I allow users to upload files, and the files must be of a specific MIME type.
The directive is used in many places, and the MIME type needs to change across these places. I need to dynamically construct the template
of my directive
in order to accommodate for each implementation of the directive.
Assume that I write HTML as so:
<cmc-file-upload mimeType="text/html" ng-if="reportFileUploadSettings.showFileUploader" upload-complete-callback="importReportFile(content)" ></cmc-file-upload>
I would then wish to apply that MIME type to the template
of the directive
:
components.directive('cmcFileUpload', function ()
{
return {
restrict: 'E',
scope: {
uploadCompleteCallback: "&",
mimeType: "&",
},
replace: false,
template: '<input type="file" id="files" name="files[]" accept="' + scope.mimeType + '" multiple /><output id="list"></output>',
Unfortunately, this code does not seem to work this way.
How can I make this work?
REFERENCE ERROR: scope
is undefined...
Upvotes: 0
Views: 277
Reputation: 64725
Change mimeType: "&",
to mimeType: "@",
because you do
mimeType="text/html"
Since "text/html" is not a variable, but the raw string, you need to use @
Then, change
accept="' + scope.mimeType + '"
to
accept="{{mimeType}}"
because scope
the variable is not defined (yet) - once Angular parses the template, it will replace mimeType
with the variable.
Edit: And the final issue is that mimeType="text/html"
needs to be mime-type="text/html"
because in the directive when you do
mimeType: "@",
it thinks because you used camelCase it should look for mime-type
Upvotes: 1
Reputation: 74949
To restrict to html use this:
template: '<input type="file" accept="text/html" id="files" name="files[]" multiple /><output id="list"></output>',
a complete answer on how to use accept
is here:
File input 'accept' attribute - is it useful?
Upvotes: 1