Having image preview option, that show the thumb of selected images.
Consider the below HTML,
html:
<input type="file" multiple accept="image/x-png,image/gif,image/jpeg" title="Upload Image" id="gallery_img" name="roomimage[]" />
Code used for previewing image in browser:
$(document).ready(function() {
if (window.File && window.FileList && window.FileReader) {
$("#gallery").on("change", function(e) {
var fileName = document.getElementById("gallery").value;
var idxDot = fileName.lastIndexOf(".") + 1;
var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
//TO DO
var files = e.target.files,
filesLength = files.length;
for (var i = 0; i < filesLength; i++) {
var f = files[i]
var fileReader = new FileReader();
fileReader.onload = (function(e) {
var file = e.target;
$("<span class=\"imgPreview\">" +
"<img id=\"image\" name=\"image[]\" class=\"imageThumb\" src=\"" + e.target.result + "\"/>" +
"<span class=\"remove icon-error\" title=\"Close\"></span>" +
"</span>").insertAfter(".gallery_section");
$(".remove").click(function(){
$(this).parent(".imgPreview").remove();
});
});
fileReader.readAsDataURL(f);
}
}else{
alert("Only jpg/jpeg and png files are allowed!");
}
});
} else {
alert("Your browser doesn't support to File API")
}
});
While choosing files with the above html all works fine. like i can select multiple images and i can upload that multiple images via ajax.
ajax:
var formData = new FormData($("#room_form")[0]);
var url=$("#room_form").attr("action");
$.ajax({
method: "POST",
data: formData,
url: url,
cache: false,
contentType: false,
processData: false,
})
.success(function(data) {
loaderHide();
setTimeout(function() {
window.location.reload();
}, 1000);
}).
fail(function(data) {
loaderHide();
});
The all above works fine.
problem:
when i select 3 files. and im showing those 3 files in the preview.
again i select another 2 files, now preview shows total 5 files.
But in <input type="file" there will be only 2 files. i searched and found it is the default behavior.
Tried:
Preview image:
Preview code:
In the image source im having original image as base 64 encoded image. i need to send this image to php file. how can i do this?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<input type="file" multiple accept="image/x-png,image/gif,image/jpeg" title="Upload Image" id="gallery_img" name="roomimage" />
<div class="gallery_section">
</body>
<script>
$(document).on('change','#gallery_img',function(evt){
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
return;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
$('.gallery_section').append('<span class="imgPreview"><img id="image" name="image[]" class="imageThumb" src="'+e.target.result+'"><span class="remove icon-error" title="Close"></span></span>');
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
});
</script>
</html>
I have a small html file that is supposed to display the contents of a text file onto the screen. The text (values.txt) is in the same file as the html file. It appears that when it reads the contents it doesn't get the values as they don't appear in the alert.
here is the code
<html>
<head>
<!--<input type="file" id="fileinput" />-->
<script type="text/javascript">
function readSingleFile(file) {
var f = new File([""], "filename.txt", {type: "text/plain"})
if (f) {
var r = new FileReader();
r.onload = function(e) {
var contents = e.target.result;
var ct = r.result;
var words = ct.split(' ');
alert(words[0] + 'test'); //this alert goes off but no values from words[0] are displayed
}
r.readAsText(f);
} else {
alert("Failed to load file");
}
}
//readSingleFile('values.txt');
</script>
</head>
<body onload="readSingleFile('values.txt')">
</body>
</html>
what can I do in order to read a text file into a list / get this code snippet to work?
The main problem is that first of all you need to get the file for your function. Just passing the file's name as argument is not enough.
Also is better to use an input of type file instead body with an onload attribute.
I've refactored your code in order to get it works.
1. Use this on your Html and delete body onload attribute.
<input id="inp" type="file" />">
Add this function to an external js file or wrap it between script tag inside your html file.
function readSingleFile(evt) {
var f = evt.target.files[0];
if (f) {
var r = new FileReader();
r.onload = function(e) {
var contents = e.target.result;
alert( "Got the file.n"
+"name: " + f.name + "n"
+"type: " + f.type + "n"
+"size: " + f.size + " bytesn"
+ "starts with: " + contents.substr(1, contents.indexOf("n"))
);
}
r.readAsText(f);
} else {
alert("Failed to load file");
}
}
// this parts gets the file and keeps an eye for changes
document.getElementById('inp').addEventListener('change', readSingleFile,false);
I hope you may find this useful.
Unfortunately I did'nt get it to work with your approach either. As Antonio682 suggested, it would be better to do it with an input-field, but you may aswell try it with an ajax-call :
<html>
<head>
<!--<input type="file" id="fileinput" />-->
<script type="text/javascript">
function readSingleFile(file) {
var objXMLhttp = new XMLHttpRequest()
objXMLhttp.open("GET", file, true);
objXMLhttp.send();
objXMLhttp.onreadystatechange = function(){
if (objXMLhttp.readyState == 4){
if(objXMLhttp.status == 200) {
var arrContents = objXMLhttp.responseText.split("\n");
console.log(arrContents);
} else {
console.log("error");
}
}
}
}
</script>
</head>
<body onload="readSingleFile('values.txt')">
</body>
</html>
You might want to test it with Firefox, since Chromes security settings dont allow file-protocol requests.
You can read more about ajax calls here
In the following code I am trying to check if the file is selected or not from the hyperlink. When the file is selected for the first time the var fileName = $('#' + field_id).val(); is null but when the file is selected for the second time the file path is shown. What is wrong here?
<input type="file" id="new_rule_upload" name="new_rule_upload" style="visibility: hidden; width: 1px; height: 1px" />
Upload
function upload_file(field_id) {
var fileName = $('#' + field_id).val();
alert(fileName);
if (fileName != '') {
alert('selected')
} else {
alert('not selected');
}
}
I suggest attaching yourself to the change event of the input to you can be immediately notified.
$(function() {
$("#new_rule_upload").change(function (){
var fileName = $(this).val();
// Do something
});
});
use JQuery
$(function() {
$("#a_id").click(function() {
var fileName = $("#new_rule_upload").val();
alert(fileName);
if (fileName != '') {
alert('selected')
} else {
alert('not selected');
}
});
});
I have this JS code for uploading a .jpg file to firebase:
function handleFileSelect(evt) {
var f = evt.target.files[0];
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
var filePayload = e.target.result;
// Generate a location that can't be guessed using the file's contents and a random number
var hash = CryptoJS.SHA256(Math.random() + CryptoJS.SHA256(filePayload));
var f = new Firebase(firebaseRef + 'pano/' + hash + '/filePayload');
spinner.spin(document.getElementById('spin'));
// Set the file payload to Firebase and register an onComplete handler to stop the spinner and show the preview
f.set(filePayload, function() {
spinner.stop();
document.getElementById("pano").src = e.target.result;
$('#file-upload').hide();
// Update the location bar so the URL can be shared with others
window.location.hash = hash;
});
};
})(f);
reader.readAsDataURL(f);
}
$(function() {
$('#spin').append(spinner);
var idx = window.location.href.indexOf('#');
var hash = (idx > 0) ? window.location.href.slice(idx + 1) : '';
if (hash === '') {
// No hash found, so render the file upload button.
$('#file-upload').show();
document.getElementById("file-upload").addEventListener('change', handleFileSelect, false);
} else {
// A hash was passed in, so let's retrieve and render it.
spinner.spin(document.getElementById('spin'));
var f = new Firebase(firebaseRef + '/pano/' + hash + '/filePayload');
f.once('value', function(snap) {
var payload = snap.val();
if (payload != null) {
document.getElementById("pano").src = payload;
} else {
$('#body').append("Not found");
}
spinner.stop();
});
}
});
My js imports:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//cdn.firebase.com/v0/firebase.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/spin.js/1.2.7/spin.min.js"></script>
<script src="sha256.js"></script>
<script src="firepano.js"></script>
My html looks something like this:
<input type="file" accept="image/*" capture="camera" id="file-upload">
Of course this is just a piece, but somehow the js function isn't triggered when I select a file, only if I put the HTML code outside of my file in a separate file and leave only this input tag. Is there some other piece of code that can interfier in the selectfile function trigger?
Try this:
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="image">
<input type="submit" value="Upload">
</form>
I would like to know if it is possible to download files that have been uploaded with Dropzone. For example add to the file that are shown in the dropzone a link or a button to download.
The code for upload and to show the files already uploaded:
index.php
<html>
<head>
<link href="css/dropzone.css" type="text/css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="dropzone.min.js"></script>
<script>
Dropzone.options.myDropzone = {
init: function() {
thisDropzone = this;
$.get('upload.php', function(data) {
$.each(data, function(key,value){
var mockFile = { name: value.name, size: value.size };
thisDropzone.emit("addedfile", mockFile);
thisDropzone.emit("thumbnail", mockFile, "uploads/"+value.name);
});
});
thisDropzone.on("addedfile", function(file) {
var removeButton = Dropzone.createElement("<button>Remove</button>");
var _this = this;
removeButton.addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
_this.removeFile(file);
});
file.previewElement.appendChild(removeButton);
});
thisDropzone.on("removedfile", function(file) {
if (!file.serverId) { return; }
$.post("delete-file.php?id=" + file.serverId);
});
}
};
</script>
</head>
<body>
<form action="upload.php" class="dropzone" id="my-dropzone"></form>
</body>
</html>
upload.php
<?php
$ds = DIRECTORY_SEPARATOR;
$storeFolder = 'uploads';
if (!empty($_FILES)) {
$tempFile = $_FILES['file']['tmp_name'];
$targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;
$targetFile = $targetPath. $_FILES['file']['name'];
move_uploaded_file($tempFile,$targetFile);
} else {
$result = array();
$files = scandir($storeFolder);
if ( false!==$files ) {
foreach ( $files as $file ) {
if ( '.'!=$file && '..'!=$file) {
$obj['name'] = $file;
$obj['size'] = filesize($storeFolder.$ds.$file);
$result[] = $obj;
}
}
}
header('Content-type: text/json');
header('Content-type: application/json');
echo json_encode($result);
}
?>
any help will be much appreciated
Yes I found it possible by altering the dropzone.js file, not ideal for updates but only way I found that worked for me.
Add these 6 lines of code to the addedfile: function around line 539 note Ive marked the code that exists already
// the following line already exists
if (this.options.addRemoveLinks) {
/* NEW PART */
file._openLink = Dropzone.createElement("<a class=\"dz-open\" href=\"javascript:undefined;\">Open File</a>");
file._openLink.addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
window.open("http://www.mywebsite.com/uploadsdirectory/"+file.name);
});
/* END OF NEW PART */
// the following lines already exist
file._removeLink = Dropzone.createElement("<a class=\"dz-remove\" href=\"javascript:undefined;\">" + this.options.dictRemoveFile + "</a>");
file._removeLink.addEventListener("click", function(e) {
Then you'll need to edit the CSS with a class 'dz-open', to style the button.
myDropzone.on("success", function(file) {
var a = document.createElement('a');
a.setAttribute('href',"/uploads/" + file.fullname);
a.innerHTML = "<br>download";
file.previewTemplate.appendChild(a);
});
This can be accomplished using the the example below. You will still need to tweak it to your needs.
I want to display additional information after a file uploaded.
To use the information sent back from the server, use the success
event, like this:
Dropzone.options.myDropzone = {
init: function() {
this.on("success", function(file, responseText) {
// Handle the responseText here. For example,
// add the text to the preview element:
file.previewTemplate.appendChild(document.createTextNode(responseText));
});
}
};
Use this in init function after ajax call. I had the same issue. Solved using this.
$('.dz-details').each(function(index, element) {
(function(index) {
$(element).attr('id', "filename_" + index);
var selectFile = document.querySelector("#filename_" + index);
selectFile.addEventListener("click", function () {
window.open("http://localhost:8080/<<contextpath>>/pathtofile/" + $('#filename_' + index + '> div > span').text());
});
}(index));
});
you can also add a empty link to your images and when your upload is ready you can fetch the image-src and set it to your link ;)
<a href="#">
<img src="" data-dz-thumbnail/>
</a>
$("img.data-dz-thumbnail").each(function() {
$(this).closest("a").attr("href", $(this).attr("src"));
$(this).closest("a").attr("target", "_blank");
});
My code is something like this.
success: function(file, rawResponse){
file.previewElement.onclick = function() {
alert(1);//do download
}
},
code is..
$('.dz-details').each(function(index, element) {
(function(index) {
$(element).attr("id", "filename_" + index);
$("#filename_" + index).on("click", function(){
window.open("URL/path/folder/" + $('#filename_' + index + '> div > span').text());
});
}(index));
});
Yes. I found a way by adding a custom preview template (adding a download button there and setting a data-file-id attribute). Then when defining the dropzone on the document ready, I searched for the last generated button element and modified the "data-file-id" attribute to save the file id.
I did the same on the 'success' event of dropzone.
After this I listened to the on click event of the download button and looked for the data-file-id attribute.
var oakDropzone = new Dropzone("#oakDropzone", {
url: "/trabajo/uploadFile",
init: function () {
var trabajoId = $("#trabajoId").val();
var getArchivosUrl = "/trabajo/getArchivosByTrabajo?trabajoId=" + trabajoId;
$("#fileLoader").show();
$.get(getArchivosUrl)
.done(function (response) {
for (var i = 0; i < response.data.length; i++) {
var file = response.data[i];
var fileData = { id: file.Id, name: file.Nombre, size: file.Tamaño, metadata: file.Metadata };
fileData.accepted = true;
oakDropzone.files.push(fileData);
oakDropzone.emit('addedfile', fileData);
oakDropzone.emit('thumbnail', fileData, 'data:' + response.data[i].Extension + ';base64,' + response.data[i].Preview);
oakDropzone.emit('complete', fileData);
$(oakDropzone.element[oakDropzone.element.length - 1]).attr('data-file-id', fileData.id);
}
$("#fileLoader").hide();
$('#oakDropzone #template .dz-details .actionButtons .downloadFile').on('click', function (event) {
event.preventDefault();
var archivoId = $(this).data('file-id');
var downloadUrl = "http://localhost:11154/trabajo/downloadFile?fileId=" + archivoId;
window.open(downloadUrl, 'blank');
});
}).catch(function (response) {
displayErrorToaster(response);
});
this.on("sending", function (file, xhr, formData) {
formData.append("Id", trabajoId);
formData.append("File", file);
});
this.on("success", function (file, response) {
file.id = response.data;
$(oakDropzone.element[oakDropzone.element.length - 1]).attr('data-file-id', file.id);
displaySuccessToaster(response);
});
this.on("removedfile", function (file) {
var deleteUrl = "/trabajo/RemoveFile?fileId=" + file.id;
$.post(deleteUrl)
.done(function (response) {
displaySuccessToaster(response);
}).catch(function (response) {
displayErrorToaster(response);
});
});
},
dictRemoveFileConfirmation: 'Realmente desea quitar el archivo seleccionado?',
dictDefaultMessage: '',
clickable: "#btnUploadFile",
previewTemplate: document.querySelector('#previews').innerHTML,
addRemoveLinks: false
});
This looks like the following image:
Sample Image
Hope this helps you!.
Mine looks like this, this will add "download" anchor after "remove" and it will directly download the file. ("self" is just dropzone selector)
var a = document.createElement('a');
a.setAttribute('href',existing_file.url);
a.setAttribute('rel',"nofollow");
a.setAttribute('target',"_blank");
a.setAttribute('download',existing_file.name);
a.innerHTML = "<br>download";
self.find(".dz-remove").after(a);