I want to make a feature on a website from which anyone can upload an image from desktop into a server get a link.
Like used in https://stackoverflow.com where it is uploaded and the link is pasted.
I want the link.
Is there any way to work on it?
You can use Ospry.io - here is a usage example:
<script src="https://code.ospry.io/v1/ospry.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<form id="up-form">
<input type="file" multiple />
<button type="submit">Upload image</button>
</form>
<script>
var ospry = new Ospry('YOUR_PUBLIC_KEY');
$('#up-form').submit(function(e) {
e.preventDefault();
ospry.up({
form: this,
imageReady: function(err, metadata, i) {
alert("Find file at: " + metadata.url);
}
});
});
</script>
P.S. - you need to sign up to get your API key.
Related
I am trying to figure out how to import a file into ALASQL from a file input. There is documentation on how to do this but my client wants to have to press a load button vs when choosing the file.
Here is the documentation from ALASQL:
<script src="xlsx.core.min.js"></script>
<p>Select CSV file to read:</p>
<input id="readfile" type="file" onchange="loadFile(event)"/>
<script>
function loadFile(event) {
alasql('SELECT * FROM FILE(?,{headers:true})',[event],function(data){
// Process data here
});
}
</script>
https://github.com/agershun/alasql/wiki/How%20to%20upload%20form%20for%20txt%20and%20xlsx%20in%20javascript
My client wants something like this:
<script src="xlsx.core.min.js"></script>
<p>Select CSV file to read:</p>
<input id="readfile" type="file"/>
<button onclick="loadfile()">Load</button>
<script>
function loadFile() {
var file=document.getElementById('readfile').files[0]
alasql('SELECT * FROM FILE(?,{headers:true})',[file],function(data){
// Process data here
});
}
</script>
I have tried various methods to achieve this but nothing has worked so far. Some of the methods I have tried include creating custom jQuery events and the above example.
I have found a SF article that asks something similar but was unanswered.
Loading CSV file with AlaSQL and JQuery
Thank you
One answer I came up with is to split the loadfile process into two functions such as this:
<script src="xlsx.core.min.js"></script>
<p>Select CSV file to read:</p>
<input id="readfile" type="file" onchange="loadfile(event)"/>
<button onclick="loadfile2()">Load</button>
<script>
var loadFileTempData=[];
function loadFile() { //load data file into variable
var file=document.getElementById('readfile').files[0]
alasql('SELECT * FROM FILE(?,{headers:true})',[file],function(data){
loadFileTempData=data;
});
}
function loadFile2(){ //process data from variable
var data=loadFileTempData;
loadFileTempData=[];
// Process data here
}
</script>
All I get is the images name not the file tree like
C:/document/picture/dangit.gif
Okay, I need to add more text for some reason because stack overflow thinks that I should type more then I need to type so just ignore this text this is so retarded.
<html>
<head>
<script>
function getData() {
var text = document.getElementById("textarea").value;
var text = text.replace(/\r?\n/g, "<br />");
document.getElementById("display").innerHTML = text;
}
function picture() {
var picture = document.getElementById("picture").value;
document.getElementById("pDisplay").src = picture;
document.getElementById("purl").innerHTML = picture;
}
</script>
<title>Gettings a textbox formatting</title>
</head>
<body>
<textarea id="textarea" onkeypress="getData()" autofocus></textarea>
<p id="display">You havnt typed anything yet</p>
<input type="file" id="picture" />
<button onclick="picture()">get the picture from the box</button>
<p id="purl">picture url</p>
<img id="pDisplay" />
</body>
</html>
That's impossible because javascript can't access local storage like hard disk.
The only option is to upload image to the server and then reference it with URL.
If you are using PHP you could start with the documentation http://www.php.net/manual/en/features.file-upload.php
And you need to enclose your <input type="file"> with <form> and provide <input type="submit"> to send the file to the server.
This is not possible due to security restrictions. JavaScript in browser has no access to the File System.
It doesn't work on any of the main browsers (except IE) for security related restrictions
I am using the dropbox chooser (https://www.dropbox.com/developers/dropins/chooser/js) as part of a form. Once the user has selected a file, I would like to display that file name next to the chooser button.
It would also be nice to include a 'remove' link to clear the selection.
i assume that this will be done using javascript/jquery. Any help would be greatly appreciated.
EDIT: An earlier answer used e.files[0].link.split('/').pop(), but there's a field for this already! It's called name. Updated below.
The file name is one of the things returned, so you can just do this:
var url = e.files[0].link;
var name = e.files[0].name;
As to how to display it on the page, I would suggest adding a span somewhere and setting its text. Try this code, which does that and a couple other nice things (like handle the submit button's disabled state and resetting the Chooser button to its "unused" state):
<form>
<input id="chooser" type="dropbox-chooser" name="selected-file" data-link-type="direct" style="visibility: hidden;"/>
<p id="chosen" style="display:none">Chosen file: <span id="filename"></span> (<a id="remove" href="#">remove</a>)</p>
<input type="submit" id="submit" disabled />
</form>
<script>
$(function () {
$('#chooser').on('DbxChooserSuccess', function (e) {
var url = e.originalEvent.files[0].link;
var filename = e.originalEvent.files[0].name;
$('#chosen').show();
$('#filename').text(filename);
$('#submit').prop('disabled', false);
});
$('#remove').click(function (e) {
e.preventDefault();
$('#chosen').hide();
$('.dropbox-chooser').removeClass('dropbox-chooser-used');
$('#submit').prop('disabled', true);
});
});
</script>
EDIT
I should point out that the dropbox-chooser-used class is just something I noticed. Since it's not documented, that may change in a future version of the library. The rest should be fine.
I've seen several ways to display image preview but none of them seem to work or they work only in FF/Chrome.
Trying to keep it simple:
Markup:
<input type="file" id="logo-upload" onchange="changePreview();"/>
<br/>
<img src='#Url.Image("logo.png")' alt="Preview" id="logo-preview"/>
Javascript:
<script type="text/javascript">
function changePreview() {
var input = $('#logo-upload').val();
$('#logo-preview').attr('src', input)
.width(150)
.height(50);
}
</script>
When debugging input shows the correct local image path but preview never shows up.
Why and how can I get this to work (in all browsers ) ?
Thanks.
Try setting the $('#logo-upload').change(function(){}) instead of using onChange. I think that's a good start. Then put the jQuery inside $(document).ready(function(){}). That could be another issue, if you're setting the script before the elements exist on the page.
If you can post more code, it would be beneficial.
Also, for IE, you're going to run into permissions issues that are on the user, which you don't have control over (at least in this situation). So, in those cases, you'll either have to upload the image first, to get the image from the server, OR they'll have to change their security settings to allow for this type of content to be accessed.
<input type="file" id="logo-upload" />
<br/>
<img src="#Url.Image('logo.png')" alt="Preview" id="logo-preview"/>
<script type="text/javascript">
$(document).ready(function() {
$('#logo-upload').change(function() {
var input = $(this).val();
$('#logo-preview').attr('src', input).width(150).height(50);
})
});
</script>
In my web app,I need to upload a single file when a user selects that file and stay on the same html page.I am looking for a non-flash solution which probably uses jquery.and something which works on firefox.
By googling,I came across many plugins,most of them using elaborate html pages for showing input widgets / upload status indicators etc.I need something which I can use like this,using ajax.
mypage.html
<input type="file" id="myfileselect" > </input>
myjs.js
$(document).ready(function(){
$('#myfileselect').change(function(e){
//upload the file somehow
}
});
Is this possible?Can someone illustrate how I can do this?
I use this plugin in all my projects. Once the user selects the file, you simply call
$('#yourForm).ajaxSubmit()
and it will asynchronously upload your file.
http://jquery.malsup.com/form/
In your case, you would do it like this:
HTML
<form id="myForm">
<input type="file" id="myfileselect" > </input>
</form>
JQuery
$(document).ready(function(){
//set the options here
var options = {
url : 'yourScript.php',
method : 'post'
};
$('#myfileselect').change(function(e){
$('#myForm').ajaxSubmit(options);
}
});