I used the Real Ajax Uploader (http://www.albanx.com/ajaxuploader) for uploading files from my js/jQuery based frontend to an ASP.net based server-side function - that works well by selecting files from the file-system as via the file dialog.
But now i need to find a way to set a file (i know the exact name and local path of the file) to upload automatically via a JS function instead of selecting it manually by clicking "select file" and selecting it from the file-dialog.
I think i have to manually create a file-object and push it into the files array (because of this description to get fiel infos : http://www.albanx.com/ajaxuploader/examples.php?e=6) but I can not manage setting a file and uploading it via my js function
Any help is highly appreciated
Thanks in advance
EDIT:
Thanks for responding Here is the code for taking a picture with the devices camera and pushing it into the files object of the uploader ...
that works so far, but i do not know how to update the fileuploader because it seems not to have a method to do this ...
so the file is in the file-list (file_list[0]) with all the parameters i think it dioes need, but it doesnt show up in the gui-file-list
regards Don
<code>
// photo functions
function getPhoto(){
navigator.camera.getPicture(onPhotoSuccess, onPhotoFail, {
quality: 50,
destinationType: Camera.DestinationType.NATIVE_URI
});
console.log("get photo ...");
}
function onPhotoSuccess(imageURI) {
console.log("photo taken ..." + imageURI);
$('#imgUploadArea').ajaxupload('clear');
var AU = $('#imgUploadArea').data('AU');
var file_list = AU.files; //get all the file objects
console.log("files: " + file_list.length);
// get the file object
window.resolveLocalFileSystemURL(imageURI, function(fileEntry) {
fileEntry.file(function(fileObj)
{
fileuploadShow("input.caseFormText.caseFormPhotoBtn");
// add the image
var capturedImg = new Object();
capturedImg.status = 0;
capturedImg.name = fileEntry.name;
capturedImg.path = fileEntry.fullPath;
capturedImg.size = fileObj.size;
capturedImg.filetype = "image.jpeg";
capturedImg.ext = "jpg";
capturedImg.AU = AU;
capturedImg.file = fileObj;
console.log("set image object to upload: " + capturedImg.path);
file_list.push(capturedImg);
console.log("files: " + file_list.length);
console.log("imgUpload ... imagedata path: " + file_list[0].path);
console.log("imgUpload ... imagedata name: " + file_list[0].name);
console.log("imgUpload ... imagedata status: " + file_list[0].status);
console.log("imgUpload ... imagedata size: " + file_list[0].size);
console.log("imgUpload ... imagedata filetype: " + file_list[0].filetype);
console.log("imgUpload ... imagedata ext: " + file_list[0].ext);
console.log("imgUpload ... imagedata file: " + JSON.stringify(file_list[0].file));
console.log("file added to filelist: " + file_list.length);
var files = $("#imgUploadArea").ajaxupload('getFiles');
console.log(JSON.stringify(files));
//$("#imgUploadArea").ajaxupload.('renderHtml');
//$("#imgUploadArea").ajaxupload('start');
});
});
}
function onPhotoFail(message) {
alert('Photo failed because: ' + message);
}
</code>
Don
Related
How to scan QRCode data from QRCode image(jpg/png) that is available in local System. From UI5 library im able to find BarcodeScanner. Using below code im able to open Camera from my device and able to scan the barcodes..
sap.ndc.BarcodeScanner.scan(
function(mResult) {
alert("We got a bar code\n" +
"Result: " + mResult.text + "\n" +
"Format: " + mResult.format + "\n" +
"Cancelled: " + mResult.cancelled);
},
function(Error) {
alert("Scanning failed: " + Error);
},
);
But how to decode QRCode image data? can someone please help me?
Thankyou in advance
You could use this lib for reading qr codes: https://github.com/LazarSoft/jsqrcode
In this function the file is read and the decoded result is outputted in a div container
function readFile(oFile) {
var input = oFile.target;
var reader = new FileReader();
reader.onload = function() {
var dataURL = reader.result;
decodeImageFromBase64(dataURL, function(decodedInformation) {
document.getElementById("output").innerHTML = decodedInformation;
})
};
reader.readAsDataURL(input.files[0]);
}
In this fuction the decoding magic is happen
function decodeImageFromBase64(data, callback) {
qrcode.callback = callback;
qrcode.decode(data)
}
I am facing a small issue here...
I want to write a javascript function to open files with different extensions, I have already written a function that can open files but with their extensions hard written in the code, how to make this dynamic? Like Instead of opening "file1.pdf" or "file1.png" I want to store the extension as a variable and open it dynamically.
Here is the code:-
<script>
function viewCM() {
var transferID = document.getElementById("theTransferID").value;
$.get("/Uploads/" + transferID + ".pdf")
.done(function () {
// Do something now you know the file exists.
window.open("/Uploads/" + transferID + ".pdf", '_blank', 'fullscreen=yes');
}).fail(function () {
// File doesn't exist - do something else.
alert("File was not found");
})
return true;
}
</script>
The above function works perfectly with any type of extension but I can't manage to know how to make the extension dynamic
Thanks in advance
EDIT: I don't get the file name from the server, The idea is simply that I have an upload button that uploads a file related to a specific "transfer" and I make the name of the uploaded file as transferID.whatever extension then when I want to open the file, I just write the code I posted. so I don't search the server for the file name.
Following up on comments in the original question:
function viewCM(fileExtension) {
var transferID = document.getElementById("theTransferID").value;
$.get("/Uploads/" + transferID + "." + fileExtension)
.done(function () {
// Do something now you know the file exists.
window.open("/Uploads/" + transferID + "." + fileExtension, '_blank', 'fullscreen=yes');
}).fail(function () {
// File doesn't exist - do something else.
alert("File was not found");
})
return true;
}
You should not need to have any if statements within viewCM() if you can pass the file extension to the function (unless you're planning on performing some type of validation).
It will automatically adjust according to file type.
means if pdf then open pdf viewer, excel should open excel
window.open( file Name );
Maybe you could find whats after the dot in the name to search for the type, just an idea.
var afterDot = str.substr(str.indexOf('.'));
Then depending on type do your code.
(This can be very much improved).
EDITED:
var transferID = document.getElementById("theTransferID").value;
var extension = transferID.substr(transferID.indexOf('.'));
Now you have this possibility:
if(extension == ".pdf"){ $.get("/Uploads/" + transferID + ".pdf")
.done(function () {//...}
For anyone facing the same issue, I have made a some kind of "naive" workaround to solve this by making multiple JavaScript functions to open various types of files.
It is as simple as : try to read a pdf file, if you can't then call a function that reads a png file etc!!
<script>
function viewCM() {
var transferID = document.getElementById("theTransferID").value;
$.get("/Uploads/" + transferID + ".pdf")
.done(function () {
// Do something now you know the file exists.
window.open("/Uploads/" + transferID + ".pdf", '_blank', 'fullscreen=yes');
}).fail(function () {
// File doesn't exist - call the next function.
viewCMPng();
})
return true;
}
function viewCMPng() {
var transferID = document.getElementById("theTransferID").value;
$.get("/Uploads/" + transferID + ".png")
.done(function () {
// Do something now you know the file exists.
window.open("/Uploads/" + transferID + ".png", '_blank', 'fullscreen=yes');
}).fail(function () {
// File doesn't exist - show alert message.
alert("File was not found");
})
return true;
}
</script>
I have a Grid view With Name time , device , Upload control columns , When i click upload in Grid view , files will be uploaded and saved in a folder, but i need to save the file with name_time_device..
How to do it any help??
if (context.Request.Files.Count > 0)
{
HttpFileCollection files = context.Request.Files;
for (int i = 0; i < files.Count; i++)
{
HttpPostedFile file = files[i];
//FileUploadData.tName = Request.QueryString["name"];
//string fname = context.Server.MapPath("~/FileUploads/") + FileUploadData.Name + "_" + FileUploadData.Id + "/" + DateTime.Now.ToString("ddMMyyyy") + "/" + FileUploadData.deviceID + "_" +
string fname = context.Server.MapPath("~/uploads/" + file.FileName);
file.SaveAs(fname);
}
context.Response.ContentType = "application/x-zip-compressed";
context.Response.Write("File Uploaded Successfully!");
}
File uploading and saving i am doing in javascript. the file is zipped..and saving it in uploads folder, but it need to be saved with name_id_date_device.zip..
I am using a function In that function i am using ajax call , above code is my generic handler to save the files..
file saving is from function, here while saving only i need to pass id_name_device so which ever user clicks upload and upload files his file will be saved by his id_name_device.zip..
Help??
Can you please speicify you are having problem in getting name, time, device from gridview or you have issue with file saving with name "name_id_date_device.zip"?
if you problem is saving file with a specific name and you are ok to get name, time or device from gridview then you should change this:
string fname = context.Server.MapPath("~/uploads/" + file.FileName);
TO
string fname = context.Server.MapPath("~/uploads/" + "name_id_date_device.zip");
in this way your file will be saved with this given name.
if you want to add your flag with file name just concat it with your filename when you are saving.
string fname = context.Server.MapPath("~/uploads/" + "what_flag_name_time" + file.FileName);
.and if you have anyother problem please be more specific. Thanks
I have AngularJS application , and I send to download svc file on server like this :
public static void DownloadCSV(string csvFile, string fileName)
{
HttpContext.Current.Response.AppendHeader("Content-Disposition",
"attachment; " +
"filename=" + fileName + ".csv;" +
"creation-date=" + DateTime.Now.ToString() + "; " +
"modification-date=" + DateTime.Now.ToString() + "; " +
"read-date=" + DateTime.Now.ToString());
HttpContext.Current.Response.ContentType = "text/csv";
HttpContext.Current.Response.Write(csvFile);
HttpContext.Current.Response.End();
}
in client side I send to a webApi function called "exportToCsv" which use DownloadCSV function , in this way :
var p = document.createElement('a')
p.setAttribute('href', "myApp/exportToCsv" )
p.click();
My problem is that I want to present a loading icon to the user untill the file finish to download.
How can I do that?
Prepare an html with a loading icon(.gif probably) that is centered on screen, rest is shadowed maybe;
<div ng-show="loading" ng-include src="'loading.html'" ></div>
On JS side, before download start, set loading to true, when finished set it to false
$scope.loading = false; // when starts
$scope.loading = false; // when finished
I've got a PHP script that can upload images stored on my server to a Facebook post. I've tried and tested it and the post gets to Facebook just fine.
I also have a drag and drop area on my webpage, based on this tutorial. What I've hit a brick wall on is getting the file dropped onto the DOM element that I'm listening to and then passing it over to the PHP script or, for that matter, a Javascript function.
I suspect that Javascript might be my best option, so I've looked at Dropzone.js but it appears to require that the image first goes to my server and then onto Facebook - I'd really like to avoid that for storage and upload time reasons.
I think in terms of a Javascript solution it's got something to do with FileReader() and here's my code so far:
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files;
for (var i = 0, f; f = files[i]; i++) {
if (!f.type.match('image.*')) { continue; }
var fileReader = new FileReader();
fileReader.onload = (function(theFile) {
return function(e) {
var blob = e.target.result;
var fd = new FormData();
fd.append("access_token",fbAccessToken);
fd.append("source", blob);fd.append("message","This is another post test...");
try{
$.ajax({
url:"https://graph.facebook.com/" + fbuserid + "/photos?access_token=" + fbAccessToken,
type:"POST",
data:fd,
processData:false,
contentType:false,
cache:false,
console.log("success " + data);
},
error:function(shr,status,data){
console.log("error " + data + " Status " + shr.status);
},
complete:function(){
console.log("Ajax Complete");
}
});
}catch(e){console.log(e);}
};})(f);
fileReader.readAsDataURL(f);
}
}
and I can see that raw image data is accessible through there but then how can I pass that to the Formdata?