Show file name with css and javascript - javascript

I have just javascript and css. But want to show the uploaded file name
Googled a lot
So I have this as css:
.metadata .filename{
font-size: 10px;
color: red;
display: inline-block;
}
and this is the js code:
var messagetext = '';
messagetext += '<span class="metadata">' + '<span class="filename">' + file.name + '</span>';
But if I do a console.log(file.name) then I see the name of the uploaded file in the console.
But I dont see it in the view.
Thank you
this is the whole function:
$('body').on('change', '#upload-input', function () {
var halloText = 'file';
var files = $(this).get(0).files;
if (files.length > 0) {
// create a FormData object which will be sent as the data payload in the
// AJAX request
var formData = new FormData();
// loop through all the selected files and add them to the formData object
for (var i = 0; i < files.length; i++) {
var file = files[i];
var message = buildMessage(myUserId, new Date().toISOString(), '<div class="imagepreview"><canvas id="progress' + imagecounter + '" width="80" height="80"></canvas><img id="image' + imagecounter + '"/></div>', 'sent');
message.classList.add('imagesender');
message.classList.add('imagesender' + imagecounter);
conversation.appendChild(message);
//processImages();
conversation.scrollTop = conversation.scrollHeight;
var myCanvas = document.getElementById('progress' + imagecounter);
var circle = new ProgressCircle({
canvas: myCanvas,
});
var percentComplete = 0.65;
circle.addEntry({
minRadius: 30,
fillColor: 'rgba(0, 0, 0, 0.5)',
progressListener: function () {
return percentComplete; // between 0 and 1
}
});
circle.start(33);
var extn = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase();
if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
reader.id = imagecounter;
reader.onload = function (e) {
var imageid = imagecounter;
document.getElementById("image" + e.currentTarget.id).src = e.target.result;
};
reader.readAsDataURL(file);
} else {
// No filereader support... so no preview
}
}
imagecounter++;
// add the files to formData object for the data payload
formData.append('uploads[]', file, file.name);
}
formData.append('Token', SessionInfo.ImageToken);
formData.append('RoomId', currentRoom.RoomId);
dbgMessage(formData);
$.ajax({
url: apipath + '/devices/UploadData',
type: 'POST',
data: formData,
processData: false,
contentType: false,
done: function (data) {
},
error: function(jqXHR, textStatus, errorThrown ){
//show error as a message
var message = buildMessage(myUserId, new Date().toISOString(), jqXHR.responseText, 'error');
conversation.appendChild(message);
conversation.scrollTop = conversation.scrollHeight;
},
xhr: function () {
// create an XMLHttpRequest
var xhr = new XMLHttpRequest();
// listen to the 'progress' event
xhr.upload.addEventListener('progress', function (evt) {
if (evt.lengthComputable) {
// calculate the percentage of upload completed
percentComplete = evt.loaded / evt.total;
if (percentComplete == 1) {
var messagetext = '';
messagetext += '<span class="metadata">' + '<span class="filename">' + file.name + '</span>';
// Handle complete
$('.imagesender').hide();
dbgMessage('Upload complete ');
console.log(file.name);
}
}
}, false);
return xhr;
}
});
}
});
So that the file name will be visible in the html view.
if I do this:
$('.messagewrapper').append('<span class="metadata">' + '<span class="filename">' + file.name + '</span>');
Then it works only after I upload file.
But When I refresh the page the image file is not visible anymore
Like this:
if (percentComplete == 1) {
// Handle complete
$('.imagesender').hide();
dbgMessage('Upload complete ');
}
$('.messagewrapper').append("<p>"+ file.name+"</p>")

append based on id like this should work:
$('#messagewrapper').append("<p>"+ file.name+"</p>")
You will append this only when the file is uploaded because it is inside the if statement:
percentComplete = evt.loaded / evt.total;
if (percentComplete == 1){ //==1 means uploaded
//your append is here
So move it outside the if statement.

Related

upload progress bar is jumpy

I've been working on an upload progress bar. The problem is, I can't seem to clean up the motion. It's jumpy, and I think it comes down to not understanding the finer details up the the upload process. What can I do to make this motion smoother?
This script has two movements, progressBarDisp is the target for the upload itself. Then it has a second bar for ajax upon files being processed and receiving a confirmation from the server.
My jumpy item is the progressBarDisp - I can't figure out why it's so jumpy.
$('input[type=file].dicomUpload').on("change", function() {
var files = $(this)[0].files;
//console.log(files);
var theCase = $(this).parent().find('input[name="theCase"]');
var casenum = $(this).parent().find('input[name="casenum"]');
var phase = $(this).parent().find('input[name="phase"]');
var vidnum = $(this).parent().find('input[name="vidNum"]');
processUpload(theCase, casenum, phase, files, vidnum);
});
function processUpload(theCase, casenum, phase, myfiles, vidnum) {
//console.log("Processing: "+vidnum.val());
var progressBox = $('#uploadDicomBox' + casenum.val() + '-' + vidnum.val()).find(".uploadprogress");
progressBox.slideDown();
var progressBarDisp = progressBox.find(".progressBarDisp");
var progressBarComp = progressBox.find(".progressBarComp");
var progressBarText = progressBox.find(".progressText");
progressBarText.text('Processing Upload.');
//run this in two parts - get the file sizes of the acceptable file types
var nBytes = 0;
var uploadedBytes = 0;
var completeBytes = 0;
var tempList = new Array();
$.each(myfiles, function(i, file) {
//console.log(file.name+" -- "+file.name.indexOf("."));
// do any file checking logic here
tempList.push(file);
});
myfiles = tempList;
$.each(myfiles, function(i, file) {
nBytes += file.size;
});
console.log("beginning uploads: " + theCase.val() + ", " + casenum.val() + ", " + phase.val() + ", " + nBytes + ", " + vidnum.val());
//console.log(myfiles);
if (myfiles.length < 1) {
progressBarText.text('No valid file types selected.');
}
//tracking variable
var maxup = 0;
$.each(myfiles, function(i, file) {
//file sizes are going to be an issue for me, these need to be individual file uploads
progressBarText.text('Upload Progress');
// Create a FormData object
var formData = new FormData();
formData.append('casenum', casenum.val());
formData.append('phase', phase.val());
formData.append('theCase', theCase.val());
formData.append('vidnum', vidnum.val());
formData.append('file', file);
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
maxup = Math.max(maxup, evt.loaded);
var percentComplete = (maxup / evt.total) * 100;
//Do something with upload progress here
//console.log("Upload Status: "+evt.loaded+" / "+evt.total+" -- "+((evt.loaded/evt.total)*100)+"%");
progressBarDisp.width(percentComplete + '%');
progressBarText.text('Upload Progress: Uploading ' + myfiles.length + ' files');
if (percentComplete == 100) {
progressBarText.text('Upload Progress: Upload Complete. Now Processing.');
}
}
}, false);
return xhr;
},
type: 'POST',
url: BASE_URL,
cache: false,
contentType: false,
processData: false,
data: formData,
beforeSend: function(xhr) {
uploadedBytes += file.size;
//progressBarDisp.width(((uploadedBytes/nBytes)*100)+'%');
progressBarText.text('Upload Progress: Uploading ' + myfiles.length + ' files');
},
success: function(result) {
console.log(result);
var resJSON = JSON.parse(result);
if (resJSON.status == "success") {
completeBytes += file.size;
processed = Math.round((completeBytes / nBytes) * myfiles.length);
progressBarComp.width(Math.round((processed / myfiles.length) * 100) + '%');
progressBarText.text('Upload Progress: Processed ' + (processed) + ' of ' + myfiles.length + ' files');
/*if(myfiles.length == (i+1)){
progressBarText.text('Upload Progress: Complete');
}
else{
progressBarText.text('Upload Progress: Uploaded '+(i+1)+' of '+myfiles.length+' files');
}
*/
}
},
error: function(err) {
//console.log(err);
uploadedBytes += file.size;
progressBarDisp.width(((uploadedBytes / nBytes) * 100) + '%');
}
});
});
}

Have to wait for the second file upload request for the first one's data to send to AWS S3

Any help is greatly appreciated! I've spent so long searching but I haven't found a solution or a problem like mine...
I'm writing an Electron application, and as part of it, there is a section for the users to drag and drop files. I'm then taking that file and uploading it to AWS S3.
The first time I drag and drop it goes into my function but no request is sent out to AWS S3, I then drag and drop again and it sends out the expected request and saves the file however it's the first requests information (name, path & body), and from then on when I drag and drop the file it send outs the request every time but always with the previous request's info. It's like its one sequence behind....
This is the s3 code:
function submitNewFileS3(file, filepath) {
const AWS = require('aws-sdk');
AWS.config = new AWS.Config({
accessKeyId: localStorage.getItem("accessKeyId"),
secretAccessKey: localStorage.getItem("secretAccessKey"),
region: 'eu-west-2'
});
var upload = new AWS.S3.ManagedUpload({
params: {
Bucket: 'sampe-bucket',
Key: filepath, // File name you want to save as in S3
Body: file
}
});
return upload.promise();
}
How I call the function:
var reader = new FileReader();
reader.onload = function (e2) {
// finished reading file data.
finishUploading(e2.target.result);
}
function finishUploading(url) {
// strip off the data: url prefix to get just the base64-encoded bytes
var data;
if (url.indexOf('data:image') > -1) {
data = url.replace(/^data:image\/\w+;base64,/, "");
} else if (url.indexOf('data:application') > -1) {
data = url.replace(/^data:application\/\w+;base64,/, "");
}
//only firing after sencon upload
var buf = Buffer.from(data, 'base64');
var filePathS3 = directory + (fileName).replace(/\-/g, "_").replace(/ /g, "_");
submitNewFileS3(buf, filePathS3).then(function (response) {
console.log(response);
}).catch(function (response) {
console.log(response);
});
}
reader.readAsDataURL(f); // start reading the file data.
Does anyone have any suggestions - I'm going out of my mind...I've tried so many tutorials and solutions and they all work...on the second call...
I've double checked all the required data is ready before making the request.
Many thanks in advance!
EDIT - more of what's going on in my main before sending my file to be uploaded:
function handleDrop(e) {
e.stopPropagation();
e.preventDefault();
var directory;
if (e.target.id == 'drop_zone_overview') {
//placed in general area, check which folders are showing to get dir
console.log(e);
//get whats visible
var whatPath;
$(".icon").each(function () {
if (this.style.display != 'none') {
whatPath = this.id;
}
});
//pick one and check what root we're in
var pathArray = whatPath.split('-');
console.log(pathArray);
} else if (e.target.id == 'drop_zone_individual') {
//placed on top of folder, check dir
directory = (e.target).getAttribute('data-targetfolder');
console.log(directory);
}
var files = e.dataTransfer.files,
folder;
for (var i = 0, f; f = files[i]; i++) { // iterate in the files dropped
if (!f.type && f.size % 4096 == 0) {
// The file is a folder
folder = true;
} else {
// The file is not a folder
folder = false;
}
const fs = require('fs');
console.log(f);
var fileName = f.name;
var reader = new FileReader();
reader.onload = function (e2) {
// finished reading file data.
finishUploading(e2.target.result);
}
function finishUploading(url) {
// strip off the data: url prefix to get just the base64-encoded bytes
var data;
if (url.indexOf('data:image') > -1) {
data = url.replace(/^data:image\/\w+;base64,/, "");
} else if (url.indexOf('data:application') > -1) {
data = url.replace(/^data:application\/\w+;base64,/, "");
}
var buf = Buffer.from(data, 'base64');
var filePathS3 = directory + (fileName).replace(/\-/g, "_").replace(/ /g, "_");
submitNewFileS3(buf, filePathS3).then(function (response) {
console.log(response);
}).catch(function (response) {
console.log(response);
});
}
reader.readAsDataURL(f); // start reading the file data.
uploadedFiles.push(f);
}
uploadedFiles.forEach(function (file) {
var pathKey = directory + (file.name).replace(/\-/g, "_");
pathKey = pathKey.replace(/ /g, "_").replace(/\//g, '-').replace(/\./g, '__');
if ($('#' + pathKey).length) {
//filename already exists in directory
alert(file.name + ' already exists in folder ' + directory);
} else {
var displayDiv;
if (file.type == 'image/png') {
//image
//add to directory
displayDiv = '<img id="' + pathKey + '" class="fileInfo thumb file-type file-type-img" src="' + URL.createObjectURL(file) + '" ondblclick="preview_image(this)"/>'
} else if (file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
//xlsx doc
displayDiv = '<div id="' + pathKey + '" class="fileInfo thumb file-type file-type-xlsx" data-downloadLink="' + URL.createObjectURL(file) + '" ></div>';
} else if (file.type == 'application/pdf') {
//pdf doc
displayDiv = '<div id="' + pathKey + '" class="fileInfo thumb file-type file-type-pdf" data-downloadLink="' + URL.createObjectURL(file) + '" ></div>';
} else if (file.type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
//word doc
displayDiv = '<div id="' + pathKey + '" class="fileInfo thumb file-type file-type-docx" data-downloadLink="' + URL.createObjectURL(file) + '" </div>';
console.log('its a doc');
} else if (file.type == 'application/x-zip-compressed') {
//zip file doc
displayDiv = '<div id="' + pathKey + '" class="fileInfo thumb file-type file-type-zip" data-downloadLink="' + URL.createObjectURL(file) + '" </div>';
} else if (file.type == '') {
//folder
console.log('what typep is this~~~~~ ' + file.type);
file.name = file.name + '/';
}
//save to folder array
if (file.type == 'application/x-zip-compressed' || file.type == '') {
var htmlTemplate = [
getHtml([
'<li id=' + pathKey.replace(/ /g, "_").replace(/\//g, '-').replace(/\./g, '__') + ' class="icon folderItems fileInfo thumb" data-downloadLink="directory_' + pathKey + '" ondblclick="viewAlbum(this.id)" style="display:none">',
'<i id="drop_zone_individual" data-targetFolder="' + pathKey + '" class="folders fas fa-folder" style="font-size: 115px; color: rgb(13, 36, 60); cursor: pointer;"></i>',
'<div class="folderLabel" style="text-align:center">' + file.name + '</div>',
'</li>'
])
];
folders.push({
Key: directory + (file.name).replace(/\-/g, "_").replace(/ /g, "_"),
LastModified: file.lastModifiedDate,
Size: file.size,
});
} else {
//append to ui file list
var htmlTemplate = [
getHtml([
'<li id=' + pathKey + ' class="icon downloadableItem" style="display:none">',
'<span>',
'<div style="text-align:center">',
displayDiv,
'</div>',
'<div style="text-align:center">',
'<span>',
file.name,
'</span>',
'</div>',
'</span>',
'</li>'
])
];
//save to folder list
folders.push({
Key: directory + (file.name).replace(/\-/g, "_").replace(/ /g, "_"),
LastModified: file.lastModifiedDate,
Size: file.size,
signedUrl: URL.createObjectURL(file)
});
}
localStorage.setItem("s3Objects", JSON.stringify(folders));
$('#photoAlbumViewerList').append(htmlTemplate);
console.log(folders);
$("#" + pathKey).click(function (e) {
getAlbumInfo(this.id);
if (e.shiftKey) {
if ($(this).hasClass('thumb')) {
$(this).removeClass('thumb').addClass('thumbChecked');
$(this).css("border", "2px solid #c32032");
// $(this).attr("data-downloadLink");
links.push($(this).attr("data-downloadLink"));
if (links.length != 0) {
$('.download').css("display", "block");
}
} else if ($(this).hasClass('thumbChecked')) {
$(this).removeClass('thumbChecked').addClass('thumb');
$(this).css("border", "2px solid white");
var itemtoRemove = $(this).attr('src');
links.splice($.inArray(itemtoRemove, links), 1);
console.log(links);
if (links.length == 0) {
$('.download').css("display", "none");
}
}
}
});
}
});
uploadedFiles = [];
e.target.classList.remove('drop_zone_hovered');
$('#drop_zone_text').hide();
}
As an FYI - the issue lied where I reinitialised AWS and S3 variables, it wasn't needed as I set it at the start of launch and reinitialising it slowed it all down while it remade the connection!

FormData content length Limitation in Jquery, Ajax When sending Large Image Files In Using Array with FormData

I have 3 Image or Multiple Images Array whose total size is approx. 29mb or above. I am try to post it on server Side using Ajax with Form data. But It shows error when i try to post large data using FormData in MVC is there any solution. when i try to post data it shows error on client side means go into the request.fail section
This is My Jquery Code
var filess = new Array();
var num = 4;
var IsAlready = false;
$(document).ready(function() {
document.getElementById('pro-image').addEventListener('change', readImage, false);
$( ".preview-images-zone" ).sortable();
$(document).on('click', '.image-cancel', function() {
debugger;
let no = $(this).data('no');
let Id = this.id;
$(".preview-image.preview-show-"+no).remove();
for (var i = 0; i < filess.length; i++) {
debugger;
filess = $.grep(filess, function(value) {
return value.name != Id;
});
}
});
});
function readImage() {
if (window.File && window.FileList && window.FileReader) {
var files = event.target.files;
var output = $(".preview-images-zone");
for (var i = 0; i < files.length; i++) {
$.grep(filess, function (n) {
if (n.name == files[i].name) {
IsAlready = true;
}
})
if (IsAlready)
{
alert("Same Name File Exist");
$("#pro-image").val('');
IsAlready = false;
return false;
}
}
var anyWindow = window.URL || window.webkitURL;
for (var i = 0; i < files.length; i++) {
filess.push(files[i]);
var file = null;
file = files[i];
if (!file.type.match('image')) continue;
var objectUrl = anyWindow.createObjectURL(files[i]);
var html = '<div class="preview-image preview-show-' + num + '" >' +
'<div class="image-cancel" data-no="' + num + '" id="' + files[i].name + '">x</div>' +
'<div class="image-zone"><img id="pro-img-' + num + '" src="' + objectUrl + '"></div>' +
'</div>';
output.append(html);
num = num + 1;
window.URL.revokeObjectURL(files[i]);
}
$("#pro-image").val('');
}
else {
console.log('Browser not support');
}
}
$("#submit").click(function () {
event.preventDefault();
debugger;
var url = "/Administration/CreateAlbum";
var albumName = $("#AlbumName").val();
var albumDescription = $("#AlbumDescription").val();
var IsActive = $("#IsActive").val();
var filess = new Array();
var data = new FormData();
data.append('albumName', albumName);
data.append('albumDescription', albumDescription);
data.append('IsActive', IsActive);
$("#submit").prop("disabled", true);
for (var i = 0; i < filess.length; i++) {
data.append('image', filess[i] );
}
var request = $.ajax({
url: url,
enctype: 'multipart/form-data',
type: 'POST',
processData: false,
contentType: false,
cache: false,
timeout: 600000,
data: data
});
request.done(function (response) {
$("#resultCode").html(response.ResultCode);
$("#resultMessage").html(response.ResultMessage);
$('#reasonCode').val("");
$('#quantity').val("");
$('#inventoryCode').val("");
$('#unitCost').val("");
});
request.fail(function (jqXHR, textStatus) {
alert("Request failed: " + textStatus);
});
});
As discussed, you need to set the maxAllowedContentLength in the web.config
<system.webServer>
<security>
<requestFiltering>
<requestLimits maxAllowedContentLength="YOUR SIZE" />
</requestFiltering>
</security>
</system.webServer>
thanks
For large file upload.
ini_set('upload_max_filesize', '10M'); ini_set('post_max_size', '10M');
your files array is blank and no need to specify enctype. Here in Ajax
var files = array();
if you have multiple files,then append like
data.append('image[]', filess[i] );
var filess = new Array();
var num = 4;
var IsAlready = false;
$(document).ready(function() {
document.getElementById('pro-image').addEventListener('change', readImage, false);
$( ".preview-images-zone" ).sortable();
$(document).on('click', '.image-cancel', function() {
debugger;
let no = $(this).data('no');
let Id = this.id;
$(".preview-image.preview-show-"+no).remove();
for (var i = 0; i < filess.length; i++) {
debugger;
filess = $.grep(filess, function(value) {
return value.name != Id;
});
}
});
});
function readImage() {
if (window.File && window.FileList && window.FileReader) {
var files = event.target.files;
var output = $(".preview-images-zone");
for (var i = 0; i < files.length; i++) {
$.grep(filess, function (n) {
if (n.name == files[i].name) {
IsAlready = true;
}
})
if (IsAlready)
{
alert("Same Name File Exist");
$("#pro-image").val('');
IsAlready = false;
return false;
}
}
var anyWindow = window.URL || window.webkitURL;
for (var i = 0; i < files.length; i++) {
filess.push(files[i]);
var file = null;
file = files[i];
if (!file.type.match('image')) continue;
var objectUrl = anyWindow.createObjectURL(files[i]);
var html = '<div class="preview-image preview-show-' + num + '" >' +
'<div class="image-cancel" data-no="' + num + '" id="' + files[i].name + '">x</div>' +
'<div class="image-zone"><img id="pro-img-' + num + '" src="' + objectUrl + '"></div>' +
'</div>';
output.append(html);
num = num + 1;
window.URL.revokeObjectURL(files[i]);
}
$("#pro-image").val('');
}
else {
console.log('Browser not support');
}
}
$("#submit").click(function () {
event.preventDefault();
debugger;
var url = "/Administration/CreateAlbum";
var albumName = $("#AlbumName").val();
var albumDescription = $("#AlbumDescription").val();
var IsActive = $("#IsActive").val();
var filess = new Array();
var data = new FormData();
data.append('albumName', albumName);
data.append('albumDescription', albumDescription);
data.append('IsActive', IsActive);
$("#submit").prop("disabled", true);
for (var i = 0; i < filess.length; i++) {
data.append('image', filess[i] );
}
var request = $.ajax({
url: url,
enctype: 'multipart/form-data',
type: 'POST',
processData: false,
contentType: false,
cache: false,
timeout: 600000,
data: data
});
request.done(function (response) {
$("#resultCode").html(response.ResultCode);
$("#resultMessage").html(response.ResultMessage);
$('#reasonCode').val("");
$('#quantity').val("");
$('#inventoryCode').val("");
$('#unitCost').val("");
});
request.fail(function (jqXHR, textStatus) {
alert("Request failed: " + textStatus);
});
});

Uploading files to azure storage from client

I have read a lot of already existing questions on uploading a file to azure storage directly from client-side/browser. The one I am implementing is from this blog by gaurav mantri. In this blog he splits the SAS url into path and query and then append file name to the path and then stiched the query again to it. I have SAS url which doesn't have any query. I just have url like this
This SAS url has the file name also appended in it. In the blog he appends blockId and blockList etc. Do it really need to do that? If not how should I make PUT request? Just using my SAS url would work?
Update: I have included query parameter (SAS token) as "URL?SAS-TOKEN". Now I am getting error like this
Error
dll.vendor.js:44368 PUT https://triggerbackendnormal.blob.core.windows.net/backend-media/a07d312c-6…Vhgoxw/NmD2AeSo4qVhBntrI04xJo1tsqfKJA/7bmQ%3D&comp=block&blockid=undefined 400 (Value for one of the query parameters specified in the request URI is invalid.)CORS
CORS Rules Setup in portal:
JS code:
handleFileSelect(e) {
var that = this
maxBlockSize = 256 * 1024;
currentFilePointer = 0;
totalBytesRemaining = 0;
files = e.target.files;
selectedFile = files[0];
console.log(selectedFile.name)
console.log(selectedFile.size)
console.log(selectedFile.type)
var fileSize = selectedFile.size;
if (fileSize < maxBlockSize) {
maxBlockSize = fileSize;
console.log("max block size = " + maxBlockSize);
}
totalBytesRemaining = fileSize;
if (fileSize % maxBlockSize == 0) {
numberOfBlocks = fileSize / maxBlockSize;
} else {
numberOfBlocks = parseInt(fileSize / maxBlockSize, 10) + 1;
}
console.log("total blocks = " + numberOfBlocks);
// $("#fileName").text(selectedFile.name);
// $("#fileSize").text(selectedFile.size);
// $("#fileType").text(selectedFile.type);
var baseUrl = 'https://example.blob.core.windows.net/backend-m/a07d312c-6e7a-4281-9e4f-050f5afc4609.mp4?sr=b&se=2017-05-04T15%3A07%3A30Z&sp=w&sv=2016-05-31&sig=SVhgoxw/NmD2AeSo4qVhBntrI04xJo1qfKJA/7bmQ%3D'
submitUri = baseUrl
console.log(submitUri);
this.uploadFileInBlocks();
}
//var fileContent = selectedFile.slice(currentFilePointer, currentFilePointer + maxBlockSize);
//currentFilePointer =+ maxBlockSize;
uploadFileInBlocks() {
if (totalBytesRemaining > 0) {
console.log("current file pointer = " + currentFilePointer + " bytes read = " + maxBlockSize);
var fileContent = selectedFile.slice(currentFilePointer, currentFilePointer + maxBlockSize);
var blockId = blockIdPrefix + this.pad(blockIds.length, 6);
console.log("block id = " + blockId);
blockIds.push(btoa(blockId));
reader.readAsArrayBuffer(fileContent);
currentFilePointer += maxBlockSize;
totalBytesRemaining -= maxBlockSize;
if (totalBytesRemaining < maxBlockSize) {
maxBlockSize = totalBytesRemaining;
}
} else {
this.commitBlockList();
}
}
commitBlockList() {
var uri = submitUri + '&comp=blocklist';
console.log(uri);
var requestBody = '<?xml version="1.0" encoding="utf-8"?><BlockList>';
for (var i = 0; i < blockIds.length; i++) {
requestBody += '<Latest>' + blockIds[i] + '</Latest>';
}
requestBody += '</BlockList>';
console.log(requestBody);
$.ajax({
url: uri,
type: "PUT",
data: requestBody,
beforeSend: function (xhr) {
//xhr.setRequestHeader('x-ms-blob-content-type', selectedFile.type);
//xhr.setRequestHeader('Content-Length', requestBody.length);
},
success: function (data, status) {
console.log(data);
console.log(status);
},
error: function (xhr, desc, err) {
console.log(desc);
console.log(err);
}
});
}
pad(number, length) {
var str = '' + number;
while (str.length < length) {
str = '0' + str;
}
return str;
}
render(){
reader.onloadend = function (evt) {
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
var uri = submitUri + '&comp=block&blockid=' + blockIds[blockIds.length - 1];
var requestData = new Uint8Array(evt.target.result);
$.ajax({
url: uri,
type: "PUT",
data: requestData,
processData: false,
beforeSend: function(xhr) {
xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
// xhr.setRequestHeader('Content-Length', requestData.length);
},
success: function (data, status) {
console.log(data);
console.log(status);
bytesUploaded += requestData.length;
var percentComplete = ((parseFloat(bytesUploaded) / parseFloat(selectedFile.size)) * 100).toFixed(2);
console.log(percentComplete)
this.uploadFileInBlocks();
},
error: function(xhr, desc, err) {
console.log(desc);
console.log(err);
}
});
}
};
return (
<label htmlFor='myInput'>
<input id="myInput" type="file" ref={(ref) => this.upload = ref} style={{visibility: 'hidden'}} onChange={this.handleFileSelect.bind(this)}/>
<FloatingActionButton
className="floatingButton"
backgroundColor='#fb802a'
onClick={(e) => this.upload.click() }>
<ContentAdd />
</FloatingActionButton>
</label>
)
}
I have SAS url which doesn't have any query. I just have url like this
'https://exapmplename.blob.core.windows.net/backend/a074281-9e4f-050f5afc4609.mp4'
This is not a SAS URL. It is simply a URL for the blob. A SAS URL has Shared Access Signature parameters like sig, se, sv etc. appended to the URL as querystring parameters. I would suggest you create a SAS URL and use that. In order to upload a blob, the SAS URL must have Write permission.
In the blog he appends blockId and blockList etc. Do it really need to
do that?
It depends! If you're uploading blob without splitting the file in blocks using Put Blob REST API, then you need not do that. However if you need to split the file into blocks and use Put Block and Put Block List REST API, then you have to do that.
If not how should I make PUT request?
If your file is small and have good Internet speed, then you really need not split the file in smaller chunks and upload a file in one go using Put Blob REST API.
For ReactJS, this is how it should be done
handleFileSelect(e) {
var that = this
maxBlockSize = 256 * 1024;
currentFilePointer = 0;
totalBytesRemaining = 0;
files = e.target.files;
selectedFile = files[0];
console.log(selectedFile.name)
console.log(selectedFile.size)
console.log(selectedFile.type)
var fileSize = selectedFile.size;
if (fileSize < maxBlockSize) {
maxBlockSize = fileSize;
console.log("max block size = " + maxBlockSize);
}
totalBytesRemaining = fileSize;
if (fileSize % maxBlockSize == 0) {
numberOfBlocks = fileSize / maxBlockSize;
} else {
numberOfBlocks = parseInt(fileSize / maxBlockSize, 10) + 1;
}
console.log("total blocks = " + numberOfBlocks);
// $("#fileName").text(selectedFile.name);
// $("#fileSize").text(selectedFile.size);
// $("#fileType").text(selectedFile.type);
var baseUrl = 'https://example.blob.core.windows.net/backend-media/e7581d7b-a59d-47eb-b8aa-6b6799179b36.mp4?sv=2016-05-31&sr=b&se=2017-05-09T18%3A26%3A07Z&sp=w&sig=TlS/a9RgVT/j7BHztjFZSF2L2skno3Sko%3D'
submitUri = baseUrl
console.log(submitUri);
this.uploadFileInBlocks();
}
loadEnd(evt){
var that = this;
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
var uri = submitUri + '&comp=block&blockid=' + blockIds[blockIds.length - 1];
var requestData = new Uint8Array(evt.target.result);
$.ajax({
url: uri,
type: "PUT",
data: requestData,
processData: false,
beforeSend: function(xhr) {
xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
// xhr.setRequestHeader('Content-Length', requestData.length);
},
success: function (data, status) {
console.log(data);
console.log("hi" + status);
bytesUploaded += requestData.length;
var percentComplete = ((parseFloat(bytesUploaded) / parseFloat(selectedFile.size)) * 100).toFixed(2);
console.log(percentComplete)
that.uploadFileInBlocks();
},
error: function(xhr, desc, err) {
console.log(desc);
console.log(err);
}
});
}
}
uploadFileInBlocks() {
if (totalBytesRemaining > 0) {
console.log("current file pointer = " + currentFilePointer + " bytes read = " + maxBlockSize);
var fileContent = selectedFile.slice(currentFilePointer, currentFilePointer + maxBlockSize);
var blockId = blockIdPrefix + this.pad(blockIds.length, 6);
console.log("block id = " + blockId);
blockIds.push(btoa(blockId));
reader.readAsArrayBuffer(fileContent);
reader.onloadend = this.loadEnd.bind(this);
currentFilePointer += maxBlockSize;
totalBytesRemaining -= maxBlockSize;
if (totalBytesRemaining < maxBlockSize) {
maxBlockSize = totalBytesRemaining;
}
} else {
this.commitBlockList();
}
}
commitBlockList() {
var uri = submitUri + '&comp=blocklist';
console.log(uri);
var requestBody = '<?xml version="1.0" encoding="utf-8"?><BlockList>';
for (var i = 0; i < blockIds.length; i++) {
requestBody += '<Latest>' + blockIds[i] + '</Latest>';
}
requestBody += '</BlockList>';
console.log(requestBody);
$.ajax({
url: uri,
type: "PUT",
data: requestBody,
beforeSend: function (xhr) {
//xhr.setRequestHeader('x-ms-blob-content-type', selectedFile.type);
//xhr.setRequestHeader('Content-Length', requestBody.length);
},
success: function (data, status) {
console.log(data);
console.log("hi" + status);
},
error: function (xhr, desc, err) {
console.log(desc);
console.log(err);
}
});
}
pad(number, length) {
var str = '' + number;
while (str.length < length) {
str = '0' + str;
}
return str;
}
render(){
reader.onloadend = function (evt) {
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
var uri = submitUri + '&comp=block&blockid=' + blockIds[blockIds.length - 1];
var requestData = new Uint8Array(evt.target.result);
$.ajax({
url: uri,
type: "PUT",
data: requestData,
processData: false,
beforeSend: function(xhr) {
xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
// xhr.setRequestHeader('Content-Length', requestData.length);
},
success: function (data, status) {
console.log(data);
console.log(status);
bytesUploaded += requestData.length;
var percentComplete = ((parseFloat(bytesUploaded) / parseFloat(selectedFile.size)) * 100).toFixed(2);
console.log(percentComplete)
this.uploadFileInBlocks();
},
error: function(xhr, desc, err) {
console.log(desc);
console.log(err);
}
});
}
};
return (

Get number of files dropped in html5 file upload

i am a newbie with jquery and i was playing with this plugin. i am using it with asp.net and I want to get number of file dropped in it. I tried a bit but failed to get. Any idea?
Here is the code of script.js:
$(function () {
var dropbox = $('#dropbox'),
message = $('.message', dropbox);
dropbox.filedrop({
paramname: 'pic',
maxfiles: 100,
maxfilesize: 100,
//url: '/Uploader.asmx/Upload',
url: '/Default.aspx',
uploadFinished: function (i, file, response) {
$.data(file).addClass('done');
var count = file.size;
alert(count);
},
error: function (err, file) {
switch (err) {
case 'BrowserNotSupported':
showMessage('Your browser does not support HTML5 file uploads!');
break;
case 'TooManyFiles':
alert('Too many files! Please select 5 at most! (configurable)');
break;
case 'FileTooLarge':
alert(file.name + ' is too large! Please upload files up to 2mb (configurable).');
break;
default:
break;
}
},
//Called before each upload is started
// beforeEach: function (file) {
//if (!file.type.match(/^image\//)) {
//alert('Only images are allowed!');
// alert(file.name);
// Returning false will cause the
// file to be rejected
// return true;
// }
//},
uploadStarted: function (i, file, len) {
createImage(file);
},
progressUpdated: function (i, file, progress) {
$.data(file).find('.progress').width(progress);
}
});
var template = '<div class="preview">' +
'<span class="imageHolder">' +
'<img style="" />' +
'<p class="background: rgba(0, 0, 0, 0.75);"></p>' +
'<span class="uploaded"></span>' + // background: rgba(0, 0, 0, 0.75);
'</span>' +
'<div class="progressHolder">' +
'<div class="progress"></div>' +
'</div>' +
'</div>';
function createImage(file) {
var preview = $(template),
image = $('img', preview),
paragraph = $('p', preview);
var reader = new FileReader();
image.width = 100;
image.height = 100;
reader.onload = function (e) {
// e.target.result holds the DataURL which
// can be used as a source of the image:
//alert(e.target.result);
// $('p#filename').removeAttr('id');
// $('p').attr('id', 'filename' + num + '');
// $('p#filename').text(file.name);
paragraph.attr('id', 'filename').text(file.name);
image.attr('src', '../assets/img/fileicon.png');
num = num + 1;
};
// Reading the file as a DataURL. When finished,
// this will trigger the onload function above:
reader.readAsDataURL(file);
message.hide();
preview.appendTo(dropbox);
// Associating a preview container
// with the file, using jQuery's $.data():
$.data(file, preview);
}
function showMessage(msg) {
message.html(msg);
}
});
It's in the input element. I had a fiddle that uses it in a change event, in which case it's in event.target.files.
edit: should include the fiddle: http://jsfiddle.net/jorgthuijls/uh95y/3/ try it by attaching PDF's.
The relevant code here. This loops over the files and creates "preview" boxes for PDF's but you can just count it as well. files below is an array.
var filesInput = document.getElementById("files");
filesInput.addEventListener("change", function (event) {
var files = event.target.files; //FileList object
var output = document.getElementById("result");
for (var i = 0; i < files.length; i++) {
var file = files[i];
var reader = new FileReader();
reader.addEventListener("load", function (event) {
//stick some rubbish here to check the type of
//file loaded and adjust "type" below. See the
// 'reader' object, it has all that.
var div = document.createElement("div");
div.innerHTML
= '<object data="'
+ reader.result
+ '" type="application/pdf">'
+ '<embed src="'
+ reader.result
+ '" type="application/pdf" />'
+ '</object>';
output.insertBefore(div, null);
});
//Read the image
reader.readAsDataURL(file);
}
});

Categories

Resources