We Keep Coding

Error during uploading file in folder and database

Warning: Undefined array key "image"
Showing this error when I'm uploading files in folder and database, I guess my code has mistake.
HTML CODE
<form action="image.php" method="post">
<div class="row">
<div class="col">
<div class="avatar-upload">
<div class="avatar-edit">
<input type='file' id="imageUpload" name="image[]" accept=".png, .jpg, .jpeg" />
<label for="imageUpload"></label>
</div>
<div class="avatar-preview">
<div id="imagePreview" name="image[]"style="background-image: url('../../images/<?
=getuserimagesinfo($db,$user['id'])?>');">
</div>
</div>
</div>
</div>
</form>
Javascript
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imagePreview').css('background-image', 'url('+e.target.result +')');
$('#imagePreview').hide();
$('#imagePreview').fadeIn(650);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imageUpload").change(function() {
readURL(this);
});
PHP Code
$image_name=$_FILES['image']['name']; //Storing image name
$img_tmp=$_FILES['image']['tmp_name'];
print_r($image_name);
print_r($img_tmp);
If I am inserting name="image[]" in wrong input then please suggest me one, Thanks in advance

Picture delete/remove code syntax using cshtml (base64 image)

How can I put a delete icon to remove a base64 image record from database record? I've attached CSHTML section of image uploader and the Javascript for the uploader. I've also attached screenshot of the database record. Btw, I'm using C# MVC. Thank you in advance for the help.
The page
Database record
function Picture_Upload(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#Form_Account #PICTURE').val(e.target.result);
};
reader.readAsDataURL(input.files[0]);
$("#lable_file").html($(input).val().split("\\").splice(-1, 1)[0] || '#Language_List.Where(x => x.KEYWORD == "No_File_Chosen").First().VALUE');
}
}
<div class="col-lg-4 well well-sm">
Account Picture
<br /> #if (!String.IsNullOrEmpty(Model.PICTURE)) {
<img src='#Model.PICTURE' style="max-width:100%;max-height:100%" /> } else {
<img src="~/img/Logo_Blank.png" style="max-width:100%;max-height:100%;" /> }
<br /><br />
<div class="Toggle_Form_Account" style="display:none; width:100%">
#*<input id="file_upload" type="file" accept="image/gif, image/jpeg, image/png" onchange="Picture_Upload(this);" />*#
<button type="button" onclick="document.getElementById('file_upload').click()">#Language_List.Where(x => x.KEYWORD == "Choose_File").First().VALUE</button> <label for="file_upload" id="lable_file" style="font-weight: normal !important;">#Language_List.Where(x => x.KEYWORD == "No_File_Chosen").First().VALUE</label>
<input id="file_upload" type="file" style="display:none" accept="image/gif, image/jpeg, image/png" onchange="Picture_Upload(this);" />
</div>

Javascript - Image preview before upload. Needed on multiple instances on same page

I have a page that has multiple fields to upload images individually and I wanted a script that would allow the user to preview the image before submitting.
I used this script on the first field and it works fine.
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#main').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
However, it doesn't work for the remainder of the previews even if I make them unique. What should I do in order to copy the same script and have it work on multiple instances on the same page?
Update:
The html for the preview looks like this:
<div class="row">
<div class="col-md-3">
<h5>Main Photo:</h5>
<input class="form-control" type="file" name="main" onchange="readURL(this);" />
</div>
<div class="col-md-3">
<h6>Preview:</h6>
<img id='main' style="height:100px;" />
</div>
<div class="col-md-3">
<h5>Front Photo:</h5>
<input class="form-control" type="file" name="front" onchange="readURL(this);" />
</div>
<div class="col-md-3">
<h6>Preview:</h6>
<img id='front' style="height:100px;" />
</div>
</div>

Perhaps you could make use of the unique name attribute of the <input /> fields to access the specific/corresponding image element for previewing the file like so:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
// Use the input element's name attrbute to select and
// update the image element with matching id
$('#' + input.name).attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="row">
<div class="col-md-3">
<h5>Main Photo:</h5>
<input class="form-control" type="file" name="main" onchange="readURL(this);" />
</div>
<div class="col-md-3">
<h6>Preview:</h6>
<img id='main' style="height:100px;" />
</div>
<div class="col-md-3">
<h5>Front Photo:</h5>
<input class="form-control" type="file" name="front" onchange="readURL(this);" />
</div>
<div class="col-md-3">
<h6>Preview:</h6>
<img id='front' style="height:100px;" />
</div>
</div>

Preview a file (image) before it is uploaded, on multiple instances on the same page.
Just use image input field name to id for img to show. Check the simple and clean code below with demo to jsfiddle.
$("input[type=file]").change(function() {
readURL(this);
filename = this.files[0].name;
console.log(filename);
});
// image file upload preview
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#' + input.name).attr('src', reader.result);
}
reader.readAsDataURL(input.files[0]);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label>User Image</label>
<input type="file" name="user_image"> <br />
<img id="user_image" style="width:75px;" />
<hr />
<label>User Signature</label>
<input type="file" name="user_signature"> <br />
<img id="user_signature" style="width:75px;" />
</form>

i want to upload image into mysql but filename get empty

addcategory.php
<div class=col-md-12>
<div class="form-group">
<label for="image">Background Image</label>
<input type="file" id="uploadedimage" name="uploadedimage"
placeholder="Background Image" class="file" data-preview-file-type="text">
</div></div>
<div class=col-md-2><div class="form-group">
<button class="btn btn-large btn-primary" name="add" id="add" type="button"
onclick="newsubject();">Add</button>
</div></div>
**subject.js**
function newsubject()
{
var xmlhttp;
var subject=document.frmsubject.subject.value;
var uploadedimage=document.getElementById("uploadedimage").files[0].name;
var x="frm=nsubject&subject="+subject+"&uploadedimage="+uploadedimage;
xmlhttp.open("GET","ajax/newsubject.php?"+x,true);
xmlhttp.send();
}
**newsubject.php**
function nsubject()
{
$sub=$_GET['subject'];
$img=$_GET['uploadedimage'];
echo $img;
if(!empty($_FILES[$img]["name"]))
{
echo "hello";
$file_name=$_FILES[$img]["name"];
$temp_name=$_FILES[$img]["tmp_name"];
$imgtype=$_FILES[$img]["type"];
$ext= GetImageExtension($imgtype);
$imagename=date("d-m-Y")."-".time().$ext;
$target_path = "adminImage/".$imagename;
if(move_uploaded_file($temp_name, $target_path))
{
$query_upload="INSERT into tblcategory(categname,bimage)
VALUES('$sub','$target_path')";
$res=mysql_query($query_upload);
}
}
by clicking on button, newsubject will be called from js file. subject name and img will be passed to newsubject.php file and then image will be uploaded.but whie doing so m getting $_FILES[$img]["name"] empty. please help.

Upload and Display Images using HTML, JS and MONGODB

I have managed to load the image on my page using HTML and JS but I can't seem to post the image to my MongoDB and it won't show on my 'home' page.
HTML:
<div class="container">
<h1 style="text-align: center">Post a New Guitar</h1>
<div class="col-md-6">
<form action="/guitars" method="POST">
<div class="input-group">
<label>Item Name</label>
<div class="input-group">
<input class="form-control" type="text" name="name" placeholder="Name">
</div>
<label>Upload Image</label>
<div class="input-group">
<span class="input-group-btn">
<span class="btn btn-default btn-file">
Browse… <input type="file" id="imgInp">
</span>
</span>
<input type="text" class="form-control" readonly>
</div>
<img id="img-upload"/>
<div class="input-group">
<button class="btn btn-lg btn-primary btn-block">Submit!</button>
</div>
Go Back
</div>
JS:
$(document).ready( function() {
$(document).on('change', '.btn-file :file', function() {
var input = $(this),
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [label]);
});
$('.btn-file :file').on('fileselect', function(event, label) {
var input = $(this).parents('.input-group').find(':text'),
log = label;
if( input.length ) {
input.val(log);
} else {
if( log ) alert(log);
}
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img-upload').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});
});
When submitting the form, I want it to display the image that has been uploaded using JS and for it to be 'saved' to my database.

What do you mean by "post the image to MongoDB"? You shouldn't be saving image in the database.
What you want to do is when you upload in image, store it in a publicly accessible location in your server. What you save in the database is not the image itself but the location of the image on the server.
Image stored in the server:
/home/public/image.jpg
Image path stored in Mongo DB:
{
path: '/home/public/image.jpg'
}
When you go back to your html page, you just need to query the path of the image in Mongo DB and use that value as a source in your image tag.
`<img src="${path}" />`