We Keep Coding

How can I display the uploaded PSD file in a canvas element using javascript?

I want to show a PSD file that I uploaded to the input element as a photo in the canvas element. I tried an example for this but it didn't work. Where am I doing wrong?
in script.js
var PSD = require('psd');
// Load from URL
PSD.fromURL(e.target.result).then(function(psd) {
console.log("PSD UPLOADED");
console.log(psd);
document.getElementById("the-canvas").appendChild(psd.image.toPng());
}).catch((error)=> {console.log(error)})
in html.js
<input type="file">
<canvas id="the-canvas"></canvas>

Get a file's contents when opening via input file tag in HTML [duplicate]

I'm having the user select an image and I want to change the one shown on the fly without having to rely on server-side scripts like PHP?
Basically, I have an HTML that has something like the following:
<input type="file" id="file" name="file" />
<img id="imagedisplay" src="http://path/to/some/image.jpg" />
Then on the jQuery side I have the following:
$('#file').change(function(e){
alert($(this).val());
});
I was hoping to replace the imagedisplay's src with the one the user selects referenced locally to their system but $(this).val() only displays the file name so I won't be able to reference it as the source.

You can use FileReader API.
The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer.
Its method FileReader.readAsDataURL()
The readAsDataURL method is used to read the contents of the specified Blob or File.
Note: It works in Modern browsers
$(document).ready(function() {
$('#file').change(function(e) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imagedisplay').attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="file" name="file" />
<img id="imagedisplay" src="" />

Combine image and data into 1 html form

Ok this is what i am trying to do. I am creating a web app, that captures an image and displays in iframe of page. i also in another form capture data (we will use (firstname and lastname) as example but there is more fields that are filled in while completing application. at the end of the app i know have a form that has captured all the data and a form that has captured the image. my question is how do i extract the form image and place within the data form. as a javascript variable (ex.myvalue3) this is what i have been able to come up with, just been confused on how to attach both forms together
Form#1ImageCapture
<form action="../uploadimage.php" method="post" enctype="multipart/form-data" target="my_iframe">
<img src="" id="image">
<input type="file" input id="input" name="image" onchange="handleFiles()" style="display: none;"/>
</form>
<iframe name="my_iframe" src="" id="my_iframe"></iframe>
Javascript To Capture
var img = document.getElementById("image");
var width = 400;
function handleFiles() {
var filesToUpload = document.getElementById('input').files;
var file = filesToUpload[0];
// Create a file reader
var reader = new FileReader();
// Set the image once loaded into file reader
reader.onload = function(e) {
img.onload = function() {
if (this.naturalWidth > width) {
this.width = width;
}
}
img.src = e.target.result;
}
reader.readAsDataURL(file);
}
</script>
Form#2DataCapture
<form name="myForm" id="myForm" action="../uploaddata.php" method="POST" target="hidden-form">
<input type="text" name="Firstname" value="%%%myvalue1%%%"/>
<input type="text" name="Lastname" value="%%%myvalue2%%%"/>
</form>

Transferring files & blobs through iframe is possible and sometimes complicated task depending on iframes origin. If parent have access to the childs window with javascript then you are get get the file inputs reference from parent. Otherwise you need to use postMessage and firefox can are more restricted on transferring a blob cross origin but there are ways around it.
Now the other problem is while you can modify a form and insert inputs and change the value - the file input remains read only so you can not take the file from 1ImageCapture and insert it to 2DataCapture or any other form for that mather.
You can upvote my comment in w3c github to say that you want this feature.
You can do it the other way around and take all inputs and insert them to form with imageCapture.
The other option is to use FormData and create a own form and upload them with ajax

Not the answer you are looking for but here is a little tip to reduce the code... base64 is just impractical
var img = document.getElementById("image");
img.style.maxWidth = 400
function handleFiles() {
var fileInput = document.getElementById('input');
var file = fileInput.files[0];
// use createObjectURL instead of reading the file
img.src = URL.createObjectURL(file);
}

Is it possible to replace an image with another one selected by the user on the fly via jQuery alone?

I'm having the user select an image and I want to change the one shown on the fly without having to rely on server-side scripts like PHP?
Basically, I have an HTML that has something like the following:
<input type="file" id="file" name="file" />
<img id="imagedisplay" src="http://path/to/some/image.jpg" />
Then on the jQuery side I have the following:
$('#file').change(function(e){
alert($(this).val());
});
I was hoping to replace the imagedisplay's src with the one the user selects referenced locally to their system but $(this).val() only displays the file name so I won't be able to reference it as the source.

You can use FileReader API.
The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer.
Its method FileReader.readAsDataURL()
The readAsDataURL method is used to read the contents of the specified Blob or File.
Note: It works in Modern browsers
$(document).ready(function() {
$('#file').change(function(e) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imagedisplay').attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="file" name="file" />
<img id="imagedisplay" src="" />

how to get the true path of a file from radupload

I have this radupload:
<telerik:RadUpload ID="RadAsyncUploadBoxLogo" ClientID="RadAsyncUploadBoxLogo"
runat="server" ControlObjectsVisibility="None"
MaxFileInputsCount="1" MaxFileSize="4000000" OverwriteExistingFiles="True" ReadOnlyFileInputs="True"
Height="10px" TabIndex="12" OnClientFileSelected="OnClientFileSelectedHandler"
>
<Localization Remove="" Select=" Seleccionar Imagen" />
</telerik:RadUpload>
And i have this tag image
<asp:Image ID="ImageLogo" ClientId="ImageLogo" CssClass="ImgLogo" runat="server"/>
with this script I try to put the image in the image tag:
function myOnClientFileSelect(radUpload, eventArgs) {
var url = radUpload.getFileInputs()[0].Value;
$('.ImgLogo').attr("src", url);
}
The problem is that the variable url throws me a path: fakepath/filename , I read that the radupload throws for security so that others can not access the file path , but as how to get the real path of the file to display it on the tag image

Where file_input is a reference to a <input type="file"> and img is a reference to an <img>, in the change handler you can do
if (file_input.files && file_input.files.length) { // some file has been set
// generate a blob uri to the file
var uri = URL.createObjectURL(file_input.files[0]);
// set this as the src of your <img>
img.src = uri;
}
This code uses URL.createObjectURL which requires IE 10+, to support lower versions of IE you may need to use a <canvas> instead of an <img> so you can load the file differently.