I need to preview an image prior to submitting a form.
I work with Rails 3 and needs something that is browser compatible.
Any ideas how I can achieve that?
So! :) The main idea is to use the FileReader Javascript Class, which is really handy for what you need to do.
You just have to listen to the "change" event on your file input and then call a method that will use the "readAsDataURL()" method of the FileReader class. Then you just have to fill the source of a "preview img tag" with the returned result of the method...
I've wrote you a simple jsFiddle that achieves what you want. You can see my code below:
<!-- HTML Code -->
<div class="upload-preview">
<img />
</div>
<input class="file" name="logo" type="file">
//JS File
$(document).ready(function(){
var preview = $(".upload-preview img");
$(".file").change(function(event){
var input = $(event.currentTarget);
var file = input[0].files[0];
var reader = new FileReader();
reader.onload = function(e){
image_base64 = e.target.result;
preview.attr("src", image_base64);
};
reader.readAsDataURL(file);
});
});
And in the Mozilla Documentation, you have another example (surely more robust). This solution should work with Safari (version 6.0+).
This is the only way I know to preview an image prior to submitting a form, but I think it is quite a common way. Of course it has nothing to do with Ruby On Rails as we only use Javascript here... It would be impossible to do it using Rails only as you would have to upload the image before rendering it. (As Rails is server side, I think you perfectly understand why. :) )
HTML:
<input type="file">
<div id="image_preview"></div>
JS (require jquery):
$(document).ready(function(){
$('input[type="file"]').change(function(){
var image = window.URL.createObjectURL(this.files[0]);
$("#image_preview").css("background-image", "url(" + image + ")");
});
});
Related
I have js code that displays an image preview after adding a picture.
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#preview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(document).ready(function(){
$("#attach").change(function () {
readURL(this);
});
});
And html:
<img id="preview" style="width:400px;height:400px;">
<label for="attach">
<span>Click to add picture</span>
</label>
<input class="hidden" id="attach" type="file" name="profile[image]">
Check out Codepen example.
Question: Using capybara how can I test that image preview shows up when I attach a picture?
I know we can check img tag for a src but how can I combine Capybara with Javascript code?
Simply using attach_file() doesn't do anything useful here since Capybara isn't friendly with JS.
I'm not sure what you mean about Capybara not being friendly with JS, however there is an inconsistency in your example since your file input has an id of "attach" and your JS change listener is listening on '#inputFile' - assuming that is fixed (in this code I assumed the input id was supposed to be 'attach') then you can do
execute_script('$("#attach").removeClass("hidden")') #make input visible so you can attach to it
attach_file('attach', 'some_file.jpg') #attach the file
expect(page).to have_css('#preview[src]') #confirm a src attribute was set
I have a simple view which renders set of images depending on given items array (simplified code), using this as I need to collect some other data to 'build' required class name(s):
App.MyView = Ember.View.extend({
buildTemplate: function () {
var itemz = this.get('items');
var classname = 'classNameDependingOnSomeCalculations...';
var out = '<div>';
$.each(itemz, function (index, obj) {
out += '<img {{action myActionHere}} src="' + obj.href + '" alt="" class="'+classname+'"/>';
});
out += '</div>';
return out;
}.property('view'),
defaultTemplate: Ember.Handlebars.compile(
"<div>{{{view.buildTemplate}}}</div>"
)
});
And in template I'm using it as
{{#each myObj in myCollection}}
{{view App.MyView itemsBinding="myObj.items" otherBinding="otherProps" }}
{{/view}}
Unfortunately this way Ember instead of binding the action puts {{action myActionHere}} directly into code...
How can I bind an action instead while building dynamic template?
I'm using Ember 1.1.2
P.S. Or maybe I should use quite other approach for building this view?
There is a workaround to make this work with the view as you've laid it out here... But this is really not the ember way of doing it. If for some reason you need this kind of an approach, I'll append an answer for that, but I'm going to aim to fix the underlying issue.
Instead of doing this as shown here, you should instead have code that looks like the following directly in your JSP:
{{#each myObj in myCollection}}
<div>
{{#each item in myObj.items}}
<img {{action myActionHere}} src={{item.href}} alt='' class={{classNameFunction}}/>
{{/each}}
</div>
{{/each}}
If your reason for wanting to do this as a view is so that you can reuse this functionality without rewriting the code, take a look at partials which are specifically designed for that purpose.
I've been trying to get TinyMCE to use a custom execcommand_callback handler to perform actions when the File Menu::New Document option is selected, but have been unable to get it to work at all, even on the most basic level. The project is on Rails 4, and I'm using the tinyMCE-rails gem from:
https://github.com/spohlenz/tinymce-rails
and following the example from:
http://www.tinymce.com/wiki.php/Configuration3x:execcommand_callback
I've put the following in tinymce.yml
execcommand_callback: "myCustomExecCommandHandler"
The resulting html:
<script>
//<![CDATA[
function myCustomExecCommandHandler(editor_id, elm, command, user_interface, value) {
alert('hello');
}
//]]>
</script>
some html ...
<form accept-charset="UTF-8" action="" id="homepage_form" method="post">
<textarea class="tinymce" cols="10" id="editor" name="editor" rows="10"></textarea>
<script>
//<![CDATA[
tinyMCE.init({"selector":"textarea.tinymce","document_base_url":"/",
"theme_advanced_toolbar_location":"top","theme_advanced_toolbar_align":"left",
"theme_advanced_statusbar_location":"bottom",
"theme_advanced_buttons3_add":"tablecontrols,fullscreen,image,link",
"plugins":"table,fullscreen,image,link",
"execcommand_callback":"myCustomExecCommandHandler"});
//]]>
</script>
more form fields ...
</form>
To all appearances, this does nothing. Doesn't even raise a warning or error. What am I doing wrong?
Ok, I figure I should wrap this up for anyone else interested in this question, and thanks to Nishant for getting me on the right track.
Using TinyMCE 4 with the tinymce-rails gem (https://github.com/spohlenz/tinymce-rails) is straightforward and requires less configuration. Since I wanted the ability to embed links and images, my tinymce.yml file looks like:
document_base_url: /
plugins:
- image
- link
setup: "myNewDocumentHandler"
An my custom command handler looks like:
function myNewDocumentHandler(ed) {
ed.on('BeforeExecCommand', function(e) {
if (e.command === 'mceNewDocument') {
alert('New Document Command Handled');
}
});
}
You can see it work here: http://fiddle.tinymce.com/uRdaab/4
There is no problem in your callback . It works fine .
Check http://fiddle.tinymce.com/pRdaab
There is some problem here in plugins line , when you remove image and link it works . Check my fiddle and here is the code . I dont know why but try to figure that.
image is usually advimage , not sure about link plugin / feature however .
<script type="text/javascript">
function myCustomExecCommandHandler(editor_id, elm, command, user_interface, value) {alert('hello');}
tinyMCE.init({"selector":"textarea",
"document_base_url":"/",
"theme_advanced_toolbar_location":"top",
"theme_advanced_toolbar_align":"left",
"theme_advanced_statusbar_location":"bottom",
"theme_advanced_buttons3_add":"tablecontrols,fullscreen",
"plugins":"table,fullscreen",
"execcommand_callback":"myCustomExecCommandHandler"});
</script>
<form method="post" action="dump.php">
<textarea>Foo</textarea>
</form>
So normally its good to use a classic TinyMCE init and then work on it . Its better to first get TinyMCE working properly and then examine add the call back functionality . One issue at a time saves a lot of troubleshooting . I am trying to implement that in my programming skills too !
i'm using Caman JS to manipulate an image in my edit view for the model Item.
$('#vintage').click(function() {
Caman("#preview_image", function () {
this.reset();
this.crossProcess(100)
this.render(function () {
this.addClass('selected');
});
});
});
Caman JS provides me with an option to get the base64 value of the Canvas object
var dataURL = this.toBase64();
However i'm now kind of stuck what to do with this information. Ideally i'd like to overwrite the original image upon submitting my rails form.
Any suggestions would be great.
Ok, I found A solution. Here it is...
create a hidden field with the base64 data as the value
<input id="base64" type="hidden" value="" name="base64"/>
var dataURL = this.toBase64();
$('#base64').val(dataURL)
I then processed this in my controller.
unless params[:base64].empty?
data = params[:base64]
image_data = Base64.decode64(data['data:image/png;base64,'.length .. -1])
File.open("#{Rails.root}/public#{#item.image.url.to_s}", 'wb') do |f|
f.write image_data
end
// Carierwave method to regenerate thumbnails
#item.image.recreate_versions!
end
Might help someone, I'm still definitely open to suggestions for better or more efficient ways to do this.
We are creating an HTML5 website for mobile and need to get camera access through the web browser without being a native app. We are having trouble making this work in iOS. Is anyone aware of a solution for this?
You could try this:
<input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput">
but it has to be iOS 6+ to work. That will give you a nice dialogue for you to choose either to take a picture or to upload one from your album i.e.
An example can be found here:
Capturing camera/picture data without PhoneGap
As of 2015, it now just works.
<input type="file">
This will ask user for the upload of any file. On iOS 8.x this can be a camera video, camera photo, or a photo/video from Photo Library.
<input type="file" accept="image/*">
This is as above, but limits the uploads to photos only from camera or library, no videos.
In iOS6, Apple supports this via the <input type="file"> tag. I couldn't find a useful link in Apple's developer documentation, but there's an example here.
It looks like overlays and more advanced functionality is not yet available, but this should work for a lot of use cases.
EDIT: The w3c has a spec that iOS6 Safari seems to implement a subset of. The capture attribute is notably missing.
I think this one is working.
Recording a video or audio;
<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">
or (new method)
<device type="media" onchange="update(this.data)"></device>
<video autoplay></video>
<script>
function update(stream) {
document.querySelector('video').src = stream.url;
}
</script>
If it is not, probably will work on ios6, more detail can be found at get user media
Update 11/2020: The Google Developer link is (currently) dead. The original article with a LOT more explanations can still be found at web.archive.org.
This question is already a few years old but in that time some additional possibilities have evolved, like accessing the camera directly, displaying a preview and capturing snapshots (e.g. for QR code scanning).
This Google Developers article provides an in-depth explaination of all (?) the ways how to get image/camera data into a web application, from "work everywhere" (even in desktop browsers) to "work only on modern, up-to-date mobile devices with camera". Along with many useful tips.
Explained methods:
Ask for a URL: Easiest but least satisfying.
File input (covered by most other posts here): The data can then be attached to a or manipulated with JavaScript by listening for an onchange event on the input element and then reading the files property of the event target.
<input type="file" accept="image/*" id="file-input">
<script>
const fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', (e) => doSomethingWithFiles(e.target.files));
</script>
The files property is a FileList object.
Drag and drop (useful for desktop browsers):
<div id="target">You can drag an image file here</div>
<script>
const target = document.getElementById('target');
target.addEventListener('drop', (e) => {
e.stopPropagation();
e.preventDefault();
doSomethingWithFiles(e.dataTransfer.files);
});
target.addEventListener('dragover', (e) => {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
});
</script>
You can get a FileList object from the dataTransfer.files property of the drop event.
Paste from clipboard
<textarea id="target">Paste an image here</textarea>
<script>
const target = document.getElementById('target');
target.addEventListener('paste', (e) => {
e.preventDefault();
doSomethingWithFiles(e.clipboardData.files);
});
</script>
e.clipboardData.files is a FileList object again.
Access the camera interactively (necessary if application needs to give instant feedback on what it "sees", like QR codes): Detect camera support with const supported = 'mediaDevices' in navigator; and prompt the user for consent. Then show a realtime preview and copy snapshots to a canvas.
<video id="player" controls autoplay></video>
<button id="capture">Capture</button>
<canvas id="canvas" width=320 height=240></canvas>
<script>
const player = document.getElementById('player');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const captureButton = document.getElementById('capture');
const constraints = {
video: true,
};
captureButton.addEventListener('click', () => {
// Draw the video frame to the canvas.
context.drawImage(player, 0, 0, canvas.width, canvas.height);
});
// Attach the video stream to the video element and autoplay.
navigator.mediaDevices.getUserMedia(constraints)
.then((stream) => {
player.srcObject = stream;
});
</script>
Don't forget to stop the video stream with
player.srcObject.getVideoTracks().forEach(track => track.stop());
Update 11/2020: The Google Developer link is (currently) dead. The original article with a LOT more explanations can still be found at web.archive.org.
The Picup app is a way to take pictures from an HTML5 page and upload them to your server. It requires some extra programming on the server, but apart from PhoneGap, I have not found another way.