Using the ng file upload directive I'm using ngf-accept to specify a list of allowed file types. This has disallowed many file types and they appear grey in the upload dialog but I'm still able to upload any files with a .js or a .sh extension.
I've added the directive to the following link, with the list of allowed files.
<a ng-model="file" data-nodrag ngf-select="openUploadModal($file, this)" ng-show="this.$nodeScope.$modelValue.type === 'folder'" ngf-accept="'image/*,video/*,audio/*,.pdf,.txt,.doc,.docx,.xls,.xlsx'">
The problem comes from the .txt allowed value. If I remove the '.txt' extension the .js and .sh files are also disabled. Apparently this is due to a bug affecting Mac users only, but is there any way around this?
Rather than ngf-accept, try ngf-pattern and then you can use '!' to explicitly disable certain file types:
<a ng-model="file" data-nodrag ngf-select="openUploadModal($file, this)" ng-show="this.$nodeScope.$modelValue.type === \'folder\'" ngf-pattern="'image/*,video/*,audio/*,.pdf,.txt,.doc,.docx,.xls,.xlsx,!.js,!.sh'">
Related
i want to restrict user from selecting files from select dialog other than .xml extensions.
i have code like below,
<input type='file' accept='.xml' onChange={handleselectedfile}/>
Now with this user can still change from .xml to All files and select the file.
How can i make sure or restrict user from selecting files other than .xml extension types.
could someone help me with this. thanks.
You can try to add a validation onChange
something like this for Javascript
var fileName = document.getElementById('file').value.toLowerCase();
if(!fileName.endsWith('.xml'){
alert('You can upload xml files only.');
return false;
}
With Hugo, I am writing some HTML5 as Goldmark markdown doesn't support CSS classes or IDs.
My code is in post1.md :
<h2 data-toggle="collapse" data-target="#collapse-definition" aria-expanded="false" aria-controls="collapse-definition">Définition</h2> is not compiled and is not compiled to HTML.
Even the simplest div markup is omitted.
Thanks for your help.
From version 0.6, Hugo uses Goldmark for markdown.
For security reasons, Goldmark wipes HTML code.
However, if you use HTML frequently in your site, you can add to your config.toml
[markup.goldmark.renderer]
unsafe = true # Allow HTML in md files
For a less frequent usage of HTML, you can add safeHTML parameter to your HTML string (Hugo doc for safeHTML).
I want to upload extension less file with the below snippet.
<button id="profileImage" ngf-select ng-model="imageFile" ngf-pattern="'image/*'" ngf-accept="'image/*'" ngf-change="clearImageErrorMsgs()">Change Photo</button>
After i clicked on this "Change Photo" and select an extension less photo am getting "$scope.imageFile" is null. How can i resolve it in AngularJS v1.2.16 ?
You can upload an extension-less file by setting ngf-pattern to a wildcard (asterisk *)
<button id="profileImage" ngf-select ng-model="imageFile"
ngf-pattern="'*'" ngf-accept="'image/*'"
ngf-change="clearImageErrorMsgs()">Change Photo</button>
The pattern you were giving was failing a regexp text because it expected a dot (.).
Here's a plnkr that demonstrates the use case, however of course the Submit fails with a 400 since I don't have anywhere to upload a file ;)
Edit
Given equivalent files "anon.jpg" and "anon" selecting "anon.jpg" yields scope.file as
$ngfName: "anon.jpg"
size:9612
type:"image/jpeg"
__proto__: Blob
Compare with the extension-less "anon" file:
lastModified:1453925356897
lastModifiedDate:Wed Jan 27 2016 15:09:16 GMT-0500 (Eastern Standard Time)
name:"anon"
size:31002
type:""
webkitRelativePath:""
__proto__: File
Please note the difference in the __proto__ properties. Clearly ng-file-upload is treating extension-less (i.e. type-less) files differently.
All you need to do in your HTML to display the file name selected is something like this where scope.file is the ng-model:
<span>{{file.$ngfName || file.name}}</span>
I updated the plunkr to demonstrate this, have a look at the code.
Poking around in the debugger is a time saver.
If you're not satisfied, you need to file an issue at the github project.
Have you tried to omit the ngf-accept attribute?
been uploading text files using this button, the check on the file type isn't working for me, the file is considered valid.
<button ng-hide="uploading" class="btn centered" type="file"
ngf-select="uploadFiles($file, $invalidFiles)" accept="'image/*'"
ngf-max-size="4MB" ngf-accept="'image/*'">
{{(boardingData.profile_pic_url) ? "Change Photo" : "Upload a Photo"}}
</button>
We use ng-file-upload fairly heavily in our app, but we do not use the ngf-accept directive. However, you don't need to use this to be able to filter the file type being passed in. Assuming you had the following <div> for dragging:
<div ngf-drop="" ng-model="files" class="some_class_here" ngf-allow-dir="false">
Then there would be a scoped variable in your controller called $scope.files. You can simply check the type attribute of $scope.files to see what the file type is. If you wanted to check for files beginning with image/, then you could use this:
if ($scope.files.startsWith("image/")) {
console.log("You dragged an image file");
// or whatever your logic is
}
You can handle the file type appropriately from your controller with this information. Note that not all files show up as having a type, which is something to also keep in mind.
I know this question is old, but I still use this tool myself and was trying to figure out why I couldn't leave out accept if I had ngf-accept specified without errors. Turns out ngf-accept requires ticks and accept doesn't.
Only use the ' ticks in the ngf attributes e.g. ngf-accept="'image/*'" or ngf-pattern, e.g. ngf-pattern="'image/*'" or ngf-pattern="'.jpg,.png'".
In accept, you should use accept="image/*".
I'm trying to use react.js in Hugo. I know Go template variables are accessible in HTML file.
My question is how to access them in javascript. or is there a workaround?
thanks in advance.
UPDATE：
currently my workaround is to use meta tags in HTML and load Go template variables like this:
<meta name="title" content={{.Title}} />
and then in javascript,
function getMetaTitle() {
var metas = document.getElementsByTagName('meta');
for (i=0; i<metas.length; i++) {
if (metas[i].getAttribute("name") == "title") {
return metas[i].getAttribute("content");
}
}
return "failed to access...";
}
var metaTitle = getMetaTitle();
but this way is inconvenient when the number of meta tags growing, is there a more concise way to do this?
I doubt Hugo and React is a good pair but that's off topic and I might be wrong about that. You are asking, how to get Hugo variables into website's JavaScript. My answer:
Hugo is static website engine, so it only converts templates and markup documents (with your content) into HTML files. Now, when you upload your files onto your server, your JS cannot see anything Hugo — only your files.
The question becomes, how to transfer Hugo variables into some files of your website.
As you suggested, it's best to write variables into your HTML (or JSON) using Hugo, then read them by JS. If it's small amount, use attributes or tags. If there's a lot and it doesn't differ per-page, use a separate JSON file.
For example, personally I have a multilingual site which a) requires different language titles to appear dynamically via JS; b) uses JS which queries different Lunr.js search indexes in JSON format.
For both I use data-<name> attributes:
<section class="section-search" data-index="{{ .Site.BaseURL }}searchIndex.json" id="section-search">
<input type="search" id="search-input" placeholder="{{ ( index $.Site.Data.translations $.Site.Params.locale ).dataloading }}" data-loaded="{{ ( index $.Site.Data.translations $.Site.Params.locale ).dataloaded }}">
<!-- search button goes here -->
</section>
For example, on English templates (rendered into /public/), data-loaded attribute would be in English, but for Lithuanian templates (rendered into /public/lt/), data-loaded attribute would be in Lithuanian.
I wouldn't worry about "growing meta tags", but you could maybe write variables into a JSON file and then read it in JS if you are concerned about HTML bloat?
I'm building custom JSON first as HTML, then minifying/renaming it into JSON when building indexes for Hugo Lunr search as per this recipe. Instead of "baking in" the content with range as in mentioned recipe, you could simply list all the variables.
By the way, I'm using npm scripts as a build runner (instead of Grunt/Gulp) so I use json-minify:
"index:prepare": "json-minify public/json/index.html > public/site-index.json",
You could "bake" JSON files with any content (including Hugo template variables) via Hugo this way. Hope it helps.
You can specify a custom output format for Javascript within your config.toml so that Hugo then treats those particular formats and file extensions like it's content files where it replaces the template variables with adequate values.
So, an entry such as below in your config.toml will treat javascript files as one of the media type it needs to consider for its custom output formats:
[mediaTypes]
[mediaTypes."application/javascript"]
suffix = "js"
You can read more about it here
You can, of course, inline your JS in your layout files, but that is probably not what you want.
There have been some discussions about improvements in this area on the Hugo discussion site, but nothing concrete yet.