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
Related
I'm working on a React hook form project and I'm using react-dropzone to upload some images, I want to display a React hook form's ERROR when the type of file is not an image, I can console.log Error but I don't know how to use SetError and block form submition until the file format is accepted..
This is my Sandbox code
Any idea please ?
The easiest way to block form submission is to use the disabled property of the input when the length of the fileRejections array is greater than zero:
<input type="submit" disabled={fileRejections.length > 0}/>
The whole form code is:
<form onSubmit={handleSubmit(onSubmit)}>
<section className="container">
<div {...getRootProps({ className: "dropzone" })}>
<input {...getInputProps()} name="upload" />
<p>Drag 'n' drop some files here, or click to select files</p>
<em>(Only *.jpeg and *.png images will be accepted)</em>
</div>
<aside>
<h4>Accepted files</h4>
<ul>{acceptedFileItems}</ul>
<h4>Rejected files</h4>
<ul>{fileRejectionItems}</ul>
</aside>
</section>
<input type="submit" disabled={fileRejections.length > 0}/>
</form>
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.
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've got this code using Jquery Mobile :
<div role="main" class="ui-content">
<form action="/" method="post">
<fieldset data-role="controlgroup">
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" checked="">
<label for="checkbox-1a">Cheetos</label>
<input type="checkbox" name="checkbox-2a" id="checkbox-2a">
<label for="checkbox-2a">Doritos</label>
<input type="checkbox" name="checkbox-3a" id="checkbox-3a">
<label for="checkbox-3a">Fritos</label>
<input type="checkbox" name="checkbox-4a" id="checkbox-4a">
<label for="checkbox-4a">Sun Chips</label>
</fieldset>
</form>
</div>
The problem is that when i load the page the codes looks like this :
<div class="ui-controlgroup-controls ">
<div class="ui-checkbox">
I've skipped the whole code, the problem is in the
that should not be there.
Any idea about how to fix it?
This problem comes when copying and pasting the source code from their website.
In fact in this way you copy also invisible blank spaces which are converted as by the browser and make the last block go down.
To solve the issue simply remove all the spaces between the tags and all will be displayed correctly.
There are many ways you can remove the automatic default padding.
First
<div style="padding: 0;">...</div>
Second: Define an id for the div tag and set padding to 0 in css
<div id="myID">
#myID{ padding:0; }
I am using bPopup to load a form in an overlay. The form is basically in a that is loaded hidden in the page, and by clicking a button on the page, the overlay shows up on top with the form in it.
I was using this code in another page before and it worked fine but wanted to go the overlay route as I felt the user experience was better.
So what happens is:
The overlay loads perfectly, all fields are visible, but the submit button doesn't do anything.
Using firebug, I looked at the code of the overlay and realized that my opening and closing tags are gone from the div.
I check and they are present in the when hidden.. so I'm guessing something happens with bPopup as I load the overlay.
I couldn't find anything in the regard and turn to the community.
Thanks
here is a sample of the code:
The div in the page I load:
<div id="fileuploadbox">
<div id="fileupload_div" class="contentcontainer">
<div class="headings alt">
<h2>Upload a file</h2>
</div>
<div class="contentbox">
<form action="**mycontroller**" method="post" enctype="multipart/form-data">
<p><span class='label'>File:</span><input type="file" name="file" value="" id="uploader" size="34" /></p>
<p><span class='label'>Description:</span><input type="text" name="description" value="" id="smallbox2" class="inputbox" maxlength="250" /></p>
<p><span class='label'> </span><input type="submit" name="" value="Upload file" class="btn" />
</form>
</div> <!-- content box -->
</div> <!-- contentcontainer -->
</div> <!-- fileuploadbox -->
The Button it self:
<a href="#" class="fileuploadpop">
<div id="fileuploadpop">
Upload a file
</div>
</a>
The Javascript:
<script language="javascript">
$(document).ready(function(){
$("a.fileuploadpop").bind('click', function(){
$("#fileuploadbox").bPopup();
return false
});
});
</script>
The code you provided works fine in my mac Firefox and Chrome with bPopup. The submit button works!
May be something to do with your btn class which I have not defined or you might try putting this in a bare-bone page to test with bPopup first to track and resolve any other conflict.