How to know uploaded file size in grails?
I want to show it on my screen, can you give one example how I can do that?
Here's I'm trying ${this.game.thumbnail.size()} but it doesn't work.
<div class="card-body">
<fieldset>
<div class='fieldcontain required'>
<leve><b>Thumbnail details</b></leve>
<g:if test="${this.game.thumbnail}">
<img src="<g:createLink action='thumbnail' id='${this.game.id}' />" id="thumbnailFile" height="50" width="50" /></br>
<div class='fieldcontain required'>
<leve><b>Download Here</b></leve>
<g:link class="button" action="download" params="['id': this.game.id, type: 'thumbnail']" ><g:message code="Download" /></g:link>
</div>
<div class='fieldcontain required'>
<leve><b>Thumbnail File Size:</b></leve>
<leve>${this.game.thumbnail.size()}</leve>
</div>
</g:if>
<g:else>No Thumbnail details available</g:else>
org.springframework.web.multipart.MultipartFile has a .size() method.
The guide at https://guides.grails.org/grails-upload-file/guide/index.html details how you can get a MultipartFile.
Related
I need to build a confirm button for the images being dropped in Dropzone, which, on press will store the image in a variable and then move on. What function do I call to get this image?
I currently only have this set up:
<div id=dropzone >
<form action="/file-upload" class="dropzone">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</form>
<img id=confirmbtn src="/images/confirm.png" alt="Confirm">
<img id=cancelbtn src="/images/cancel.png" alt="Click me to remove the file." data-dz-remove />
</div>
I am looking to store the image as a string
I did a ctrl+f (data-dz-thumbnail) on dropzone.js and found this in the preview:
<-this is ONE LINE BTW->
previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n
<div class=\"dz-image\">
<img id='data-dz-thumbnail'data-dz-thumbnail />
</div>\n <div class=\"dz-details\">\n
<div class=\"dz-size\"><span data-dz-size></span></div>\n
<div class=\"dz-filename\"><span data-dz-name></span></div>\n
</div>\n
<div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress></span></div>\n
</div>",
I then changed the whole image thumbnail element to this:
<img id='data-dz-thumbnail'data-dz-thumbnail />
//I added the id='data-dz-thumbnail' part
Then i added an event listener to js
something.onclick....{
var image=document.getElementById('data-dz-thumbnail').src
}
And that is literally it
I'm sorry for what I think is a bad question. Would anyone have an example of how to create something like on the picture, so some sort of tiles, within MVC? This used to be available on https://www.exceptionnotfound.net/asp-net-mvc-demystified-display-and-editortemplates/ but it isn't anymore, and I need to know how to create something like that but haven't been able to find it.
Any help would be appreciated even if it's just the correct name of the above!
It really doesn't matter too much if its in ASP, Java Spring or plain old HTML, this is more related to CSS and Bootstrap rather than ASP.NET MVC.
This is what I would do.
Open up your Views\Home\index.html and you can delete everything and paste something like below (which makes a good starting template) - grabbed from here.
#{
ViewBag.Title = "Home Page";
}
<div class="container">
<div class="row">
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
</div>
</div>
You will get thumbnail style grid which you then need to refine (with CSS) to give it the look and feel that you're after (make you to read bootstrap's documentation).
You don't need to use MVC to create tiles. You can use CSS or Javascript. There are a number of JS/CSS libraries that will allow you to tile your HTML.
I'd post some here, but honestly you should probably just use google to find some js/css tile layout libraries so that you can find one that best fits your needs.
Hi I encountered a problem with ng-model. I want to create an edit page for admin user to edit the rest of the user's permission level.
So, I listed out all the user's attributes in the edit page, and these attributes should display the current values.
I can update all the attributes correctly, however, the problem is that when visiting the edit page, only certain attributes are displayed while some are not. I think it is the problem with ng-model.
code snippets from my _form.html.erb
<div class="col-md-12 space-1" ng-class="{ 'has-error' : form['email'].$invalid }">
<label class="control-label">Email</label>
<div class="input-icon right">
<i ng-show="form['email'].$invalid" class="fa fa-warning tooltips" data-original-title="{{errors['email']}}" data-container="body"></i>
<input ng-model= "user.email" name="email" type="text" class="form-control">
</div>
</div>
<br>
<div class="col-md-12 space-1" ng-class="{ 'has-error' : form['events'].$invalid }">
<label class="control-label">Event Permission Level : {{user.activities.events}}</label>
<div class="input-icon right">
<i ng-show="form['events'].$invalid" class="fa fa-warning tooltips" data-original-title="{{errors['events']}}" data-container="body"></i>
<input ng-model= "user.activities.events" name="activities.events" type="range" max="2" min="0" class="form-control">
</div>
</div>
<br>
<div class="col-md-12 space-1" ng-class="{ 'has-error' : form['admin_events'].$invalid }">
<label class="control-label">Admin Event Permission Level : {{user.activities.admin_events}}</label>
<div class="input-icon right">
<i ng-show="form['admin_events'].$invalid" class="fa fa-warning tooltips" data-original-title="{{errors['admin_events']}}" data-container="body"></i>
<input ng-model= "user.activities.admin_events" name="activities.admin_events" type="range" max="2" min="0" class="form-control">
</div>
</div>
<br>
The code above shows 3 different ng-models, 1.user.email, 2.user.activities.events 3.user.activities.admin_events
The way I process them is the same, but when visiting the edit page, only email and events attributes displayed the current value, but not admin_events. I can update their values alright, but I cannot get admin_events to display its current value when visiting the edit page. This is weird isn't it. I mean if I can see the value of events, why can't I see the value of admin_event since they all belong to the user variable.
Can anyone explain why is it like this? It is very confusing for me. Thank you very much.
As it solved the problem, I quote myself from the comments :
If only user.activities.admin_events is not working, it may be related to the _ notation. Try camel case user.activities.adminEvents or user.activities['admin_events'].
I'm making a multi-page web app. I want it to have a left and right panel that are available no matter what page you're on. I managed to do that but the contents don't seem like they have the jQuery CSS rules applied to them. I did
$("[data-role=panel]").panel().enhanceWithin();
And that made my panel work... kinda of the labels for my check marks aren't formatted like they were when the panel wasn't external. I guess I'll just put the code up. I swear I've searched this site forever trying to find answers.
$(function () {
$("[data-role=panel]").panel().enhanceWithin();
});
<div data-role="panel" id="RoomInfoPanel" data-display="overlay" data-theme="b" data-position="right" data-dismissible=false>
<div data-role="main" class="ui-content">
<h2 id="roomNumberHeader">Panel Header..</h2>
<p class="main" id="CrewText">Crew Assigned:</p>
<select id="selectCrew" >
<option>Select Crew</option>
</select>
<div id="cblist" style="display:inline">
<label for="#compChk" class="ui-content">Completed</label>
<input type="checkbox" value="first checkbox" id="compChk" />
<input type="checkbox" value="first checkbox" id="paidChk" />
<label for="#paidChk">Paid</label>
</div>
<div data-role="main">
Edit Crews
</div>
</div>
</div>
Remove # in for attribute. It should be for="checkboxID" without hash.
I have this link on my page:
It shows up correct but it should render this when clicked:
<div data-role="page" id="advOptions">
<div data-role="header">
<h1>Advanced Options</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="stdDevs">Standard Deviations:</label>
<input type="textarea" name="stdDevs" id="stdDevs"/>
</div>
<div data-role="fieldcontain">
<label for="numsims">Number of Simulations:</label>
<input type="text" name="numsims" id="numsims" />
</div>
<div data-role="fieldcontain">
<label for="term">Forward Rate Data (in yrs):</label>
<input type="text" name="term" id="term" />
</div>
<div data-role="controlgroup" data-type="horizontal">
<fieldset class="ui-grid-a">
<button type="submit" data-theme="d" data-transition="pop" data-icon="delete">Reset</button>
<button type="submit" data-theme="a" data-transition="pop" data-icon="plus">Add</button>
</fieldset>
</div>
</div>
<div data-role="footer">
<h4>Chatham Financial</h4>
</div>
</div>
But it's trying to instead call the advOptions method on my controller which doesn't exist, looks like it's just trying to redirect from the base URL instead of opening that dialog.
What am I doing wrong?
The code looks good to me...
Are you adding that link to your page dynamically? Because if so, maybe JQuery Mobile did not recognize the data-rel="dialog" attribute. If this is the case, you should be able to simply call the .page() method on your page to let JQuery Mobile do its thing.