We Keep Coding

Dropzone Js get file data (csv. xlsx) before Uploading

I'm new to Dropzone Js and i want to upload a file, process data to json then upload to my Flask server.
i appreciate any kind of help, thanks.
var id = '#kt_dropzone_4';
// set the preview element template
var previewNode = $(id + " .dropzone-item");
previewNode.id = "";
var previewTemplate = previewNode.parent('.dropzone-items').html();
previewNode.remove();
var myDropzone4 = new Dropzone(id, { // Make the whole body a dropzone
url: "/Upload", // Set the url for your upload script location
headers: {
'x-csrftoken': $('#csrf_Upload').val()
},
method: "post",
parallelUploads: 5,
acceptedFiles: ".xls, .xlsx, .csv",
previewTemplate: previewTemplate,
maxFilesize: 2, // Max filesize in MB
autoQueue: false, // Make sure the files aren't queued until manually added
previewsContainer: id + " .dropzone-items", // Define the container to display the previews
clickable: id +
" .dropzone-select" // Define the element that should be used as click trigger to select files.
});
myDropzone4.on("addedfile", function (file) {
// Hookup the start button
file.previewElement.querySelector(id + " .dropzone-start").onclick = function () {
myDropzone4.enqueueFile(file);
};
$(document).find(id + ' .dropzone-item').css('display', '');
$(id + " .dropzone-upload, " + id + " .dropzone-remove-all").css('display', 'inline-block');
//remove duplicates
if (this.files.length) {
var i, len;
for (i = 0, len = this.files.length; i < len - 1; i++) // -1 to exclude current file
{
if (this.files[i].name === file.name && this.files[i].size === file.size && this.files[i]
.lastModifiedDate.toString() === file.lastModifiedDate.toString()) {
this.removeFile(file);
$('#muted-span').text('Duplicates are not allowed').attr('class', 'kt-font-danger kt-font-bold').hide()
.fadeIn(1000)
setTimeout(function () {
$('#muted-span').hide().text('Only Excel and csv files are allowed for upload')
.removeClass('kt-font-danger kt-font-bold').fadeIn(500);
}, 2500);
}
}
}
});
// Update the total progress bar
myDropzone4.on("totaluploadprogress", function (progress) {
$(this).find(id + " .progress-bar").css('width', progress + "%");
});
myDropzone4.on("sending", function (file, response) {
console.log(file)
console.log(response)
// Show the total progress bar when upload starts
$(id + " .progress-bar").css('opacity', '1');
// And disable the start button
file.previewElement.querySelector(id + " .dropzone-start").setAttribute("disabled", "disabled");
});
// Hide the total progress bar when nothing's uploading anymore
myDropzone4.on("complete", function (progress) {
var thisProgressBar = id + " .dz-complete";
setTimeout(function () {
$(thisProgressBar + " .progress-bar, " + thisProgressBar + " .progress, " + thisProgressBar +
" .dropzone-start").css('opacity', '0');
}, 300)
});
// Setup the buttons for all transfers
document.querySelector(id + " .dropzone-upload").onclick = function () {
myDropzone4.enqueueFiles(myDropzone4.getFilesWithStatus(Dropzone.ADDED));
};
// Setup the button for remove all files
document.querySelector(id + " .dropzone-remove-all").onclick = function () {
$(id + " .dropzone-upload, " + id + " .dropzone-remove-all").css('display', 'none');
myDropzone4.removeAllFiles(true);
};
// On all files completed upload
myDropzone4.on("queuecomplete", function (progress) {
$(id + " .dropzone-upload").css('display', 'none');
});
// On all files removed
myDropzone4.on("removedfile", function (file) {
if (myDropzone4.files.length < 1) {
$(id + " .dropzone-upload, " + id + " .dropzone-remove-all").css('display', 'none');
}
});
I have not found yet a way to get the uploaded data from dropzonejs. I tried to read the file with FileReader but it's not a binary data (correct me if i'm wrong).
I need to process data on myDropzone4.on("addedfile", function (file){})
and return it as a json format if possible.

I found an answer for it, I just needed to find the input type file.when using dropzone.js either you find the input type file in the html page or in their javascript file, where i found that the input type file was being created with a class to hide this element :
var setupHiddenFileInput = function setupHiddenFileInput() {
if (_this3.hiddenFileInput) {
_this3.hiddenFileInput.parentNode.removeChild(_this3.hiddenFileInput);
}
_this3.hiddenFileInput = document.createElement("input");
_this3.hiddenFileInput.setAttribute("type", "file");
_this3.hiddenFileInput.setAttribute("id", "123");
if (_this3.options.maxFiles === null || _this3.options.maxFiles > 1) {
_this3.hiddenFileInput.setAttribute("multiple", "multiple");
}
// _this3.hiddenFileInput.className = "dz-hidden-input";
}
so i gave it an id and bind an event to the input then i read the file with two functions depends on the format of the file uploaded, for csv files to json :
function getText(fileToRead) {
var reader = new FileReader();
reader.readAsText(fileToRead);
reader.onload = loadHandler;
reader.onerror = errorHandler;
}
function loadHandler(event) {
var csv = event.target.result;
process(csv);
}
function process(csv) {
// Newline split
var lines = csv.split("\n");
result = [];
var headers = lines[0].split(",");
for (var i = 1; i < lines.length - 1; i++) {
var obj = {};
//Comma split
var currentline = lines[i].split(",");
for (var j = 0; j < headers.length; j++) {
obj[headers[j]] = currentline[j];
}
result.push(obj);
}
console.log(result);
}
function errorHandler(evt) {
if (evt.target.error.name == "NotReadableError") {
alert("Canno't read file !");
}
}
Read excel files (xls,xlsx) format to json format:
var ExcelToJSON = function () {
this.parseExcel = function (file) {
var reader = new FileReader();
reader.onload = function (e) {
var data = e.target.result;
var workbook = XLSX.read(data, {
type: 'binary'
});
workbook.SheetNames.forEach(function (sheetName) {
// Here is your object
var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[
sheetName]);
var json_object = JSON.stringify(XL_row_object);
console.log(JSON.parse(json_object));
jQuery('#xlx_json').val(json_object);
})
};
reader.onerror = function (ex) {
console.log(ex);
};
reader.readAsBinaryString(file);
};
};
the event that will detect change on the input, detect file format then use one of those to get the result in a JSON format:
$(document).ready(function () {
$('input[type="file"]').on('change', function (e) {
// EXCEL TO JSON
var files = e.target.files;
console.log(files)
var xl2json = new ExcelToJSON();
xl2json.parseExcel(files[0]);
var fileName = e.target.files[0].name;
console.log('The file "' + fileName + '" has been selected.');
// CSV TO JSON
var files = e.target.files;
if (window.FileReader) {
getText(files[0]);
} else {
alert('FileReader are not supported in this browser.');
}
});
});
I hope this helps i'm using dropzonejs with keenthemes implementation.

How to add an attachement to an email (not stored in file disk)

I want to open outlook with an attachement (zip) using Javascript.
It's working fine if the file in in some directory in the computer client.
this.sendEmail = function (zip) {
try {
var theApp = new ActiveXObject("Outlook.Application");
var objNS = theApp.GetNameSpace('MAPI');
var theMailItem = theApp.CreateItem(0); // value 0 = MailItem
theMailItem.to = ('test#gmail.com');
theMailItem.Subject = ('test');
theMailItem.Body = ('test');
theMailItem.Attachments.Add(zip);
theMailItem.display();
}
catch (err) {
alert(err.message);
}
};
But What I want to do is to add the file that I have alredy in memory
this.SenddZip = function (docDescription, fileName) {
var zip = new JSZip();
for (var i = 0; i < docDescription.length; i++) {
var doc = docDescription[i];
zip.file(doc.core_documenttitle + doc.core_fileextension, doc.fileBase64, { base64: true });
}
Utils.sendEmail(zip);
// Generate the zip file asynchronously
zip.generateAsync({ type: "blob" })
.then(function (content) {
// Force down of the Zip file
var name = "documents";
if (fileName) {
name = fileName;
}
// location.href = "data:application/zip;base64," + content;
saveAs(content, name + ".zip");
Utils.sendEmail(xxxxxxxx);
});
};
If their is no solution for this :
Is their a way to download the document without the confirmation dialog ?
saveAs ask always for confirmation before to store the file.
Thank you

AJAX Requests to php script

So the problem is: a user uplaods a file. I use е.PreventDefault(); to prevent the page from refreshing after the upload. Under the file upload form i've made a list of all the user's file names. Obviously the newly uploaded file name isn't in the list. After refreshing the page it gets in the list, but the business logic is that the file's name should go in the list withouth refreshing the page.
function showNewFileProperies() {
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("results").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "../../app/Models/UserFiles.php" , true);
xhttp.send();
}
This is the request with which I thought my problem would be solved.
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class UserFiles extends Model{
protected $table = 'files';
public function getUserFiles(){
$getFiles = Filecontent::where('userid', Auth::id())->get();
foreach($getFiles as $getFile) {
$result = $getFile->filename;
return $result;
}
}
}
I'm using Laravel and Dropzone.js. The js code i put in the success event of dropzone.js

Sorry for the delay in response. Here is what I used to achieve what you are describing. Sorry for the bad indenting but this editor is really bad.
Dropzone.options.documentDropzone = {
paramName: "file",
dictDefaultMessage: "Drag your document over this box to upload or click here",
maxFilesize: 100, // MB
maxFiles: 10,
addRemoveLinks: true,
dictRemoveFile: 'Remove Attachment',
accept: function(file, done) {
done();
},
init: function() {
this.on("addedfile", function(file) {
busy_uploading = true;
});
this.on('removedfile', function(file){
remove_file(file.previewElement, file.fileID);
if(this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
busy_uploading = false;
}
});
this.on("complete", function (file) {
if(this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
busy_uploading = false;
}
});
},
success: function(file, response) {
response = JSON && JSON.parse(response) || $.parseJSON(response);
if(response.error) {
var node, _i, _len, _ref, _results;
var message = response.error;
file.previewElement.classList.add("dz-error");
_ref = file.previewElement.querySelectorAll("[data-dz-errormessage]");
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
node = _ref[_i];
_results.push(node.textContent = message);
}
return _results;
} else {
for(var i = 0; i < response.file_id.length; i++) {
file.fileID = response.file_id[i];
file.fileEXT = response.file_ext[i];
add_file_id(response.file_id[i]);
//You can add the uploaded item in your list here
}
return file.previewElement.classList.add("dz-success");
}
}
};
So this is roughly what I used. You can simply add the item on your list in the success function since that is where you will get the response from the server.
I did not include the php because it is just your basic upload script. This will work with as many files as you wish.
If you need more help just add a comment and I will try to assist you as best I can.

Actually I came up with this:
public function getCurrentFile(){
$userid = Auth::id();
$getFiles = File::where('userid', $userid)->orderBy('created_at', 'desc')->take(1)->get();
foreach($getFiles as $getFile) {
$result = $getFile;
$json = json_encode($result); //make it as json
return $json;
//echo $result;
}
}
Then I routed this model and in the js I've added:
success: function(file) {
$(function ()
{
$.ajax({
async: true,
url: "../public/currentfile",
dataType: 'json',
method:'get',
complete: function(data)
{
console.log(data.responseJSON);
var created_at = data.responseJSON['created_at'];
var filesize = data.responseJSON['filesize'];
var filename = data.responseJSON['filename'];
var fileid = data.responseJSON['fileid'];
$( "#results .tableheaders" ).after("<tr><td>" + fileid + "</td><td>" + filename + "</td><td>" + filesize + "</td><td>" + created_at + "</td></tr>");
}
});
});
if (file.previewElement) {
return file.previewElement.classList.add("dz-success");
}
}
And it seems to work...for now :D I'm not a JS guy and I don't even know how I managed to do this :D

Getting a File's MD5 on Dropzone.js

I would like to calculate an MD5 checksum of every image uploaded with Dropzone.js, this way the user can safely remove the correct image (I calculate the MD5 Checksum in php part).
I need to create the MD5 hash with another library (FastMD5 or another one), and then send it along with the data when remove button is clicked.
For now:
$Dropzone.autoDiscover = false;
// Dropzone class:
var myDropzone = new Dropzone("div#dropzonePreview", {
maxFiles:5,
url: "up",
acceptedFiles: ".png,.jpg,.gif,.jpeg",
maxFilesize: 6,
uploadMultiple: true,
addRemoveLinks: true,
removedfile: function(file) {
var name = file.name;
var idform = document.getElementById('idform').value; //for me
var hash= md5(file); // not tested
$.ajax({
type: 'POST',
url: 'del.php',
data:"filename="+name+"&idform="+idform+"&hash="+hash,
dataType: 'html'
});
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
}
});
The problem is that md5(file) is not working, I guess it isn't the data file, I tried to look for the data to calculate the hash but found nothing.

I'm sure there is a better way to do it, but I've made this and it's sending the right hash to my delete page (del.php), I've just realised that I will also need the hash to avoid the upload of the same file 2 times..
I've used SPARK-MD5.
Dropzone.autoDiscover = false;
// Dropzone class:
var myDropzone = new Dropzone("div#dropzonePreview", {
maxFiles:5,
url: "upload.php",
acceptedFiles: ".png,.jpg,.gif,.jpeg",
maxFilesize: 6,
uploadMultiple: true,
addRemoveLinks: true,
//to remove one file
removedfile: function(file) {
var name = file.name;
var idform = document.getElementById('idform').value; //for me
// START SPARKMD5
var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
chunkSize = 2097152, // Read in chunks of 2MB
chunks = Math.ceil(file.size / chunkSize),
currentChunk = 0,
spark = new SparkMD5.ArrayBuffer(),
fileReader = new FileReader();
fileReader.onload = function (e) {
console.log('read chunk nr', currentChunk + 1, 'of', chunks);
spark.append(e.target.result); // Append array buffer
currentChunk++;
if (currentChunk < chunks) {
loadNext();
} else {
console.log('finished loading');
// START DROPZONE PART
$.ajax({
type: 'POST',
url: 'del.php',
data:"filename="+name+"&idform="+idform+"&hash="+spark.end(), //spark.end is the MD5
dataType: 'html'
});
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
// END DROPZONE PART
}
};
fileReader.onerror = function () {
console.warn('oops, something went wrong.');
};
function loadNext() {
var start = currentChunk * chunkSize,
end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
}
loadNext();
// END SPARKMD5
}
});
I'm not sure about the necessity of fileReader.onerror and load next.
Anyway it's working when the need is to send the hash when the "remove" button is clicked, but i'm still looking for a better way to compare md5 before uploading.

jQuery dnd file upload for multiple targets

I'm using jQuery dnd file upload plugin for a project. All example of dnd uploader use id as a selector. For multiple items they used different dropzone declaration.
How can I change the plugin setting for multiple dropzone where the selector will be a class or something else to grab multiple elements with a single dropzone initiation?

Since this is using jQuery, couldn't you use the standard jQuery multiple selector method? It would look like this:
$("#drop1, #drop2, #drop3").dropzone();
Or if you are trying to do a class, you would do this:
$(".drop_zone").dropzone();
This isn't tested, and I have never used this plugin. I'm just assuming this would work since it is based off jQuery.
Since that isn't working, try replacing the code for jquery.dnd-file-upload.js with the following:
(function ($) {
$.fn.dropzone = function (options) {
var opts = {};
var uploadFiles = function (files) {
$.fn.dropzone.newFilesDropped(); for (var i = 0; i < files.length; i++) {
var file = filesi?;
// create a new xhr object var xhr = new XMLHttpRequest(); var upload = xhr.upload; upload.fileIndex = i; upload.fileObj = file; upload.downloadStartTime = new Date().getTime(); upload.currentStart = upload.downloadStartTime; upload.currentProgress = 0; upload.startData = 0;
// add listeners upload.addEventListener("progress", progress, false);
xhr.onload = function (event) {
load(event, xhr);
};
xhr.open(opts.method, opts.url); xhr.setRequestHeader("Cache-Control", "no-cache"); xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); xhr.setRequestHeader("X-File-Name", file.fileName); xhr.setRequestHeader("X-File-Size", file.fileSize); xhr.setRequestHeader("Content-Type", "multipart/form-data"); xhr.send(file);
$.fn.dropzone.uploadStarted(i, file);
}
};
var drop = function (event) {
var dt = event.dataTransfer; var files = dt.files;
event.preventDefault(); uploadFiles(files);
return false;
};
var log = function (logMsg) {
if (opts.printLogs) {
// console && console.log(logMsg);
}
};
// invoked when the input field has changed and new files have been dropped // or selected var change = function (event) {
event.preventDefault();
// get all files ... var files = this.files;
// ... and upload them uploadFiles(files);
};
var progress = function (event) {
if (event.lengthComputable) {
var percentage = Math.round((event.loaded 100) / event.total); if (this.currentProgress != percentage) {
// log(this.fileIndex + " --> " + percentage + "%");
this.currentProgress = percentage; $.fn.dropzone.fileUploadProgressUpdated(this.fileIndex, this.fileObj, this.currentProgress);
var elapsed = new Date().getTime(); var diffTime = elapsed - this.currentStart; if (diffTime >= opts.uploadRateRefreshTime) {
var diffData = event.loaded - this.startData; var speed = diffData / diffTime; // in KB/sec
$.fn.dropzone.fileUploadSpeedUpdated(this.fileIndex, this.fileObj, speed);
this.startData = event.loaded; this.currentStart = elapsed;
}
}
}
};
var load = function (event, xhr) {
var now = new Date().getTime(); var timeDiff = now - this.downloadStartTime; if (opts.onLoadComplete) {
opts.onLoadComplete(xhr.responseText);
} $.fn.dropzone.uploadFinished(this.fileIndex, this.fileObj, timeDiff); log("finished loading of file " + this.fileIndex);
};
var dragenter = function (event) {
event.stopPropagation(); event.preventDefault(); return false;
};
var dragover = function (event) {
event.stopPropagation(); event.preventDefault(); return false;
};
// Extend our default options with those provided. opts = $.extend({}, $.fn.dropzone.defaults, options);
var id = this.attr("id"); var dropzone = document.getElementById(id);
log("adding dnd-file-upload functionalities to element with id: " + id);
// hack for safari on windows: due to not supported drop/dragenter/dragover events we have to create a invisible <input type="file" /> tag instead if ($.client.browser == "Safari" && $.client.os == "Windows") {
var fileInput = $("<input>"); fileInput.attr({
type: "file"
}); fileInput.bind("change", change); fileInput.css({
'opacity': '0', 'width': '100%', 'height': '100%'
}); fileInput.attr("multiple", "multiple"); fileInput.click(function () {
return false;
}); this.append(fileInput);
} else {
dropzone.addEventListener("drop", drop, true); var jQueryDropzone = $("#" + id); jQueryDropzone.bind("dragenter", dragenter); jQueryDropzone.bind("dragover", dragover);
}
return this;
};
$.fn.dropzone.defaults = {
url: "", method: "POST", numConcurrentUploads: 3, printLogs: false, // update upload speed every second uploadRateRefreshTime: 1000
};
// invoked when new files are dropped $.fn.dropzone.newFilesDropped = function () { };
// invoked when the upload for given file has been started $.fn.dropzone.uploadStarted = function (fileIndex, file) { };
// invoked when the upload for given file has been finished $.fn.dropzone.uploadFinished = function (fileIndex, file, time) { };
// invoked when the progress for given file has changed $.fn.dropzone.fileUploadProgressUpdated = function (fileIndex, file,
newProgress) {
};
// invoked when the upload speed of given file has changed $.fn.dropzone.fileUploadSpeedUpdated = function (fileIndex, file,
KBperSecond) {
};
})(jQuery);
This was suggested by the user rik.leigh#gmail.com here http://code.google.com/p/dnd-file-upload/wiki/howto