referring to a working codepen demo at here, the app is working fine if choose file button clicked which upload image from local computer and the text from the image is extracted. However, how do I upload a Web Image URL such as this and not from local computer files and with the help of a button which I labelled in my demo to output the OCR text result?
I would appreciate any help I can get :)
<div class="content extra"><input id="file" type="file" onchange="proccess(window.lastFile=this.files[0])"></div>
I have tried to change the onchange to onclick but does not work.
You can add an input like that :
<div class="content extra">
<input id="file" type="file" onchange="proccess(window.lastFile=this.files[0])">
</div>
<div class="content extra">
<label for="imgURL">Or paste image url : </label>
<input id="imgURL" type="text" onchange="proccess(value)">
</div>
And check in your process function if the param is a string or not, if it is it means we have an URL so we just defined this url as src value :
function proccess(inputData){
$(".result").html("");
var src;
if(typeof(inputData) == 'string') {
src = inputData
} else {
src = (window.URL ? URL : webkitURL).createObjectURL(inputData);
}
//do what you want after that...
//...
}
Related
Some background information:
Users are able to input some book information and upload book cover image file through HTML form. Before they input information manually, they could use Google Book API to find some information, and by just click a button, some fields will be automatically filled using the information from Google Book API. For book cover image, Google API returns the image url, so I am trying find a way to transfer this url to a file object. Therefore, when users click the button to fill form using information from Google API, the image will be automatically uploaded there from image url.
I have an image url such as: http://books.google.com/books/content?id=L2byvgEACAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api
And I created an HTML form that allows users to upload their images.
<div class="form-group">
<label for="book cover">Book Cover</label>
<input type="file" class="form-control" name="book cover" accept="image/*" required>
</div>
Now I want to use JavaScript to transfer the image url to a file object and then prefill this file input for some users.
How can I achieve this using JavaScript? Thanks!
For your case, I think you must save the link to input hidden and submit to server side to get that image.
If you want to show the preview for user, just create a <img src=" http://books.google.com/books/content?id=L2byvgEACAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api" /> on your form.
Put hidden input to keep the link from user:
<input type="hidden" name="image-url" value="http://books.google.com/books/content?id=L2byvgEACAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api">
<img src="http://books.google.com/books/content?id=L2byvgEACAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api"/>
And then, you have to take action download this image on your server side.
Please use below code to make it working :
Function
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function() {
readURL(this);
});
HTML Form view
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>
I'm trying to dynamically change my page's content from the default .png file to whatever the user has loaded for a preview. I managed to implement something similar to Preview an image before it is uploaded. I took the suggestion and wrapped my div in <form runat="server"></form>
My HTML elements look like this:
<form runat="server">
<label class="control-label col-md-4 col-lg-3" for="photo" id="FotoLbl">
Foto anfügen
<div class="inline-help form-label" data-help="„Ein
" data-heading="Foto einfügen" data-help-key="offers.photo"><i onClick="myFunction('fotoModal','commentOK6')" class="fa fa-question-circle-o" id="FotoHilfe"></i></div>
</label>
<div class="col-md-8 col-lg-9">
<div class="row fileinput-control">
<img id="preview" src="Anzeige%20erstellen-Dateien/default_offers_photo-edd8e5ff2d549a9fa1a898b23119931ebd0e745.png" width="500px" height="360px" style="padding-left:15px;" onload="addDeleteBttn()"/>
<br/>
<input type="file" id="image" style="display: none;" />
<!--<input type="hidden" style="display: none" value="0" name="remove"remove">-->
<a href="javascript:changeProfile()">
<div class="file-btns">
<span class="btn btn-default btn-file" id="bildBttn">
<i title="Bild auswählen" class="fa fileinput-new fa-file-image-o"></i></span></div>
</a>
<a id="removeBttnFrame" href="javascript:removeImage()">
</a>
<div class="col-sm-6">
<textarea class="form-control copyright" placeholder="Geben Sie hier die Bildquelle an: Fotograf, Lizenz, ...
Ohne Quellenangaben kann das Bild nicht angezeigt werden.
" name="offer[photo_copyright]" id="offer_photo_copyright"></textarea>
<div class="fileinput-description"></div>
</div>
</div>
</div>
</form>
</div>
In the below .js code you see how I'm normally uploading an image preview, which works perfectly fine. However when I serve the page on FLASK, the image preview won't load.
function changeProfile() {
$('#image').click();
}
$('#image').change(function() {
var imgPath = this.value;
var ext = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
if (ext == "gif" || ext == "png" || ext == "jpg" || ext == "jpeg")
readURL(this);
else
alert("Please select image file (jpg, jpeg, png).")
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.readAsDataURL(input.files[0]);
reader.onload = function(e) {
$('#preview').attr('src', e.target.result);
// $("#remove").val(0);
};
}
}
function removeImage() {
$('#preview').attr('src', 'noimage.jpg');
// $("#remove").val(1);
$('#preview').attr('src', 'Anzeige%20erstellen-Dateien/default_offers_photo-edd8e5ff2d549a9fa1a898b23119931ebd0e745.png');
}
function addDeleteBttn() {
var removeBttn = document.createElement("BUTTON");
removeBttn.title = "Entfernen";
removeBttn.innerHTML = '<i class="fa fa-trash-o"></i>'
removeBttn.className = "removeBttnClass";
document.getElementById("removeBttnFrame").appendChild(removeBttn);
}
I need to be able to serve the HTML-Page on flask and let the user load an image preview. Since it is just an image preview without actual file upload on flask, I don't understand why flask has a problem showing the image preview that is happening on the browser. Im pretty new to FLASK/HTML/javascript and still dont understand most of their concepts. What's going on here? What am I missing?
Think of Flask as a program that accepts data and returns data. In this case, when your browser accesses the appropriate URL, Flask sends you back the HTML.
Once your browser has the HTML it then loads the CSS and JavaScript, assuming they are on different files to the HTML. Otherwise they all load together.
When the browser has the HTML, CSS, and JavaScript, it is completely independent from Flask. There is no communication whatsoever between them.
That means that here, using JavaScript, you can change the page contents and Flask will not know about it. It will not care about any page changes.
However when you press "Submit" on your form, you are getting all the form contents and sending them to Flask. Since you have a file input, there is a period of time during which your browser is sending the file to Flask.
During this period, the page remains static so your preview must've shown before you click Submit. Remember that the page already has the photo at this point, so you do not need Flask in order to show a preview.
After the upload has finished, Flask will send you some more data:
A redirect, which sends the browser to another page (effectively moving you away from your form and preview).
Some more HTML, which effectively clears your page and replaces it with a new page.
Hope this helps!
I have a simple form on my webpage.
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input id="browse" type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
Now, my problem is when I browse and choose file to upload it shows which file I am going to upload.
But when I click on Choose file and browse again and this time if I change my mind mid way and hit cancel then old selected image also goes away.
On canceling it removes already selected image also.
Why does this happen and what to do if I want my old selected image to be selected after browsing again and canceling?
Thanks in advance!
Thanks to #Carlos , added this javascript
var input = document.getElementById("browse");
var selectedFile;
input.addEventListener('change', updateImageDisplay);
function updateImageDisplay() {
if(input.files.length==0) {
input.files = selectedFile;
}
else {
selectedFile = input.files;
}
}
and now it works fine! you can check here.
I want to make a form where when a user types into an input box, the input box changes the ending of the src of my image (which is an API image).
So the image code looks like this:
<img src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&size=100x100" />
I need the input from the textbox to go after the data= and before the &size=100x100
I have tried a couple of ways of accomplishing this but haven't quite got it:
$(function() {
$('#linktextbox').onchange( function() {
window.location = document.getElementById('baseUrl').attr('href') + '/' + $('#linktextbox').val();
return false;
});
});
I have also tried:
var link = document.getElementById("baseUrl");
link.href = "http://api.qrserver.com/v1/create-qr-code/?data="+document.getElementById('linktextbox')+"&size=100x100"
Any help is appreciated!
You can do it like this.
Obviously you need an input and something to confirm the user action like the button I added.
edit: In order to not abuse the server that generates the image I have deliberately chosen not to use a keyUp event.
When you click the button the small piece of Javascript updates the src of the image tag.
I used IDs to identify the HTML elements, but there are a number of different ways to find a specific element.
function updateQR (){
document.getElementById('image').src = "https://api.qrserver.com/v1/create-qr-code/?data=" + encodeURIComponent(document.getElementById('textInput').value) + "&size=100x100";
}
<input id="textInput" type="text">
<br>
<button onclick="updateQR()">Update QR code</button>
<br>
<br>
<img id="image" src="" />
Here the code in plain JavaScript
function updateQr(ele){
document.getElementById("qr").src = "https://api.qrserver.com/v1/create-qr-code/?data="+encodeURIComponent(ele.value)+"&size=100x100/";
}
<input type="textbox" value="HelloWorld" onKeyUp="updateQr(this)"/><br/><br/>
<img id="qr" src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&size=100x100/">
I am trying to upload an image in html page using the <input type="file"> element. I want to use the uploaded image to replace another image on the page. However, the control does not pass onto the java script function. Am trying to find out why the control does not pass. Below is the code I am using:
<label>Upload a Picture</label
<img src="unknown_person.jpg" height="250" width="250"></img>
<div>
<form name="image1" enctype="multipart/form-data" action="/" method="POST" onsubmit="return UploadPic()">
<input type="file" name="imgfile"></input>
</form>
</div>
Thanks in advance.
You can't intercept a file upload in Java Script. The file has to be uploaded to the server, and then the page has to be rerendered
One approach would be using AJAX to query the backend on where the image was uploaded.
Like so
var pullImage = function()
{
// do ajax work
return image ? propagateHTML('element', image.uri) : fallback();
}
var propagateHTML = function(id, uri)
{
document.getElementById(id).innerHTML = uri;
}