Image uploading in Firebase shows error - javascript

var selectedfile;
function upload()
{
selectedfile= document.getElementById("file");
var filename=selectedfile.files.item(0).name;
var storageRef=firebase.storage().ref('/Images/'+filename);
var uploadTask=storageRef.put(selectedfile);
uploadTask.on('state_changed',function(snapshot){},function(errors){},
function(){
var downloadUrl=uploadTask.snapshot.downloadUrl;
console.log(downloadUrl);
});
}
<input type="file" name="fileid" id="file">
<button onclick="upload();" id="selbt">Upload</button>
While I am trying to upload images to my Firebase Storage it threw my some uncaught exception like:
It is saying invalid argument as 'put'. Can anyone please help in solving this issue.


<form method="post" enctype="multipart/form-data">
<div>
<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>
</div>
<div>
<button>Submit</button>
</div>
</form>


Try
var filename=selectedfile.files[0].name;

Related

"get ElementById" not working on firefox?

I can get the file name from file upload to the textarea in IE and Chrome.
But it not work on firefox, how can i solve this problem?
Many Thanks.
function takeName(event) {
let filename = event.path[0].files[0].name;
document.getElementById("txtComment").value = filename;
}
<form id="Apply" name="Apply" method="post" enctype="multipart/form-data" action="applyLeave.php">
Get upload filename to textarea:
<p><textarea rows="3" cols="30" name="txtComment" id="txtComment" class="valid"></textarea></p>
<p>Select image to upload: <input type="file" onchange="takeName(event)" name="fileToUpload" id="fileToUpload"></p>
<p><input type="submit" value="Submit" name="submit"></p>
</form>

document.getElementById() compatibility with any browser is unquestionable that isn't the problem. See this answer about .path compatibility with Firefox.
Replace event.path[0] with event.target.
function takeName(event) {
let filename = event.target.files[0].name;
document.getElementById("txtComment").value = filename;
}
<form id="Apply" name="Apply" method="post" enctype="multipart/form-data" action="applyLeave.php">
Get upload filename to textarea:
<p><textarea rows="3" cols="30" name="txtComment" id="txtComment" class="valid"></textarea></p>
<p>Select image to upload: <input type="file" onchange="takeName(event)" name="fileToUpload" id="fileToUpload"></p>
<p><input type="submit" value="Submit" name="submit"></p>
</form>

When I use in firefox that show event.path is undefined, I suggest you use event.target.files to get file name

putting image on background from input file url

<script>
var loadFile = function(event) {
var img=URL.createObjectURL(event.target.files[0]);
document.getElementById('Display1').style.backgroundImage= url(img);
};
</script>
<div class="HM1EI" id="Display1">
<button type="button" class="_1q_T1">
<label>
<input type="file" accept="image/*" name="image" id="file1" onchange="loadFile(event)" style="display: none;">
Add Media
</label>
</button>
</div>
I can't Upload the file on the background which I get from input type file.

You are not setting the background url correctly you should do it like this
document.getElementById('Display1').style.backgroundImage = `url('img_tree.png')`;
Put (url) in string

Get file name of image before upload - JQuery

I have a form to upload image with:
<div class="col-sm-4">
<input id="file_input" type="file" style="visibility: hidden; width: 0; height: 0" name="image[photo_new]" accept="image/*">
</div>
<div class="col-lg-8">
<div class="form-group row">
<label class="col-sm-3 control-label" for="title">
<label for="image_title">Title</label>
</label>
<div class="col-sm-9">
<input id="title" class="form-control" type="text" placeholder="Title" name="image[title]" maxlength="200">
</div>
</div>
</div>
I want when users click to #input_file area to choose image, then the after choosing file, the file name will display immediately in #title field. For example name.png should be name. I want to use JQuery to do this function but don't know how, any advises? Thank in advance.

You can use this.value to get the file value in a change event handler and then extract the name like
$('#file_input').change(function() {
//$('#title').val(this.value ? this.value.match(/([\w-_]+)(?=\.)/)[0] : '');
$('#title').val(this.files && this.files.length ? this.files[0].name.split('.')[0] : '');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="file_input" type="file" />
<input id="title" />

You can attach an event after the user chooses an image like this:
$(document).ready(function() {
$('#image').on('change', function(event) {
// and you can get the name of the image like this:
console.log(event.target.files[0].name);
});
});
If the html is like this:
<input type="file" id="image">

Use this sample code to show file name :
<input type="file" name="file" id="file" />
<button id="btn">Submit</button>
<div id="fname"></div>
$(function(){
$('#btn').on('click',function(){
var name = $('#file').val().split('\\').pop();
name=name.split('.')[0];
$('#fname').html(name);
});
})();
Here is Demo on jsfiddle

You can have name, size and type details of selected file using below code. have a look.
<form enctype="multipart/form-data">
<input id="file" type="file" />
<input type="submit" value="Upload" />
</form>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$('#file').change(function(){
var file = this.files[0];
name = file.name;
size = file.size;
type = file.type;
//your validation
});
</script>

Jquery: 1 button for choose file and file upload?

Sorry if this question is a bit confusing but I don't know how else i can explain it so please bear with me.
Basically, I need to use 1 button for choose file and once the file's chosen, the file gets uploaded automatically as opposed to the standard file input + submit button if that makes sense?
So the usual standard file upload is like this:
<form id="form" action="ajaxupload.php" method="post" enctype="multipart/form-data">
<input id="uploadImage" type="file" accept="image/*" name="image" />
<input id="button" type="submit" value="Upload">
</form>
is there any way so we can have something like this:
<form id="form" action="ajaxupload.php" method="post" enctype="multipart/form-data">
<input id="uploadImage" type="file" accept="image/*" name="image" />
</form>
and once the file's chosen from that dialog box that opens after clicking on the choose file (file input), the file gets uploaded?
I've seen this done on many sites and I just wonder how they do it.
Any help would be appreciated.

The below code should help you fix it
$("document").ready(function() {
$("#uploadImage").change(function() {
$('#form').submit();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form" action="ajaxupload.php" method="post" enctype="multipart/form-data">
<input id="uploadImage" type="file" accept="image/*" name="image" />
</form>

Best way to do this with preview:
<input type='file' />
<img id="myImg" src="#" alt="your image" />
$("#myImg").hide();
$(function () {
$(":file").change(function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});
function imageIsLoaded(e) {
$("#myImg").show();
$('#myImg').attr('src', e.target.result);
};
Codepen: http://codepen.io/anon/pen/aNqPbb

You can use this library Dropzone.js
Click the link below
http://www.dropzonejs.com/

Add a javascript change event the file input. inside the change function do your file upload
Also set the css for the #uploadImage to hidden
ie. #uploadimage{display:"none"}
eg in jquery
$( "#fileinput" ).change(function() {
//do the fileupload here
});
Hope this helps.

If you are using Bootstrap, you can create beautiful single button file inputs by using the Bootstrap Filestyle plugin.
This is one of the many effects you can create:
$(document).ready(function(){
// <script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script> include this file..
(function($){var nextId=0;var Filestyle=function(element,options){this.options=options;this.$elementFilestyle=[];this.$element=$(element)};Filestyle.prototype={clear:function(){this.$element.val("");this.$elementFilestyle.find(":text").val("");this.$elementFilestyle.find(".badge").remove()},destroy:function(){this.$element.removeAttr("style").removeData("filestyle");this.$elementFilestyle.remove()},disabled:function(value){if(value===true){if(!this.options.disabled){this.$element.attr("disabled","true");this.$elementFilestyle.find("label").attr("disabled","true");this.options.disabled=true}}else{if(value===false){if(this.options.disabled){this.$element.removeAttr("disabled");this.$elementFilestyle.find("label").removeAttr("disabled");this.options.disabled=false}}else{return this.options.disabled}}},buttonBefore:function(value){if(value===true){if(!this.options.buttonBefore){this.options.buttonBefore=true;if(this.options.input){this.$elementFilestyle.remove();this.constructor();this.pushNameFiles()}}}else{if(value===false){if(this.options.buttonBefore){this.options.buttonBefore=false;if(this.options.input){this.$elementFilestyle.remove();this.constructor();this.pushNameFiles()}}}else{return this.options.buttonBefore}}},icon:function(value){if(value===true){if(!this.options.icon){this.options.icon=true;this.$elementFilestyle.find("label").prepend(this.htmlIcon())}}else{if(value===false){if(this.options.icon){this.options.icon=false;this.$elementFilestyle.find(".icon-span-filestyle").remove()}}else{return this.options.icon}}},input:function(value){if(value===true){if(!this.options.input){this.options.input=true;if(this.options.buttonBefore){this.$elementFilestyle.append(this.htmlInput())}else{this.$elementFilestyle.prepend(this.htmlInput())}this.$elementFilestyle.find(".badge").remove();this.pushNameFiles();this.$elementFilestyle.find(".group-span-filestyle").addClass("input-group-btn")}}else{if(value===false){if(this.options.input){this.options.input=false;this.$elementFilestyle.find(":text").remove();var files=this.pushNameFiles();if(files.length>0&&this.options.badge){this.$elementFilestyle.find("label").append(' <span class="badge">'+files.length+"</span>")}this.$elementFilestyle.find(".group-span-filestyle").removeClass("input-group-btn")}}else{return this.options.input}}},size:function(value){if(value!==undefined){var btn=this.$elementFilestyle.find("label"),input=this.$elementFilestyle.find("input");btn.removeClass("btn-lg btn-sm");input.removeClass("input-lg input-sm");if(value!="nr"){btn.addClass("btn-"+value);input.addClass("input-"+value)}}else{return this.options.size}},placeholder:function(value){if(value!==undefined){this.options.placeholder=value;this.$elementFilestyle.find("input").attr("placeholder",value)}else{return this.options.placeholder}},buttonText:function(value){if(value!==undefined){this.options.buttonText=value;this.$elementFilestyle.find("label .buttonText").html(this.options.buttonText)}else{return this.options.buttonText}},buttonName:function(value){if(value!==undefined){this.options.buttonName=value;this.$elementFilestyle.find("label").attr({"class":"btn "+this.options.buttonName})}else{return this.options.buttonName}},iconName:function(value){if(value!==undefined){this.$elementFilestyle.find(".icon-span-filestyle").attr({"class":"icon-span-filestyle "+this.options.iconName})}else{return this.options.iconName}},htmlIcon:function(){if(this.options.icon){return'<span class="icon-span-filestyle '+this.options.iconName+'"></span> '}else{return""}},htmlInput:function(){if(this.options.input){return'<input type="text" class="form-control '+(this.options.size=="nr"?"":"input-"+this.options.size)+'" placeholder="'+this.options.placeholder+'" disabled> '}else{return""}},pushNameFiles:function(){var content="",files=[];if(this.$element[0].files===undefined){files[0]={name:this.$element[0]&&this.$element[0].value}}else{files=this.$element[0].files}for(var i=0;i<files.length;i++){content+=files[i].name.split("\\").pop()+", "}if(content!==""){this.$elementFilestyle.find(":text").val(content.replace(/\, $/g,""))}else{this.$elementFilestyle.find(":text").val("")}return files},constructor:function(){var _self=this,html="",id=_self.$element.attr("id"),files=[],btn="",$label;if(id===""||!id){id="filestyle-"+nextId;_self.$element.attr({id:id});nextId++}btn='<span class="group-span-filestyle '+(_self.options.input?"input-group-btn":"")+'"><label for="'+id+'" class="btn '+_self.options.buttonName+" "+(_self.options.size=="nr"?"":"btn-"+_self.options.size)+'" '+(_self.options.disabled?'disabled="true"':"")+">"+_self.htmlIcon()+'<span class="buttonText">'+_self.options.buttonText+"</span></label></span>";html=_self.options.buttonBefore?btn+_self.htmlInput():_self.htmlInput()+btn;_self.$elementFilestyle=$('<div class="bootstrap-filestyle input-group">'+html+"</div>");_self.$elementFilestyle.find(".group-span-filestyle").attr("tabindex","0").keypress(function(e){if(e.keyCode===13||e.charCode===32){_self.$elementFilestyle.find("label").click();return false}});_self.$element.css({position:"absolute",clip:"rect(0px 0px 0px 0px)"}).attr("tabindex","-1").after(_self.$elementFilestyle);if(_self.options.disabled){_self.$element.attr("disabled","true")}_self.$element.change(function(){var files=_self.pushNameFiles();if(_self.options.input==false&&_self.options.badge){if(_self.$elementFilestyle.find(".badge").length==0){_self.$elementFilestyle.find("label").append(' <span class="badge">'+files.length+"</span>")}else{if(files.length==0){_self.$elementFilestyle.find(".badge").remove()}else{_self.$elementFilestyle.find(".badge").html(files.length)}}}else{_self.$elementFilestyle.find(".badge").remove()}});if(window.navigator.userAgent.search(/firefox/i)>-1){_self.$elementFilestyle.find("label").click(function(){_self.$element.click();return false})}}};var old=$.fn.filestyle;$.fn.filestyle=function(option,value){var get="",element=this.each(function(){if($(this).attr("type")==="file"){var $this=$(this),data=$this.data("filestyle"),options=$.extend({},$.fn.filestyle.defaults,option,typeof option==="object"&&option);if(!data){$this.data("filestyle",(data=new Filestyle(this,options)));data.constructor()}if(typeof option==="string"){get=data[option](value)}}});if(typeof get!==undefined){return get}else{return element}};$.fn.filestyle.defaults={buttonText:"Choose file",iconName:"glyphicon glyphicon-folder-open",buttonName:"btn-default",size:"nr",input:true,badge:true,icon:true,buttonBefore:false,disabled:false,placeholder:""};$.fn.filestyle.noConflict=function(){$.fn.filestyle=old;return this};$(function(){$(".filestyle").each(function(){var $this=$(this),options={input:$this.attr("data-input")==="false"?false:true,icon:$this.attr("data-icon")==="false"?false:true,buttonBefore:$this.attr("data-buttonBefore")==="true"?true:false,disabled:$this.attr("data-disabled")==="true"?true:false,size:$this.attr("data-size"),buttonText:$this.attr("data-buttonText"),buttonName:$this.attr("data-buttonName"),iconName:$this.attr("data-iconName"),badge:$this.attr("data-badge")==="false"?false:true,placeholder:$this.attr("data-placeholder")};$this.filestyle(options)})})})(window.jQuery);
$(":file").filestyle({input: false});
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<input type="file" class="filestyle" data-input="false" data-buttonName="btn-info btn-xs" />

input file: write the name of the file in a text input with Javascript

I'm learning html and javascript and I wonder if it is possible to do the following: when uploading a file using a file input want the uploaded filename (without path) is written to a file input field .. Is this possible?. Below is my code but can not get any link which explain how to do it for newbies. Sorry if it is a very silly question, but I wonder if you can do only using javascript (not jQuery) and HTML without involving the server.
<html>
<head>
<script type="text/javascript">
(function alertFilename()
{
var thefile = document.getElementById('thefile');
//here some action to write the filename in the input text
}
</script>
</head>
<body>
<form>
<input type="file" id="thefile" style="display: none;" />
<input type="button" value="Browse File..." onclick="document.getElementById('thefile').click();" />
<br> <br>The name of the uploaded file is:
<input type="text" name="some_text" id="some_text" />
</form>
</body>
</html>

Here is a fully working example
JavaScript:
var filename;
document.getElementById('fileInput').onchange = function () {
filename = this.value.split(String.fromCharCode(92));
document.getElementById("some_text").value = filename[filename.length-1];
};
HTML:
<form>
<input type="file" id="fileInput" style="display: none;" />
<input type="button" value="Browse File..." onclick="document.getElementById('fileInput').click();" />
<br> <br>The name of the uploaded file is:
<input type="text" name="some_text" id="some_text" />
</form>
jsFiddle live example
Hope you find it helpful, Asaf

For the newcomers:
document.getElementById("thefile").onchange = function() {
document.getElementById("some_text").value = this.files[0].name;
};
/* BELOW FULLPATH VERSION (depending on browser)
document.getElementById("thefile").onchange = function () {
document.getElementById("some_text").value = this.value;
};*/
<form>
<input type="file" id="thefile" style="display: none;" />
<input type="button" value="Browse File..." onclick="document.getElementById('thefile').click();" />
<br>
<br>The name of the uploaded file is:
<input type="text" name="some_text" id="some_text" />
</form>

Just take the file input' value, split it and take the last index:
Filename = document.getElementById('fileinput').value.split('/') [2];// or the last index returned here since the last index will always be the file name
(Sorry that cant format my answer. I answered by a smartphone)

Categories