at first I need to apologize for my English, I'm not a good speaker.
But here's my problem:
I made an application, where you can edit questions for a game. These questions are on a server. You download a question and they are edited locally. At the end of the session you upload your question.
These questions should also contain images.
Therefore I made a little form, which saves the image to an image-heap as a FormData-Object.
This Form-Data Object is being saved into another Object.
Here's an example of how I do this:
var formDataTemp = new FormData();
var qcid = // given Id
if($('#editImageFileInput')[0].files[0] != undefined) {
formDataTemp.append("img", $('#editImageFileInput')[0].files[0]);
questionImageCache.push({
qcid: qcid, img: formDataTemp
});
}
There is more Data in the object, but i removed it to keep it simple.
There is also a list of all the questions the user has already downloaded. There he can switch from one question to another.
Now I want to display this image when the particular question comes up again. How can I do this without uploading it? Is there a way to display the image out of the javascript-object?
I don't know exactly how your code works, but this is how you can display an image before it is uploaded, using FileReader.
Javascript:
function loadImg(input) {
if (!input.files || !input.files.length) return null;
var fReader = new FileReader();
var img = $('#placeholder');
fReader.onload = function(e) {
$(img).attr('src', e.target.result);
};
fReader.readAsDataURL(input.files[0]);
}
HTML:
<input type='file' onchange="loadImg(this);" />
<img id="placeholder" src="#" alt="your image" />
JSFiddle example.
You can take the concept from this snippet and apply it to your own project :)
Related
So hi hello there first of all...
I ran into a little problem and am having a tough time trying to figure it out.
So basically what i am trying to do is be able for the user to click on a button that will allow them to select an image and after that it will grab the url of that image locally and change the background image of a div.
Now i am using the window variable but thinking about trying this out without it and just having the event listener do its thing. But havent tested that out kinda of feel like that wont work.. just a thought. but anyways, this works for when i only have one event listener target the button but if i do 2 then it gives me a security warning telling me that it may not load data from the blob... any idea of how to proceed with the vision?
Below is the html code:
<h3 class="m-heading">Project</h3>
<div class="projectIMG">
<input type="file" id="projectImgBtn">
</div>
Below is the javscript
window.addEventListener('load', function(){
fileButton.addEventListener('change', function(){
if(this.files && this.files[0]){
const background = document.querySelector('.insertImage');
console.log(background)
// console.log(background.style.backgroundImage)
background.style.backgroundImage = `url('${URL.createObjectURL(this.files[0])}')`
background.onload = imageLoaded;
}
})
projectImg.addEventListener('change', function(){
if(this.files && this.files[0]){
const background = document.querySelector('.projectIMG')
console.log(background)
background.style.backgroundImage = `url('${URL.createObjectURL(this.files[0])})`
background.onload = imageLoaded
}
})
})
This is the full error
yout need to get the base64 for put it in the background.
Try this:
const reader = new FileReader();
reader.onload = e => variable = e.target.result;
reader.readAsDataURL(this.files[0]);
I have an input field, where users can choose what image they want to upload, and then I need to send to cloud storage. The problem is, I don't know how to get the file they selected. I saw a lot questions like this, this, this, etc. Most of the questions I saw, like this one, are asking for previewing the images BEFORE uploading. I don't think I need to preview the image, i just want to upload it. How do I do this? Here is my current code:
function addImage() {
$("#addImage").append('\
<input type="file" id="image" accept="image/*">\
<button type="submit">ok</button>\
<button onclick="cancelAddImage()">cancel</button>');
$("#addImage").submit(function() {
var image = $("#image").files;
console.log(image);
storage.ref("images").put(image).then(function(snapshot) {
console.log('Uploaded a file!');
});
});
}
The console.log() for this is giving "undefined". I also tried .files[0] instead of .files;, and many others.
In your html code, you place the input field with a an id. For example, if you want to upload a picture from the camera:
<input type="file" accept="image/*" capture="camera" id="cameraInput">
Then in your js code, you will listen to change events on this element :
let storageRef = firebase.storage().ref('photos/myPictureName')
let fileUpload = document.getElementById("cameraInput")
fileUpload.addEventListener('change', function(evt) {
let firstFile = evt.target.files[0] // upload the first file only
let uploadTask = storageRef.put(firstFile)
})
Of course you need to have somehow included the firebase js library before.
And if you write in an older version of js, you also need to replace the let with var and add ; at the end of your lines.
im using an API to pass a whole form including images, textarea, etc.
it uses new FormData($('#form')) to pass the data into server.
everything went smooth except when i did something on <input type="file" id="upload"/>
I made the input to show the image every time the user uploads a new photo.
$(function() {
$("#upload").on("change", function()
{
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support
if (/^image/.test( files[0].type)){ // only image file
var reader = new FileReader(); // instance of the FileReader
reader.readAsDataURL(files[0]); // read the local file
reader.onloadend = function(){ // set image data as background of div
//Showing the images here..
}
}
});
});
But now, when im submitting the form again using Ajax, it cannot read or pass the image. No image passed in the database.
Whenever i comment the line //var files = !!this.files ? this.files : []; its back to normal, but the image is not showing.
i want to ask is there an alternate way to show the image without affecting the <input type="file" tag?
Or if i have to create another <input type="file" with style="display: none;", how can i pass the image from one input with type="file" to another input with also type="file"?
I'm trying to allow users to browse their documents and choose a picture to set as a background image. I have already found out how a user can change the background image using a URL. Please find the demo below:
DEMO: http://goo.gl/253IN
Username: demo
Password: demo1
I dont know how to get it to work with the
File Field
I have found the following Example which I would like to use. Found question here
JavaScript:
$(switchBackground);
var oFReader = new FileReader(),
rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
oFReader.onload = function(oFREvent) {
localStorage.setItem('b', oFREvent.target.result);
switchBackground();
};
function switchBackground() {
$('body').css('background-image', "url(" + localStorage.getItem('b') + ')');
}
function loadImageFile(testEl) {
if (! testEl.files.length) { return; }
var oFile = testEl.files[0];
if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
oFReader.readAsDataURL(oFile);
}
HTML:
<input id="test" type="file" onchange="loadImageFile(this)" />
However I cant get it to work with my current code (Please refer to demo)
Thanks in advance
PS I am not an expert (yet :D) on HTML and Javascrpit so I will not be able to understand really complex code
In short, you cannot use the file input in this way. JavaScript does not have access to the users direct machine for security reasons. This input simply allows a file to be passed across the web stream in the body of an HTTP POST request.
To accomplish what you are wanting, you would have to upload the file server side using a server side language such as PHP or ASP.NET. You could then save it off and store it, allowing it to be displayed as the users background whenever they visited.
not impossible at all!
you can actually add this functionality to you website using this plugin
https://github.com/CybrSys/custom-background.js
Is there by any chance a way of letting the user select an image from his hard drive and without submitting it to the server use this image in the browser?
I need this because I want the users to be able to crop an image before sending this cropped image to the server (thus saving a post and some bytes of data).
What I tried to do is using an input type file and then capturing the submit event, but the value from the input is just a fake path (useless).
Any help would be greatly appreciated.
Here is a very basic example (with many globals, without input validation...) of image scaling: http://jsfiddle.net/89HPM/3/ . It's using the File API and a canvas element.
As #anu said the save can be done using toDataUrl method of the canvas.
In similar way you can achieve crop.
JavaScript
(function init() {
document.getElementById('picture').addEventListener('change', handleFileSelect, false);
document.getElementById('width').addEventListener('change', function () {
document.getElementById('canvas').width = this.value;
renderImage();
}, false);
document.getElementById('height').addEventListener('change', function () {
document.getElementById('canvas').height = this.value;
renderImage();
}, false);
}());
var currentImage;
function handleFileSelect(evt) {
var file = evt.target.files[0];
if (!file.type.match('image.*')) {
alert('Unknown format');
}
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
currentImage = e.target.result;
renderImage();
};
})(file);
reader.readAsDataURL(file);
}
function renderImage() {
var data = currentImage,
img = document.createElement('img');
img.src = data;
img.onload = function () {
var can = document.getElementById('canvas'),
ctx = can.getContext('2d');
ctx.drawImage(this, 0, 0, can.width, can.height);
};
}
HTML
<input type="file" name="picture" id="picture" /><br />
<input type="text" id="width" value="200" />
<input type="text" id="height" value="200" /><br />
<canvas width="200" height="200" style="border: 1px solid black;" id="canvas"></canvas>
Here is a blog post which I made about that basic example: blog.mgechev.com
New HTML5 File API is probably the closest solution to what your looking for:
http://www.html5rocks.com/en/tutorials/file/dndfiles/
It allows you to browse for and read files within Javascript. Do whatever processing you like, and then upload to the server. Anything besides this is going to be very tricky indeed, and probably an unavoidable trip to the server and back.
Downside here is browser support.....as always
I am not sure which browsers work perfectly but HTML5 got DnD and File API. Let me give you steps which can work for you using FileAPI.
DnD API: Starts with the drop event when the user releases the mouse and the mouse-up event occurs.
DnD API: Get the DataTransfer object from the drop event
File API: Call DataTransfer.files to get a FileList, representing the list of files that were dropped.
File API: Iterate over all the individual File instances and use a FileReader object to read their content.
File API: Using the FileReader.readAsDataURL(file) call, every time a file is completely read, a new “data URL” (RFC 2397) formatted object is created and an event wrapping it is fired to the onload handler on the FileReader object.
FYI: The “data URL” object is Base64-encoded binary data, with a spec-defined header sequence of chars. Browsers understand them.
HTML5 DOM: set the image href to the File Data URL
You can't, for the following reasons:
For the reasons stated in this post: Full path from file input using jQuery
The fact that if you even try to create an img element loading a
local file path you'll get the error Not allowed to load local
resource: in your browser's console.
The fact that once you have an image in place you can only alter it's
appearance on screen and not alter the file on the system or send the altered image up to the server
You've stated that you need cross browser support, so HTML5 File API and Canvas API are out, even though they would only allow part of the functionality anyway.
I've just solved a problem closed to yours.
As everybody said you can't got the real image file address. But, you can create a temporary path and show the image in your page without submiting it to server. I'll show how easy it is, next to next paragraph.
Once you show it you can use some javascripts events to "pseudo-crop-it" and get the crop params (corners). Finaly you can add the params to some hidden field and submit the form. As a result you may use som php to crop the submited image at server and to save the result using a number of image formats as .png, jpg, gif, etc. Sorry if i do not write a complete solution, have not enough time.
/* some scripting to bind a change event and to send the selected image
to img element */
$(document.ready(function(){
$("input:file").each(function(){
var id = '' + $(this).attr('id');
var idselector = '#'+id, imgselector=idselector+'-vwr';
$(idselector).bind("change", function( event ){
(imgselector).fadeIn("fast").attr('src',
URL.createObjectURL(event.target.files[0]));
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!-- create a img element to show the selected image and an input file element to select the image.
ID attribute is the key to have an easy and short scripting
note they are related suffix -vwr makes the difference
-->
<img src="" id="image-input-vwr" alt="image to be cropped">
<input type="file" id="image-input" name="image_input">
Hope it help some body as it is a very old question.
Luis G. Quevedo